@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&display=swap');

/* sds.css — feuille de style du thème SDS. À créer comme asset dans l'éditeur de thème. */
body { margin: 0; background: #FFFFFF; color: #101418; font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
.sds-page a, .sds-header a, .sds-footer a { color: #0B5A6B; }
.sds-page a:hover, .sds-header a:hover, .sds-footer a:hover { color: #101418; }
.display { letter-spacing: -0.02em; }
@keyframes flotA { 0%, 100% { transform: rotate(-2.4deg) translateY(0) } 50% { transform: rotate(-2.4deg) translateY(-15px) } }
@keyframes flotC { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
@keyframes onde { 0%, 100% { transform: scaleY(0.44) } 50% { transform: scaleY(1) } }
.flot-a { animation: flotA 9s ease-in-out infinite; }
.flot-c { animation: flotC 7.5s ease-in-out 0.4s infinite; }
.pulse { animation: pulse 2.4s ease-in-out infinite; }
.barre { transform-origin: bottom center; animation: onde 2.8s ease-in-out infinite; }
.b1 { animation-delay: 0s; }
.b2 { animation-delay: 0.14s; }
.b3 { animation-delay: 0.28s; }
.b4 { animation-delay: 0.42s; }
.b5 { animation-delay: 0.56s; }
.b6 { animation-delay: 0.7s; }
.b7 { animation-delay: 0.84s; }
.b8 { animation-delay: 0.98s; }
.b9 { animation-delay: 1.12s; }
@media (prefers-reduced-motion: reduce) { .flot-a, .flot-c, .pulse, .barre { animation: none } }
.tx-grille { background-image: url(https://cdn.kreezalid.com/kreezalid/564513/files/1006768/sds_texture_grille.svg); background-size: 26px 26px; background-repeat: repeat; }
.tx-topo { background-image: url(https://cdn.kreezalid.com/kreezalid/564513/files/1006768/sds_texture_topo.svg); background-size: cover; background-position: center; background-repeat: no-repeat; }

.sds-logo img{
  height: 42px;
}
/* ───── Ossature de page ───── */
.sds-page { width: 100%; max-width: 100%; }
.sds-page > .sds-sec { width: 100%; }
.sds-sec { height: auto !important; }
.sds-pt { padding-top: 88px; }
.sds-pb { padding-bottom: 88px; }
.sds-stage { height: var(--sds-stage, 420px); }
.sds-g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sds-g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sds-g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sds-g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sds-g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sds-g-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sds-gx { grid-template-columns: var(--sds-cols, 1fr); }
.sds-sp-2 { grid-column: span 2; }
.sds-sp-3 { grid-column: span 3; }
.sds-sp-4 { grid-column: span 4; }
.sds-sp-5 { grid-column: span 5; }
.sds-sp-7 { grid-column: span 7; }

/* ───── Sous 1100 px : la navigation passe au bouton, les sections s'empilent ───── */
@media (max-width: 1100px) {
  .sds-page > .sds-sec { padding-left: 32px !important; padding-right: 32px !important; }
  .sds-pt { padding-top: 64px; }
  .sds-pb { padding-bottom: 64px; }
  .sds-page > .sds-sec { flex-direction: column !important; align-items: stretch !important; gap: 36px !important; }
  .sds-page > .sds-sec > .sds-col { width: auto !important; max-width: 100% !important; }
  .sds-row { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; }
  .sds-row > * { width: auto !important; max-width: 100% !important; }
  .sds-g-4, .sds-g-5, .sds-g-6, .sds-g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sds-g-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sds-g-12 > * { grid-column: span 6 !important; grid-row: span 1 !important; }
  .sds-g { grid-auto-rows: auto !important; }
  .sds-g > * { min-height: 0 !important; }
  .sds-g > * > img, .sds-g > * > div > img { height: 240px !important; }
  .sds-stage { height: auto !important; min-height: 520px; }
  .sds-page > .sds-sec { overflow: hidden !important; }
}

/* ───── Sous 760 px ───── */
@media (max-width: 760px) {
  .sds-page > .sds-sec { padding-left: 20px !important; padding-right: 20px !important; gap: 26px !important; }
  .sds-pt { padding-top: 48px; }
  .sds-pb { padding-bottom: 48px; }
  .sds-g, .sds-g-2, .sds-g-3, .sds-g-4, .sds-g-5, .sds-g-6, .sds-g-12 { grid-template-columns: 1fr !important; }
  .sds-g > *, .sds-g-12 > * { grid-column: span 1 !important; }
  .sds-deco { display: none !important; }

  /* Les scènes du hero : les cartes flottantes passent en pile verticale. */
  .sds-stage { position: relative !important; display: flex !important; flex-direction: column !important;
               gap: 14px !important; height: auto !important; min-height: 0 !important; }
  .sds-stage > * { position: static !important; inset: auto !important; width: 100% !important;
                   max-width: 100% !important; transform: none !important; animation: none !important;
                   box-shadow: 0 14px 30px -18px rgba(16,20,24,0.3) !important; }
  .sds-stage > [aria-hidden="true"] { display: none !important; }
  .sds-stage img { height: auto !important; }
  .sds-rail { position: static !important; inset: auto !important; flex-direction: row !important;
              width: auto !important; border-radius: 18px !important; overflow: hidden; }
  .sds-rail > a, .sds-rail a { padding: 16px 6px !important; border-bottom: none !important; }
  .sds-rail > a + a { border-left: 1px solid rgba(16,20,24,0.14) !important; }
  .sds-rail .display { writing-mode: horizontal-tb !important; transform: none !important;
                       font-size: 13px !important; white-space: normal !important; text-align: center; }
  h1 { font-size: 34px !important; line-height: 1.08 !important; }
  h2 { font-size: 27px !important; line-height: 1.12 !important; }
  h3 { font-size: 20px !important; }
  .sds-page p { font-size: 15.5px !important; }
  .sds-page a[href], .sds-page button { min-height: 44px; }
  .sds-page img { max-width: 100%; }
  .sds-page > .sds-sec > .sds-col { flex-wrap: wrap !important; row-gap: 12px !important; }
}

/* ───── En-tête et pied de page du thème ───── */
.sds-header .sds-nav-principale ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: 2px; }
.sds-header .sds-nav-principale li { position: relative; }
.sds-header .sds-nav-principale a { display: flex; align-items: center; gap: 6px; padding: 11px 13px; border-radius: 10px;
  font-size: 15px; font-weight: 600; text-decoration: none; color: #101418; }
.sds-header .sds-nav-principale a:hover,
.sds-header .sds-nav-principale li.active > a { background: #DCF1F7; color: #0B5A6B; }
.sds-header .sds-recherche input { height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid #DCE3E7;
  background: #F7FAFB; font-family: inherit; font-size: 14px; }
.sds-footer-haut { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.sds-footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sds-footer-col a { font-size: 14.5px; color: #4A545C; text-decoration: none; }
.sds-footer-col a:hover { color: #101418; }
.sds-menu-bas ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 18px; }
.sds-menu-bas a { font-size: 13px; color: #6B747C; text-decoration: none; }
.sds-menu-bas a:hover { color: #101418; }

@media (max-width: 1100px) {
  .sds-footer-haut { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .sds-header { flex-wrap: wrap; padding: 14px 32px !important; }
  .sds-burger { display: flex !important; }
  .sds-nav { display: none !important; width: 100%; flex-direction: column !important; align-items: stretch !important;
             gap: 14px !important; padding: 18px 0 8px; }
  .sds-nav.sds-nav-ouvert { display: flex !important; }
  .sds-header .sds-nav-principale { flex-direction: column !important; align-items: stretch !important; }
  .sds-header .sds-nav-principale ul,
  .sds-header .sds-nav-statique { flex-direction: column !important; align-items: stretch !important; }
  .sds-header .sds-nav-principale a { padding: 14px 13px; border-radius: 12px; background: #F7FAFB; }
}

@media (max-width: 760px) {
  .sds-header { padding: 14px 20px !important; }
  .sds-footer-haut { grid-template-columns: 1fr !important; }
  .sds-footer-bas { flex-direction: column; align-items: flex-start; padding-bottom: 24px; }
}