/* ==========================================================================
   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) - demande explicite : tout le site en
     blanc pur en mode clair (plus aucun fond légèrement teinté bleu) --- */
  --bg: #ffffff;
  --bg-alt: #ffffff;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --text: #12141C;
  --text-secondary: #12141C;
  --border: #E4E8F5;
  --border-strong: #CDD6EE;
  --header-bg: rgba(255,255,255,.82);
  --shadow-color: rgba(31,41,82,.10);
  --shadow-color-strong: rgba(31,41,82,.18);
  --card-bg: #ffffff;

  /* Échelle d'élévation cohérente, dérivée de --shadow-color (s'adapte
     donc automatiquement si un thème redéfinit cette variable) */
  --shadow-sm: 0 2px 10px -4px var(--shadow-color);
  --shadow-md: 0 14px 30px -14px var(--shadow-color);
  --shadow-lg: 0 26px 54px -20px var(--shadow-color-strong);
}

html[data-theme="dark"] {
  --bg: #0C0E14;
  --bg-alt: #12151f;
  --bg-soft: #12151f;
  --surface: #171b26;
  --surface-2: #1b1f2d;
  --text: #EAEDF7;
  --text-secondary: #EAEDF7;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --header-bg: rgba(12,14,20,.9);
  --shadow-color: rgba(0,0,0,.35);
  --shadow-color-strong: rgba(0,0,0,.5);
  --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;
}

/* Protection des images : pas de menu "enregistrer" au appui long sur
   mobile, pas de sélection/glisser au clic-maintenu sur desktop.
   (Mesure de dissuasion : une image affichée dans un navigateur reste
   techniquement accessible, mais ceci bloque les usages courants.) */
img { -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }

h1, h2, h3, h4, h5, h6, .font-titre {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

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; }
.btn-decouvrir-pole {
  background-color: var(--bleu-principal);
  border: 1.5px solid var(--bleu-principal);
  color: #fff;
  font-weight: 600;
  padding: .6rem 1.45rem;
  border-radius: var(--radius);
}
.btn-decouvrir-pole:hover, .btn-decouvrir-pole:focus {
  background-color: var(--bleu-fonce);
  border-color: var(--bleu-fonce);
  color: #fff;
  transform: translateY(-2px);
}

.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 {
  width: 56px; height: 56px;
  object-fit: contain;
  border-radius: 10px;
  animation: otyche-preloader-zoom 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(65,105,225,.45));
}
/* Zoom In -> Zoom Out -> Zoom In -> Zoom Out, jamais de rotation */
@keyframes otyche-preloader-zoom {
  0%   { transform: scale(1);    opacity: 1; }
  25%  { transform: scale(1.14); opacity: 1; }
  50%  { transform: scale(1);    opacity: .92; }
  75%  { transform: scale(.86);  opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .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: 60px; height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sidebar-otyche-logo img { width: 100%; height: 100%; object-fit: contain; }

.sidebar-otyche-logo.sidebar-otyche-logo-fallback {
  border-radius: 11px;
  background: var(--bleu-principal);
  color: #fff; font-family: var(--font-titre); font-weight: 700;
}

.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: rgba(255,255,255,.85); 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: rgba(255,255,255,.9); 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: rgba(255,255,255,.85);
  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: rgba(255,255,255,.85); 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);
  max-height: min(560px, 86vh);
  overflow-y: auto;
  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: rgba(255,255,255,.9); 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: rgba(255,255,255,.85); }

@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: rgba(255,255,255,.85); 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: rgba(255,255,255,.7); 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; }
  .navbar-brand-otyche .logo-img { height: 28px; }
}

@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: var(--shadow-md);
  transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
.site-header.is-scrolled .nav-island { box-shadow: var(--shadow-lg); }

.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: row;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: var(--text-secondary) !important;
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .65rem 1rem !important;
  border-radius: 14px;
  border-right: 1px solid var(--border);
  transition: background-color .25s ease, color .25s ease;
}
/* Icônes retirées de la navigation desktop : le libellé seul suffit et
   reste toujours lisible (plus besoin de survoler pour voir le texte). */
.nav-link-otyche i { display: none; }
.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: var(--shadow-lg); 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: rgba(255,255,255,.9); 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: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  gap: .5rem;
  color: #fff;
  background: var(--bleu-principal);
  border: 1px solid var(--bleu-principal);
  box-shadow: 0 6px 16px rgba(65,105,225,.35);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: .65rem 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 1.1rem;
}
.eyebrow-otyche .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  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;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-header-otyche .breadcrumb-otyche,
.page-header-otyche p.lead { max-width: 720px; }
/* Variante avec photo de fond représentative de la page (section titre) :
   image cover/center + voile sombre-bleuté pour garder le texte lisible. */
