/*!
Theme Name: iD4Connect
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: id4connect
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================
   iD4Connect — DESIGN SYSTEM
   ============================================ */

/* ── TOKENS GLOBAUX ── */
:root {
  --orange: #F97316;
  --orange-d: #EA6C0A;
  --orange-pale: #FFF7ED;
  --orange-border: #FED7AA;
  --orange-txt: #C2410C;
  --green: #16A34A;
  --green-pale: #F0FDF4;
  --green-border: #BBF7D0;
  --red: #DC2626;
  --red-pale: #FEF2F2;
  --red-border: #FECACA;
  --blue-pale: #EFF6FF;
  --purple-pale: #F5F3FF;
  --font: 'Inter', sans-serif;
  --r-xs: 5px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 100px;
  --tr: 0.16s ease;
  --hh: 64px;
}

/* ── LIGHT MODE ── */
:root, [data-theme="light"] {
  --bg: #F5F4F0;
  --card: #FFFFFF;
  --section: #EEEDEA;
  --t9: #111827;
  --t7: #374151;
  --t5: #6B7280;
  --t4: #9CA3AF;
  --border: #E5E3DE;
  --border-s: #D1CFCA;
  --sh-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sh: 0 4px 16px rgba(0,0,0,.08);
  --sh-lg: 0 12px 40px rgba(0,0,0,.10);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg: #0C1221;
  --card: #162032;
  --section: #0A0E1A;
  --t9: #F9FAFB;
  --t7: #D1D5DB;
  --t5: #6B7280;
  --t4: #4B5563;
  --border: #1F2D3D;
  --border-s: #2D3F52;
  --sh-sm: 0 1px 3px rgba(0,0,0,.3);
  --sh: 0 4px 16px rgba(0,0,0,.3);
  --sh-lg: 0 12px 40px rgba(0,0,0,.4);
  --orange-pale: rgba(249,115,22,.08);
  --orange-border: rgba(249,115,22,.2);
  --orange-txt: #FB923C;
  --green-pale: rgba(22,163,74,.08);
  --green-border: rgba(22,163,74,.2);
  --red-pale: rgba(220,38,38,.08);
  --red-border: rgba(220,38,38,.2);
  --blue-pale: rgba(59,130,246,.08);
  --purple-pale: rgba(139,92,246,.08);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t9);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--hh);
  transition: background .25s, color .25s;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* ── ACCESSIBILITÉ (_s) ── */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1; border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto !important;
  clip-path: none; color: #21759b; display: block; font-size: .875rem;
  font-weight: 700; height: auto; inset-inline-start: 5px; line-height: normal;
  padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto;
  z-index: 100000;
}

/* ============================================
   HEADER
   ============================================ */

#hdr {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hh);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: background .25s, border-color .25s;
}
#hdr.scrolled { box-shadow: var(--sh-sm); }

.hdr-in {
  max-width: 1160px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; gap: 8px;
}

/* Logo */
.hdr-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.hdr-logo img { height: 48px; width: auto; max-height: 48px; }

/* Nav desktop */
.hdr-nav { display: flex; align-items: center; gap: 0; flex: 1; justify-content: center; }
.nav-item { position: relative; }

.nav-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 8px; font-size: 13.5px; font-weight: 500; font-family: var(--font);
  color: var(--t7); background: none; border: none; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; white-space: nowrap; transition: all var(--tr);
}
.nav-btn:hover, .nav-item.open > .nav-btn { color: var(--t9); background: var(--section); }

.chev { width: 11px; height: 11px; flex-shrink: 0; transition: transform var(--tr); color: var(--t4); }
.nav-item.open .chev { transform: rotate(180deg); }

/* Dropdowns
   Les menus s'ouvrent au clic (Technologie, Secteurs, Fonctionnalites). Jusqu'au
   27 septembre 2026 le panneau avait exactement la meme transformation ouvert et
   ferme : il ne restait qu'un fondu, l'ouverture ne se voyait pas. Il descend
   maintenant depuis le bouton, avec un ressort court (easing 0.16,1,0.3,1) et un
   leger agrandissement. La visibilite est retardee a la fermeture, sinon le
   panneau disparait d'un coup et la sortie ne se voit pas non plus. */