.page-header-otyche.has-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-header-otyche.has-bg-image::after {
  background:
    linear-gradient(180deg, rgba(8,10,18,.82) 0%, rgba(12,20,45,.72) 55%, rgba(8,10,18,.86) 100%);
}
/* Sur une photo, tout le texte doit rester blanc, quel que soit le thème du
   site : on force le blanc sur chaque élément de la bannière (titre, badge,
   fil d'Ariane...) plutôt que de dépendre de la couleur par défaut de chacun. */
.page-header-otyche.has-bg-image,
.page-header-otyche.has-bg-image h1,
.page-header-otyche.has-bg-image p,
.page-header-otyche.has-bg-image span,
.page-header-otyche.has-bg-image a { color: #fff !important; }
.page-header-otyche.has-bg-image .badge-pole {
  background: rgba(255,255,255,.18);
  color: #fff;
}
html:not([data-theme="dark"]) .page-header-otyche.has-bg-image .badge-pole { background: rgba(255,255,255,.18); color: #fff; }
.page-header-otyche .breadcrumb-otyche { color: rgba(255,255,255,.85); }
.page-header-otyche .breadcrumb-otyche a { color: rgba(255,255,255,.9); 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: rgba(255,255,255,.9); 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);
  box-shadow: var(--shadow-sm);
  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: var(--shadow-lg); border-color: rgba(65,105,225,.4); }
/* Barre latérale "collante" - uniquement à partir du desktop (>=992px) :
   sur mobile/tablette, une carte sticky au milieu d'une longue page
   colle de façon gênante ; elle reste donc en flux normal en dessous
   du contenu principal. */
@media (min-width: 992px) {
  .sidebar-sticky-lg { position: sticky; top: 100px; }
}
.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; }

/* ---------------------------------------------------------------------- */
/* Bandeau "Un besoin spécifique ?" - section autonome (plus mêlée à la    */
/* grille des pôles, y compris en desktop)                                */
/* ---------------------------------------------------------------------- */
.besoin-specifique-banner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.1rem;
  background: var(--fond-sombre);
  border-radius: 22px;
  padding: 2.25rem 1.75rem;
  color: #fff;
}
.besoin-specifique-icon {
  width: 58px; height: 58px; border-radius: 14px; flex-shrink: 0;
  background: rgba(255,255,255,.1); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.besoin-specifique-text p { color: rgba(255,255,255,.9); }
@media (min-width: 768px) {
  .besoin-specifique-banner { flex-direction: row; text-align: left; padding: 2rem 2.5rem; }
  .besoin-specifique-text { flex: 1; }
}
/* Mode clair : même bandeau, mais en blanc comme le reste du site */
html:not([data-theme="dark"]) .besoin-specifique-banner {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
html:not([data-theme="dark"]) .besoin-specifique-icon {
  background: rgba(65,105,225,.1);
  color: var(--bleu-principal);
}
html:not([data-theme="dark"]) .besoin-specifique-text p { color: var(--text-secondary); }

/* ---------------------------------------------------------------------- */
/* Zone photo équipe/entreprise - page "Qui sommes-nous"                  */
/* ---------------------------------------------------------------------- */
.apropos-photo-zone { width: 100%; }
.apropos-photo-img {
  width: 100%; height: auto; max-height: 420px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm); display: block;
}
.apropos-photo-placeholder {
  width: 100%; min-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  color: var(--text-secondary); background: var(--bg-alt);
}
.apropos-photo-placeholder i { font-size: 2.2rem; color: var(--bleu-clair); }
.apropos-photo-placeholder span { font-size: .9rem; }

/* ---------------------------------------------------------------------- */
/* Bandeau "Solutions Cloud"                                               */
/* ---------------------------------------------------------------------- */
.cloud-banner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 22px;
  padding: 2.25rem 1.75rem;
}
.cloud-banner-icon {
  width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0;
  background: rgba(65,105,225,.1); color: var(--bleu-principal);
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
}
.cloud-banner-body { flex: 1; }
@media (min-width: 768px) {
  .cloud-banner { flex-direction: row; text-align: left; padding: 2.25rem 2.5rem; }
}

/* ---------------------------------------------------------------------- */
/* CTA final (accueil) - bandeau bleu nuit en mode sombre, blanc en mode  */
/* clair, comme le reste des sections du site                             */
/* ---------------------------------------------------------------------- */
.cta-final-otyche { background: var(--fond-sombre); }
.cta-final-otyche-title { color: #fff; }
.cta-final-otyche-text { color: rgba(255,255,255,.9); }
.cta-final-otyche-btn { border-color: #3a4160; color: #fff; }
html:not([data-theme="dark"]) .cta-final-otyche { background: #ffffff; border-top: 1px solid var(--border); }
html:not([data-theme="dark"]) .cta-final-otyche-title { color: var(--text); }
html:not([data-theme="dark"]) .cta-final-otyche-text { color: var(--text-secondary); }
html:not([data-theme="dark"]) .cta-final-otyche-btn { border-color: var(--bleu-principal); color: var(--bleu-principal); }
html:not([data-theme="dark"]) .cta-final-otyche-btn:hover { color: #fff; }
.card-otyche.d-flex.flex-column > .btn { align-self: center; }
.card-otyche:hover .icon-pole { transform: scale(1.1) rotate(-4deg); }

/* Cartes "pôle" (icône + titre + texte) : au survol desktop, fond bleu,
   texte et icône blancs, transition douce - identité Otyche demandée par le client. */
.card-otyche-pole { transition: all .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .card-otyche-pole:hover {
    background: var(--bleu-principal);
    border-color: var(--bleu-principal);
  }
  .card-otyche-pole:hover .icon-pole { background: rgba(255,255,255,.18); color: #fff; }
  .card-otyche-pole:hover h3,
  .card-otyche-pole:hover p,
  .card-otyche-pole:hover .text-secondary-otyche { color: #fff !important; }
  .card-otyche-pole:hover .btn-outline-otyche { background: #fff; color: var(--bleu-principal); border-color: #fff; }
}

/* ---------------------------------------------------------------------- */
/* "Pourquoi choisir Otyche" - carousel (desktop/tablette) ->              */
/* liste verticale (mobile)                                                */
/* ---------------------------------------------------------------------- */
.card-carousel-otyche { max-width: 1140px; margin: 0 auto; }
.card-carousel-otyche-viewport { overflow: hidden; border-radius: 20px; }
.card-carousel-otyche-stage {
  display: flex;
  gap: 1.5rem;
  transition: transform .55s cubic-bezier(.25,.75,.35,1);
  will-change: transform;
}
.card-carousel-otyche-card {
  flex: 0 0 calc((100% - 2 * 1.5rem) / 3); /* 3 cartes visibles sur desktop */
  min-width: 0;
  padding: 1.75rem 1.6rem;
  border-radius: 18px;
  background: var(--fond-sombre);
  color: #fff;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.card-carousel-otyche-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -16px rgba(0,0,0,.5); }
.card-carousel-otyche-card h3 { color: #fff; margin-bottom: .5rem; font-size: 1.05rem; }
.card-carousel-otyche-card p { color: rgba(255,255,255,.9); font-size: .88rem; line-height: 1.55; margin-bottom: 0; }
.card-carousel-otyche-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(65,105,225,.16);
  color: var(--bleu-clair);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem; flex-shrink: 0;
}
/* Cartes "pôles" réutilisées dans un carrousel sombre : icône claire et
   bouton adapté au fond sombre, quel que soit le thème du site. */
.card-otyche-pole-carousel-card .icon-pole { background: rgba(65,105,225,.18); color: var(--bleu-clair); }
.card-otyche-pole-carousel-card .btn-outline-otyche { color: #fff; border-color: rgba(255,255,255,.4); }
.card-otyche-pole-carousel-card .btn-outline-otyche:hover { background: var(--bleu-principal); border-color: var(--bleu-principal); color: #fff; }
.card-carousel-otyche-index {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--font-titre); font-weight: 600; font-size: .72rem;
  letter-spacing: .06em; color: rgba(255,255,255,.85);
}

/* Mode clair : ces cartes suivent désormais le blanc du reste du site
   au lieu de rester bleu nuit en permanence (le bleu nuit ne reste que
   pour le mode sombre, où il se fond dans le thème). */
html:not([data-theme="dark"]) .card-carousel-otyche-card {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
html:not([data-theme="dark"]) .card-carousel-otyche-card:hover { box-shadow: var(--shadow-lg); }
html:not([data-theme="dark"]) .card-carousel-otyche-card h3 { color: var(--text); }
html:not([data-theme="dark"]) .card-carousel-otyche-card p { color: var(--text-secondary); }
html:not([data-theme="dark"]) .card-carousel-otyche-index { color: var(--text-secondary); }

.card-carousel-otyche-controls {
  display: flex; align-items: center; justify-content: center; gap: .85rem;
  margin-top: 1.5rem;
}
.card-carousel-otyche-btn {
  width: 38px; height: 38px; 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-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.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; }

/* Tablette : 2 cartes visibles */
@media (max-width: 991.98px) and (min-width: 768px) {
  .card-carousel-otyche-card { flex-basis: calc((100% - 1.5rem) / 2); }
}

/* Mobile : plus de carousel - présentation verticale classique */
@media (max-width: 767.98px) {
  .card-carousel-otyche { max-width: 100%; }
  .card-carousel-otyche-viewport { overflow: visible; border-radius: 0; }
  .card-carousel-otyche-stage {
    display: block;
    transform: none !important;
    gap: 0;
  }
  .card-carousel-otyche-card {
    flex-basis: auto;
    width: 100%;
    margin-bottom: 1rem;
  }
  .card-carousel-otyche-card:last-child { margin-bottom: 0; }
  .card-carousel-otyche-card:hover { transform: none; }
  .card-carousel-otyche-controls { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card-carousel-otyche-stage { transition: none; }
  .card-carousel-otyche-card { transition: none; }
}

.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%;
  box-shadow: var(--shadow-sm);
  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: var(--shadow-lg); border-color: rgba(65,105,225,.4); color: var(--text); }
.media-card .media-card-img {
  display: block;
  width: 100%;
  height: 165px;
  object-fit: cover; /* l'image remplit toujours la carte, quelle que soit sa taille/proportion d'origine */
  object-position: center;
  flex-shrink: 0;
  background: var(--bg-alt);
}
.media-card .media-card-placeholder {
  width: 100%;
  height: 165px;
  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: 36%;
    height: 100%; /* remplit toute la hauteur de la carte (au lieu de "auto") pour garder une vraie forme de carte */
  }
  .media-card.media-card-horizontal .media-card-body { width: 64%; }
}

/* ---------------------------------------------------------------------- */
/* 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: cover; /* l'image remplit tout le cadre - plus de bandes de fond visibles */
  object-position: center;
  background: var(--bg-alt);
}
@media (min-width: 576px) {
  .detail-img, .media-placeholder { height: 320px; }
}
@media (min-width: 992px) {
  .detail-img, .media-placeholder { height: 380px; }
}

/* --- Vignettes de la galerie photo produit --- */
.produit-galerie-vignettes {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .75rem;
}
.produit-galerie-vignette {
  width: 64px; height: 64px; padding: 0; border-radius: 8px;
  border: 2px solid var(--border); overflow: hidden; cursor: pointer;
  background: var(--bg-alt); flex-shrink: 0;
  transition: border-color .2s ease, opacity .2s ease;
  opacity: .75;
}
.produit-galerie-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produit-galerie-vignette:hover { opacity: 1; }
.produit-galerie-vignette.is-active { border-color: var(--bleu-principal); opacity: 1; }


/* ---------------------------------------------------------------------- */
/* 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: rgba(255,255,255,.92); padding: 2.75rem 0 1.5rem; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.site-footer a { color: rgba(255,255,255,.92); }
.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; }

/* --- Colonnes "Liens utiles" du footer --- */
.footer-columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 2rem 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-col-brand .footer-tagline { font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.85); max-width: 320px; margin: .9rem 0 1.15rem; }
.footer-col-title { font-family: var(--font-titre); font-weight: 700; font-size: .95rem; color: #fff; margin-bottom: 1rem; letter-spacing: .01em; }
.footer-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.footer-links-list a { font-size: .88rem; text-decoration: none; transition: color .2s ease, padding-left .2s ease; }
.footer-links-list a:hover { padding-left: 3px; }
.footer-contact-list a { display: flex; align-items: flex-start; gap: .5rem; line-height: 1.4; }
.footer-contact-list a i { color: var(--bleu-clair); flex-shrink: 0; margin-top: .15rem; }

html:not([data-theme="dark"]) .footer-columns { border-bottom-color: var(--border); }
html:not([data-theme="dark"]) .footer-col-title { color: var(--text); }
html:not([data-theme="dark"]) .footer-col-brand .footer-tagline { color: var(--text-secondary); }
html:not([data-theme="dark"]) .footer-contact-list a i { color: var(--bleu-principal); }

@media (max-width: 991px) {
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-col-brand { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 575px) {
  .footer-columns { grid-template-columns: 1fr; text-align: center; }
  .footer-col-brand { align-items: center; display: flex; flex-direction: column; }
  .footer-social { justify-content: center; }
  .footer-contact-list a { justify-content: center; }
  .footer-col-brand .footer-tagline { max-width: none; }

  /* "Liens utiles" et "Nos pôles" : 2 colonnes côte à côte plutôt qu'empilées */
  .footer-col:not(.footer-col-brand) .footer-links-list:not(.footer-contact-list) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    text-align: left;
  }

  /* Téléphone et e-mail côte à côte ; l'adresse reste seule en dessous */
  .footer-contact-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: .5rem;
    row-gap: .6rem;
  }
  .footer-contact-list .footer-contact-row { text-align: left; }
  .footer-contact-list .footer-contact-row a { justify-content: flex-start; font-size: .82rem; }
  .footer-contact-list li:not(.footer-contact-row) { grid-column: 1 / -1; }
}

.footer-legal-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.25rem;
  margin-top: 1.75rem;
  text-align: center;
}
.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: .85rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
  color: rgba(255,255,255,.75);
}

/* Mode clair : le pied de page passe en blanc comme le reste du site,
   avec un simple filet en haut pour le séparer du contenu (au lieu de
   rester bleu nuit en permanence). */
html:not([data-theme="dark"]) .site-footer {
  background: #ffffff;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}
html:not([data-theme="dark"]) .site-footer a { color: var(--text-secondary); }
html:not([data-theme="dark"]) .site-footer a:hover { color: var(--bleu-principal); }
html:not([data-theme="dark"]) .site-footer .footer-brand { color: var(--text); }
html:not([data-theme="dark"]) .footer-social a { border-color: var(--border-strong); color: var(--text); }
html:not([data-theme="dark"]) .footer-social a:hover { color: #fff; }
html:not([data-theme="dark"]) .footer-bottom-line { border-top-color: var(--border); color: var(--text-secondary); }

@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); }
}

/* Retour en haut : juste au-dessus du bouton WhatsApp, masqué tant qu'on
   n'a pas fait défiler la page */
.back-to-top-btn {
  position: fixed; right: 1.25rem; bottom: 5.35rem; z-index: 1049;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--fond-sombre); color: #fff;
  border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s, background-color .3s ease;
}
.back-to-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s ease, transform .25s ease; }
.back-to-top-btn:hover { background: var(--bleu-principal); color: #fff; }
@media (max-width: 575px) {
  .whatsapp-float { width: 50px; height: 50px; font-size: 1.35rem; right: 1rem; bottom: 1rem; }
  .back-to-top-btn { width: 42px; height: 42px; right: 1rem; bottom: 4.75rem; }
}

/* ---------------------------------------------------------------------- */
/* 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: 700; padding: .5rem 1.1rem; border-radius: var(--radius); font-size: .85rem; }

/* 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, .btn-decouvrir-pole { width: 100%; }
  .btn-magnetic { justify-content: center; text-align: center; }
  .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; }

/* Sur mobile, on garde les groupes de 2 boutons côte à côte plutôt que de
   les empiler : chaque bouton se réduit et se partage l'espace disponible. */
@media (max-width: 575px) {
  .hero-cta, .cta-final-otyche .d-flex, .btn-group-otyche {
    flex-wrap: nowrap;
  }
  .hero-cta .btn, .cta-final-otyche .btn, .btn-group-otyche .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: .85rem;
    padding-right: .85rem;
    font-size: .82rem;
    white-space: normal;
  }
  .hero-cta .btn span, .hero-cta .btn i { white-space: nowrap; }
}

/* ==========================================================================
   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: clamp(480px, 86vh, 640px);
  display: flex;
  align-items: stretch;
}
.hero-slider:focus { outline: none; }

/* --- Slides : chaque diapositive est une photo plein écran avec un
   voile sombre pour la lisibilité, et le texte centré horizontalement
   et verticalement, à toutes les tailles d'écran. --- */
.hero-slides { position: relative; z-index: 1; width: 100%; }
.hero-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), visibility 0s linear .9s;
  padding: 5.5rem 0;
}
.hero-slide.is-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 1s cubic-bezier(.22,.61,.36,1);
}