.drop {
  position: absolute; top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(-9px) scale(.975); transform-origin: top center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 10px; min-width: 250px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease, transform .18s ease, visibility 0s linear .18s;
  box-shadow: var(--sh-lg);
}
.drop::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; background: transparent; }
.nav-item.open .drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: opacity .18s ease, transform .38s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}

/* Le contenu arrive juste apres le panneau, ligne par ligne. En animation et non
   en transition : une animation rejoue a chaque ouverture, une transition non. */
@keyframes drop-entree {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}
.nav-item.open .drop > .drop-lbl,
.nav-item.open .drop > .drop-item { animation: drop-entree .3s cubic-bezier(.16, 1, .3, 1) backwards; }
.nav-item.open .drop > :nth-child(1)  { animation-delay: .04s; }
.nav-item.open .drop > :nth-child(2)  { animation-delay: .07s; }
.nav-item.open .drop > :nth-child(3)  { animation-delay: .10s; }
.nav-item.open .drop > :nth-child(4)  { animation-delay: .13s; }
.nav-item.open .drop > :nth-child(5)  { animation-delay: .16s; }
.nav-item.open .drop > :nth-child(6)  { animation-delay: .19s; }
.nav-item.open .drop > :nth-child(7)  { animation-delay: .21s; }
.nav-item.open .drop > :nth-child(8)  { animation-delay: .23s; }
.nav-item.open .drop > :nth-child(9)  { animation-delay: .25s; }
.nav-item.open .drop > :nth-child(10) { animation-delay: .27s; }
.nav-item.open .drop > :nth-child(n+11) { animation-delay: .29s; }

.drop.wide { min-width: 408px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; padding: 12px; }

.drop-lbl {
  grid-column: 1 / -1; padding: 6px 10px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--orange); opacity: .85;
}

.drop-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 9px; font-size: 13px; font-weight: 500; font-family: var(--font);
  color: var(--t7); text-decoration: none; border-radius: var(--r-sm); transition: all var(--tr);
}
.drop-item:hover { background: var(--orange-pale); color: var(--t9); }

/* Icône en TUILE — partagée par Fonctionnalités, Technologie & Secteurs (harmonisation) */
.di-svg {
  width: 32px; height: 32px; flex-shrink: 0; padding: 8px; box-sizing: border-box;
  background: var(--section); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--orange); transition: all var(--tr);
}
.drop-item:hover .di-svg { background: var(--orange); border-color: var(--orange); color: #fff; }

/* ── MÉGA-MENU FONCTIONNALITÉS (icônes + carte, scalable jusqu'à 200 entrées) ── */
.drop.mega {
  position: fixed; top: calc(var(--hh) + 6px); left: 50%; right: auto;
  transform: translateX(-50%) translateY(-11px) scale(.985); transform-origin: top center;
  width: min(1180px, calc(100vw - 32px)); min-width: 0;
  padding: 24px; border-radius: var(--r-xl);
  max-height: min(78vh, 600px); overflow-y: auto;
  display: grid; grid-template-columns: 1fr 224px; gap: 0 22px; align-items: start;
}
.nav-item.open .drop.mega { transform: translateX(-50%) translateY(0) scale(1); }

/* Le grand panneau ne peut pas faire arriver ses 190 entrees une par une : ce
   sont ses quatre blocs qui entrent l'un apres l'autre, de gauche a droite, le
   rail des categories d'abord, puis la grille, l'apercu et le pied. Les entrees
   de la categorie affichee suivent, deux par deux, brievement.
   Les 15 autres categories sont en display:none, elles ne s'animent pas. Quand
   on change de categorie, le panneau passe de none a block : la cascade rejoue
   toute seule, et ce clignement dit que le contenu a change. */
@keyframes mega-bloc {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mega-entree {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.nav-item.open .drop.mega > .mega-rail,
.nav-item.open .drop.mega > .mega-panels,
.nav-item.open .drop.mega > .mega-preview,
.nav-item.open .drop.mega > .mega-foot { animation: mega-bloc .34s cubic-bezier(.16, 1, .3, 1) backwards; }
.nav-item.open .drop.mega > .mega-rail { animation-delay: .04s; }
.nav-item.open .drop.mega > .mega-panels { animation-delay: .09s; }
.nav-item.open .drop.mega > .mega-preview { animation-delay: .14s; }
.nav-item.open .drop.mega > .mega-foot { animation-delay: .19s; }

.nav-item.open .drop.mega .mega-panel.active .mega-item { animation: mega-entree .24s cubic-bezier(.16, 1, .3, 1) backwards; }
.nav-item.open .drop.mega .mega-panel.active .mega-item:nth-child(-n+2) { animation-delay: .13s; }
.nav-item.open .drop.mega .mega-panel.active .mega-item:nth-child(n+3) { animation-delay: .16s; }
.nav-item.open .drop.mega .mega-panel.active .mega-item:nth-child(n+5) { animation-delay: .19s; }
.nav-item.open .drop.mega .mega-panel.active .mega-item:nth-child(n+7) { animation-delay: .22s; }
.nav-item.open .drop.mega .mega-panel.active .mega-item:nth-child(n+9) { animation-delay: .25s; }
.mega-viewport { overflow: hidden; min-width: 0; }
.mega-track { display: flex; transition: transform .35s ease; will-change: transform; }
.mega-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-content: start; min-width: 0; }
.mega-pager { display: inline-flex; align-items: center; gap: 8px; }
.mega-prev, .mega-next { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--card); border-radius: var(--r-sm); color: var(--t7); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; transition: all var(--tr); }
.mega-prev:hover, .mega-next:hover { border-color: var(--orange); color: var(--orange); }
.mega-prev:disabled, .mega-next:disabled { opacity: .35; cursor: default; }
.mega-count { font-size: 12px; color: var(--t5); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.mega-col { min-width: 0; }
.mega-col .drop-lbl { padding: 2px 9px 8px; margin-bottom: 6px; opacity: .9; border-bottom: 1px solid var(--border); }
.mega-item { line-height: 1.3; }

/* Aperçu dynamique de la fonctionnalité survolée (rail droit) */
.mega-preview { background: var(--section); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; }
.mp-viz { height: 100px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--border); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; color: var(--orange); }
.mp-viz .di-svg { width: 60px; height: 60px; padding: 15px; border-radius: var(--r); background: var(--orange-pale); border-color: var(--orange-border); color: var(--orange); }
.mp-cat { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); opacity: .85; margin-bottom: 4px; }
.mp-h { font-size: 15px; font-weight: 700; color: var(--t9); }
.mp-s { font-size: 12.5px; color: var(--t5); line-height: 1.5; margin: 6px 0 14px; }
.mp-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--orange); text-decoration: none; transition: color var(--tr); }
.mp-link:hover { color: var(--orange-d); }

.mega-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.mega-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--orange); text-decoration: none; transition: color var(--tr); }
.mega-all:hover { color: var(--orange-d); }
.mega-tag { font-size: 12px; color: var(--t5); font-family: 'JetBrains Mono', ui-monospace, monospace; }
@media (max-width: 1240px) {
  .drop.mega { grid-template-columns: 1fr; }
  .mega-preview { display: none; }
  .mega-page { grid-template-columns: repeat(3, 1fr); }
}

/* labels de catégorie (menu mobile) */
.mob-cat { padding: 10px 11px 3px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); opacity: .8; }

/* Zone droite */
.hdr-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Bouton thème */
.theme-btn {
  width: 32px; height: 32px; background: var(--section);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--tr); color: var(--t5);
}
.theme-btn:hover { border-color: var(--border-s); color: var(--t9); }
.theme-btn svg { width: 15px; height: 15px; }
.icon-moon, .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"]  .icon-sun  { display: block; }

/* CTA */
.hdr-cta {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 17px; background: var(--orange); color: white;
  font-size: 13px; font-weight: 600; font-family: var(--font);
  border-radius: var(--r-sm); text-decoration: none;
  transition: all var(--tr); border: none; cursor: pointer;
}
.hdr-cta::after { content: '→'; font-size: 14px; line-height: 1; transition: transform var(--tr); }
.hdr-cta:hover { background: var(--orange-d); }
.hdr-cta:hover::after { transform: translateX(2px); }