.hero-slide-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
  transition: transform 7s ease-out;
}
.hero-slide.is-active .hero-slide-media { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .hero-slide-media, .hero-slide.is-active .hero-slide-media { transition: none; transform: none; }
}

/* Voile sombre : garantit la lisibilité du texte sur n'importe quelle photo */
.hero-slide-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(8,10,18,.72) 0%, rgba(8,10,18,.6) 45%, rgba(8,10,18,.82) 100%),
    linear-gradient(90deg, rgba(8,10,18,.35) 0%, rgba(8,10,18,.1) 50%, rgba(8,10,18,.35) 100%);
}

.hero-slide-inner { position: relative; z-index: 2; width: 100%; }
.hero-slide-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-titre); font-weight: 700; font-size: .85rem;
  letter-spacing: .02em; text-transform: uppercase;
  color: #fff;
  background: var(--bleu-principal);
  border: 1px solid var(--bleu-principal);
  padding: .55rem 1.3rem; border-radius: var(--radius);
  margin-bottom: 1.1rem;
  opacity: 0; transform: translateY(14px);
}
.hero-slide.is-active .hero-eyebrow { animation: hs-fade-up .7s cubic-bezier(.22,.61,.36,1) .4s forwards; }

.hero-title {
  color: #fff;
  font-size: clamp(1.75rem, 3.4vw, 2.9rem);
  line-height: 1.18;
  margin-bottom: .95rem;
  overflow-wrap: normal;
  word-break: normal;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.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: #dfe3f0; 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-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; }
@keyframes hs-fade-up { to { opacity: 1; transform: translateY(0); } }

/* --- 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; }

/* --- Navigation : flèches, points, progression, compteur - toujours en
   overlay superposé, lisible sur n'importe quelle photo grâce au voile --- */
.hero-slider-nav {
  position: absolute; left: 0; right: 0; bottom: 1.6rem;
  z-index: 3;
  pointer-events: none;
}
.hero-slider-nav .container { pointer-events: none; }
.hero-arrow {
  pointer-events: auto;
  width: 42px; height: 42px; border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24);
  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,.32); 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,.6); }