/* Bouton « Produit » (preprod uniquement) : secondaire, il ne doit pas
   concurrencer le CTA orange. Tout en variables du theme, donc clair et
   sombre suivent sans regle supplementaire. */
.hdr-produit {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: transparent; color: var(--orange-txt);
  font-size: 13px; font-weight: 600; font-family: var(--font);
  border: 1px solid var(--orange); border-radius: var(--r-sm);
  text-decoration: none; transition: all var(--tr); cursor: pointer;
}
.hdr-produit::after { content: '→'; font-size: 14px; line-height: 1; transition: transform var(--tr); }
.hdr-produit:hover { background: var(--orange); color: #fff; }
.hdr-produit:hover::after { transform: translateX(2px); }
.mob-produit {
  display: block; text-align: center; margin-top: 18px; padding: 11px 12px;
  background: transparent; color: var(--orange-txt); font-size: 14px; font-weight: 600;
  font-family: var(--font); border: 1px solid var(--orange);
  border-radius: var(--r-sm); text-decoration: none;
}
/* La fleche en ::after plutot que dans le libelle : les 4 traductions
   restent propres et il n y a rien a maintenir en double. */
.mob-produit::after { content: ' →'; }
.mob-produit + .mob-cta { margin-top: 8px; }

/* Espace client : icone de compte a cote du theme, meme gabarit (32px). Le libelle reste lu
   par les lecteurs d'ecran et s'affiche en infobulle : l'en-tete n'a pas la place d'un bouton de plus. */
.hdr-client {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0; color: var(--t5);
  background: var(--section); border: 1px solid var(--border); border-radius: var(--r-sm);
  text-decoration: none; transition: all var(--tr);
}
.hdr-client svg { width: 15px; height: 15px; }
.hdr-client:hover { border-color: var(--border-s); color: var(--t9); }
.hdr-client-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mob-client {
  display: block; text-align: center; margin-top: 18px; padding: 11px 12px;
  background: var(--card); color: var(--t9); font-size: 14px; font-weight: 600;
  font-family: var(--font); border: 1px solid var(--border-s);
  border-radius: var(--r-sm); text-decoration: none;
}
.mob-client + .mob-produit, .mob-client + .mob-cta { margin-top: 8px; }

/* Burger mobile */
.burger { display: none; flex-direction: column; gap: 4px; cursor: pointer; padding: 7px; background: none; border: none; }
.burger span { display: block; width: 19px; height: 1.5px; background: var(--t7); border-radius: 2px; }

/* Menu mobile */
.mob-menu {
  display: none; position: fixed; top: var(--hh); left: 0; right: 0; bottom: 0;
  background: var(--card); padding: 16px 20px; overflow-y: auto; z-index: 999;
  border-top: 1px solid var(--border);
}
.mob-menu.open { display: block; }

.mob-lnk {
  display: block; padding: 10px 11px; font-size: 14.5px; font-weight: 500; font-family: var(--font);
  color: var(--t7); text-decoration: none; border-radius: var(--r-sm); margin-bottom: 2px;
  transition: all var(--tr); cursor: pointer; background: none; border: none; width: 100%; text-align: start;
}
.mob-lnk:hover { background: var(--section); color: var(--t9); }

.mob-sub { padding-inline-start: 10px; display: none; margin-bottom: 6px; }
.mob-sub.open { display: block; }
.mob-sub a {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; font-size: 13px; font-weight: 500; font-family: var(--font);
  color: var(--t5); text-decoration: none; border-radius: var(--r-xs); transition: all var(--tr);
}
.mob-sub a:hover { color: var(--orange); background: var(--orange-pale); }

.mob-cta {
  display: block; text-align: center; margin-top: 18px; padding: 12px;
  background: var(--orange); color: white; font-size: 14px; font-weight: 600;
  font-family: var(--font); border-radius: var(--r-sm); text-decoration: none;
}

/* ── RESPIRATION DE LA BARRE (27 septembre 2026) ──
   Mesure avant retouche, a 1181, 1280, 1440 et 1600px : la place libre dans
   .hdr-in tombait a 4px en francais et a -5px en espagnol, ou les blocs se
   touchaient deja. La barre etait plafonnee a 1160px, donc elargir l'ecran
   n'aidait pas. Elle passe a 1340px, et la place gagnee est depensee en ecarts
   qui grandissent avec l'ecran (clamp) : jamais de debordement dans une langue
   plus bavarde, et de l'air des qu'il y en a. */
@media (min-width: 1241px) {
  .hdr-in { max-width: 1340px; gap: clamp(10px, 0.9vw, 20px); }
  .hdr-nav { gap: clamp(2px, 0.35vw, 8px); }
  .nav-btn { padding: 8px clamp(9px, 0.85vw, 14px); }
  .hdr-right { gap: clamp(7px, 0.65vw, 12px); }
  /* L'ecart du selecteur de langue vient du gap comme pour les autres :
     sa marge propre ferait un ecart en double. */
  .hdr-right .lang-drop { margin-inline-end: 0; }
}

/* ── RESPONSIVE ── */
/* Menu burger jusqu'a 1240px : entre 961 et 1180px, l'en-tete complet ne tenait pas
   et « Demandez une Démo » sortait de l'ecran (mesure du 15 septembre 2026, avant l'espace client).
   Seuil remonte a 1240px le 27 septembre 2026 : entre 1181 et 1240px, la barre
   espacee se retoucherait en espagnol. Le tiroir burger y est plus lisible
   qu'une rangee compressee. */
@media (max-width: 1240px) {
  .hdr-nav, .hdr-cta, .hdr-produit { display: none; }
  .burger { display: flex; }
}
@media (max-width: 600px) {
  .hdr-in, .wrap { padding: 0 20px; }
}

/* ============================================
   FOOTER
   ============================================ */

#ftr {
  font-family: var(--font, 'Inter', sans-serif);
  background: #0F172A;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 56px 0 0;
}