.hero-dot.is-active { width: 34px; background: var(--bleu-principal); }

.hero-slide-counter {
  display: none;
  align-items: center; gap: .3rem;
  font-family: var(--font-titre); font-size: .82rem; color: #d7dbec;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  padding: .4rem .75rem; border-radius: 100px; backdrop-filter: blur(8px);
}
.hero-slide-counter .hs-current { color: #fff; font-weight: 700; }

.hero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0; background: rgba(255,255,255,.12); 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; }

@media (min-width: 576px) {
  .hero-cta .btn { width: auto; }
}

@media (min-width: 992px) {
  .hero-slider { min-height: clamp(600px, 88vh, 860px); }
  .hero-slide { padding: 6.5rem 0 7.5rem; }
  .hero-slide-counter { display: inline-flex; position: absolute; right: 1.5rem; bottom: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .hs-char { opacity: 1; transform: none; animation: none; }
  .hero-subtitle, .hero-desc, .hero-cta { opacity: 1; transform: none; 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: rgba(255,255,255,.85); 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); }

/* --- Variante "pôle" du coverflow (pas de photo : icône + texte) --- */
.coverflow-card-pole {
  background: linear-gradient(155deg, var(--bleu-principal), var(--bleu-fonce));
  display: flex; align-items: center; justify-content: center;
}
.coverflow-pole-icon {
  color: rgba(255,255,255,.9);
  font-size: 3rem;
  transition: opacity .3s ease, transform .3s ease;
}
.coverflow-card-pole.is-active .coverflow-pole-icon { opacity: 0; transform: scale(.7); }
.coverflow-pole-overlay {
  top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.75rem 1.5rem; gap: .6rem;
  background: linear-gradient(155deg, rgba(65,105,225,.97), rgba(46,76,184,.97));
}
.coverflow-pole-overlay i.icon-pole-lg { font-size: 2.2rem; color: #fff; margin-bottom: .3rem; }
.coverflow-pole-overlay h3 { font-size: 1.15rem; margin: 0; }
.coverflow-pole-overlay p { font-size: .85rem; color: rgba(255,255,255,.88); margin: 0; }
.coverflow-pole-overlay .btn { margin-top: .4rem; background: #fff; color: var(--bleu-principal); border-color: #fff; }
.coverflow-pole-overlay .btn:hover { background: transparent; color: #fff; }

.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; }
}
@media (max-width: 380px) {
  /* Réduit la taille des pastilles de l'arc sur les très petits écrans
     pour éviter tout débordement horizontal (5 boutons + espacements). */
  .btn-carousel { --btn-carousel-size: 40px !important; }
  .btn-carousel-arc { gap: .4rem; padding: 0 .25rem; }
}

/* 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: rgba(255,255,255,.85); 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; }
}

/* --- Marquee "Ils nous font confiance" (logos clients) --- */
.clients-marquee-section { overflow: hidden; }
.clients-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); }
.clients-marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: stats-marquee-scroll 32s linear infinite;
}
.clients-marquee-section:hover .clients-marquee-track { animation-play-state: paused; }
.client-marquee-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  padding: 0 2.75rem; white-space: nowrap;
}
.client-marquee-item img { height: 40px; max-width: 140px; width: auto; object-fit: contain; flex-shrink: 0; }
a.client-marquee-item { color: inherit; text-decoration: none; }
a.client-marquee-item:hover { color: inherit; }
a.client-marquee-item:hover span { color: var(--bleu-principal); }
.client-marquee-item span { font-family: var(--font-titre); font-weight: 700; font-size: .85rem; color: var(--text-secondary); opacity: .85; transition: color .2s ease; }
@media (max-width: 575px) {
  .client-marquee-item { padding: 0 1.5rem; }
  .client-marquee-item img { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .clients-marquee-track { animation: none; }
}

/* ==========================================================================
   MODE CLAIR — Corrections des sections "hero" (bannières)
   Demande : fond blanc, texte noir, animations/décors bien visibles.
   Le mode sombre n'est pas concerné par ce bloc.
   ========================================================================== */

/* --- Hero slider (accueil) --- */
/* Le hero utilise désormais des photos plein écran avec un voile sombre
   pour la lisibilité : il garde volontairement le même rendu (texte blanc,
   voile sombre) en mode clair et en mode sombre, car la photo elle-même
   ne change pas de thème. Rien à surcharger ici. */

/* --- Ancienne bannière .hero-otyche (si utilisée) --- */
html:not([data-theme="dark"]) .hero-otyche {
  background: #ffffff;
  color: var(--text);
}
html:not([data-theme="dark"]) .hero-otyche h1 { color: var(--text); }
html:not([data-theme="dark"]) .hero-otyche .lead { color: var(--text-secondary); }

/* --- Bannières de page intérieures (.page-header-otyche) - blanc pur
   en mode clair, comme le reste du site. Les bannières avec photo de
   fond (.has-bg-image) restent sombres avec texte blanc dans les deux
   thèmes : un fond photo a toujours besoin d'un texte clair par-dessus. */
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image) {
  background: #ffffff;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image)::before { opacity: 0; }
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image)::after { background: none; }
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image) .breadcrumb-otyche { color: var(--text-secondary); }
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image) .breadcrumb-otyche a { color: var(--bleu-principal); }
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image) .breadcrumb-otyche a:hover { color: var(--bleu-fonce); }
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image) .breadcrumb-otyche .active { color: var(--text); }
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image) h1 { color: var(--text); }
html:not([data-theme="dark"]) .page-header-otyche:not(.has-bg-image) p.lead { color: var(--text-secondary); }

/* ---------------------------------------------------------------------- */
/* Menu mobile (tiroir + popup Services) en mode clair : fond blanc,      */
/* icônes bleues, texte noir - au lieu du fond sombre utilisé par défaut. */
/* ---------------------------------------------------------------------- */
html:not([data-theme="dark"]) .sidebar-otyche {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15,23,42,.16), 0 0 0 1px var(--border);
}
html:not([data-theme="dark"]) .sidebar-otyche-top { border-bottom-color: var(--border); }
html:not([data-theme="dark"]) .sidebar-otyche-brand-text { color: var(--text); }
html:not([data-theme="dark"]) .sidebar-otyche-section-label { color: var(--text-secondary); }
html:not([data-theme="dark"]) .sidebar-otyche-tile {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text);
}
html:not([data-theme="dark"]) .sidebar-otyche-tile i { color: var(--bleu-principal); }
html:not([data-theme="dark"]) .sidebar-otyche-tile:hover,
html:not([data-theme="dark"]) .sidebar-otyche-tile.active,
html:not([data-theme="dark"]) .sidebar-otyche-tile.is-open {
  background: var(--bleu-principal); border-color: var(--bleu-principal); color: #fff;
}
html:not([data-theme="dark"]) .sidebar-otyche-tile:hover i,
html:not([data-theme="dark"]) .sidebar-otyche-tile.active i,
html:not([data-theme="dark"]) .sidebar-otyche-tile.is-open i { color: #fff; }
html:not([data-theme="dark"]) .sidebar-otyche-tile-toggle::after { color: var(--text-secondary); }
html:not([data-theme="dark"]) .sidebar-otyche-tile-toggle.is-open::after { color: var(--bleu-principal); }
html:not([data-theme="dark"]) .sidebar-otyche-submenu a { color: var(--text); }
html:not([data-theme="dark"]) .sidebar-otyche-submenu a:hover { color: var(--bleu-principal); background: var(--bg-alt); }
html:not([data-theme="dark"]) .sidebar-otyche-bottom { border-top-color: var(--border); }
html:not([data-theme="dark"]) .sidebar-otyche-social a {
  background: var(--bg-alt); border-color: var(--border); color: var(--bleu-principal);
}
html:not([data-theme="dark"]) .sidebar-otyche-social a:hover { background: var(--bleu-principal); color: #fff; }

html:not([data-theme="dark"]) .services-popup {
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15,23,42,.2), 0 0 0 1px var(--border);
}
html:not([data-theme="dark"]) .services-popup-header { border-bottom-color: var(--border); }
html:not([data-theme="dark"]) .services-popup-header h3 { color: var(--text); }
html:not([data-theme="dark"]) .services-popup-close { background: var(--bg-alt); color: var(--text); }
html:not([data-theme="dark"]) .services-popup-close:hover { background: var(--bleu-principal); color: #fff; }
html:not([data-theme="dark"]) .services-popup-list a { color: var(--text); }
html:not([data-theme="dark"]) .services-popup-list a:hover { background: rgba(65,105,225,.1); color: var(--bleu-principal); }
html:not([data-theme="dark"]) .services-popup-icon { color: var(--bleu-principal); background: rgba(65,105,225,.1); }
html:not([data-theme="dark"]) .services-popup-list a:hover .services-popup-icon { background: var(--bleu-principal); color: #fff; }
html:not([data-theme="dark"]) .services-popup-list a > i:last-child { color: var(--text-secondary); }

/* ---------------------------------------------------------------------- */
/* Texte de contenu (pages service, qui sommes-nous, article, réalisation) */
/* paragraphes justifiés, titres de section centrés - uniquement les      */
/* éléments de premier niveau (pas ceux nichés dans une carte).           */
/* ---------------------------------------------------------------------- */
.prose-otyche > p,
.prose-otyche > ul,
.prose-otyche > ol {
  text-align: justify;
  text-align-last: left;
}
.prose-otyche > h2,
.prose-otyche > h3 {
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Pages de service + Contact : sur desktop, l'encadré "Discutons de      */
/* votre projet" / "Nos coordonnées" passe sous le contenu (pleine        */
/* largeur) au lieu d'être une colonne latérale étroite.                  */
/* ---------------------------------------------------------------------- */
@media (min-width: 992px) {
  .service-layout-row {
    display: flex;
    flex-direction: column;
  }
  .service-layout-row > .service-content-col,
  .service-layout-row > .service-sidebar-col {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }
  .service-layout-row > .service-sidebar-col { margin-top: 1rem; }

  .service-sidebar-card {
    position: static !important;
    top: auto !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.5rem;
  }
  .service-sidebar-card h3, .service-sidebar-card > p {
    flex: 1 1 260px;
    margin-bottom: 0 !important;
  }
  .service-sidebar-card .btn {
    width: auto !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto;
  }

  /* Contact : la liste "Nos coordonnées" s'étale sur une ligne */
  .contact-coords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-bottom: 0 !important;
  }
  .contact-coords-list li { flex: 1 1 200px; margin-bottom: 0 !important; }
  .service-sidebar-card .contact-coords-list + .btn { flex: 0 0 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* ---------------------------------------------------------------------- */
/* Carrousel "8 pôles" : coverflow sur desktop/tablette, bascule 3D sur   */
/* mobile (plus dynamique, une seule carte visible à la fois).            */
/* ---------------------------------------------------------------------- */
.pole-flip-carousel { display: none; }
@media (max-width: 767px) {
  .pole-carousel-desktop { display: none; }
  .pole-flip-carousel { display: block; }
}

.pole-flip-carousel {
  perspective: 1400px;
}
.pole-flip-stage {
  position: relative;
  height: 380px;
}
.pole-flip-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .6rem;
  padding: 2rem 1.5rem;
  border-radius: 22px;
  background: linear-gradient(155deg, var(--bleu-principal), var(--bleu-fonce));
  box-shadow: 0 25px 50px rgba(65,105,225,.3);
  text-decoration: none;
  backface-visibility: hidden;
  transform: rotateY(90deg) scale(.85);
  opacity: 0;
  pointer-events: none;
  transition: transform .65s cubic-bezier(.34,1.2,.64,1), opacity .5s ease;
}
.pole-flip-card.is-active {
  transform: rotateY(0deg) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.pole-flip-card.is-leaving {
  transform: rotateY(-90deg) scale(.85);
  opacity: 0;
}
.pole-flip-icon {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,.18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem;
  margin-bottom: .4rem;
}
.pole-flip-card h3 { color: #fff; font-size: 1.2rem; margin: 0; }
.pole-flip-card p { color: #fff; font-size: .9rem; margin: 0; max-width: 320px; }
.pole-flip-card .btn { margin-top: .5rem; background: #fff; color: var(--bleu-principal); border-color: #fff; }
.pole-flip-card .btn:hover { background: transparent; color: #fff; }

.pole-flip-dots {
  display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem;
}
.pole-flip-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none;
  background: var(--border-strong);
  padding: 0; cursor: pointer;
  transition: background-color .25s ease, transform .25s ease, width .25s ease;
}
.pole-flip-dots button.is-active {
  background: var(--bleu-principal);
  width: 22px; border-radius: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .pole-flip-card { transition: opacity .3s ease; transform: none !important; }
}