.ftr-in { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.ftr-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ftr-brand .ftr-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; margin-bottom: 14px; }
.ftr-brand .ftr-logo img { height: 28px; width: auto; max-height: 28px; }
.ftr-tagline { font-size: 13px; color: #4B5563; line-height: 1.7; max-width: 240px; }

.ftr-col h3 {
  font-size: 10px; font-weight: 700; color: #6B7280;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 14px;
}
.ftr-col ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ftr-col ul li a { font-size: 13px; color: #4B5563; text-decoration: none; transition: color .16s; }
.ftr-col ul li a:hover { color: #F97316; }

.ftr-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; flex-wrap: wrap; gap: 12px;
}
.ftr-copy { font-size: 12px; color: #374151; }
.ftr-links { display: flex; gap: 16px; }
.ftr-links a { font-size: 12px; color: #374151; text-decoration: none; transition: color .16s; }
.ftr-links a:hover { color: #F97316; }

@media (max-width: 900px) {
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ftr-top { grid-template-columns: 1fr; }
  .ftr-in { padding: 0 20px; }
  .ftr-bottom { flex-direction: column; text-align: center; }
}

/* ============================================
   CONTENU (base pour les pages)
   ============================================ */

.site-main {
  padding: 40px 0;
}

.entry-content,
.page-content {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 600px) {
  .entry-content,
  .page-content {
    padding: 0 20px;
  }
}

/* ── MOUVEMENT REDUIT ──
   Reglage systeme « reduire les animations » : les menus apparaissent en fondu,
   sans deplacement ni cascade. Le contenu reste strictement le meme. */
@media (prefers-reduced-motion: reduce) {
  .drop, .drop.mega { transform: translateX(-50%); transition: opacity .12s ease, visibility 0s linear .12s; }
  .nav-item.open .drop, .nav-item.open .drop.mega { transform: translateX(-50%); transition: opacity .12s ease, visibility 0s; }
  .nav-item.open .drop > .drop-lbl,
  .nav-item.open .drop > .drop-item,
  .nav-item.open .drop.mega > .mega-rail,
  .nav-item.open .drop.mega > .mega-panels,
  .nav-item.open .drop.mega > .mega-preview,
  .nav-item.open .drop.mega > .mega-foot,
  .nav-item.open .drop.mega .mega-panel.active .mega-item { animation: none; }
}