.storefront {
            font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
        }
        
        :root {
            /* Theme defaults */
            --font-size-base: 16px;
            --text-color-primary: #0f172a;
            --text-color-secondary: #4b5563;
            --text-color-tertiary: #6b7280;
            --page-default-spacing: 24px;

            /* Website palette */
            --theme-color-50: #acfbff4d;
--theme-color-100: #9feeff80;
--theme-color-200: #85d4f3b3;
--theme-color-300: #6bbbd9;
--theme-color-400: #51a3c0;
--theme-color-500: #348ba8;
--theme-color-600: #0d7490;
--theme-color-700: #005e79;
--theme-color-800: #004862;
--theme-color-900: #00344d;
        }
        
/* Custom CSS */
/* Vague 3 audit, case 1 (10/10/2026) : accent chaud sur les boutons pleins des sections. Bannière cookies non concernée. */
section .storefront-customer-account-button[data-variant=theme],
section .storefront-customer-account-button[data-variant=theme]::before,
section .storefront-button-plain{background-color:#C2532B!important;border-color:#C2532B!important;color:#fff!important}
section .storefront-customer-account-button[data-variant=theme]:hover::before,
section .storefront-button-plain:hover{background-color:#A8441F!important}

/* Vague 3, case 2, palier 1 (10/10/2026) : kickers et hiérarchie des titres */
.storefront-section-header-label,.storefront-split-hero-label,.storefront-feature-highlight-label{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;font-weight:700;color:var(--theme-color-600)}
.storefront-section-banner-title{font-size:clamp(1.75rem,3vw,2rem);letter-spacing:-.02em;line-height:1.15}
.storefront-section-header-title,.storefront-split-hero-title{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.01em;line-height:1.2;font-weight:700}
.storefront-feature-highlight-title{font-weight:700}

/* Vague 3, case 2, palier 2 (10/10/2026) : cartes et boutons */
.storefront-section-header:has(.storefront-section-header-label)>div>.storefront-section-header-title{font-size:clamp(1.6rem,3vw,2.2rem)}
.storefront-split-hero-image,.storefront-feature-highlight-image{border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,52,77,.12);transition:transform .3s ease,box-shadow .3s ease}
.storefront-split-hero:hover .storefront-split-hero-image{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,52,77,.18)}
.storefront-button,section .storefront-customer-account-button,section .storefront-customer-account-button::before{border-radius:999px}
.storefront-button,section .storefront-customer-account-button{font-weight:600;transition:transform .15s ease,box-shadow .15s ease}
.storefront-button:hover,section .storefront-customer-account-button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18)}

/* Vague 3, case 2, palier 3 (10/10/2026) : fonds alternés par groupe (chiffres, différence, dernier appel), FAQ en cartes */
.storefront-section-header:has(+ .storefront-section-basic .storefront-grid-container .storefront-heading),
.storefront-section-header:has(+ .storefront-section-basic .storefront-feature-highlight){background:var(--theme-color-50);padding-top:40px;box-shadow:0 32px 0 var(--theme-color-50)}
.storefront-section-basic:has(.storefront-grid-container .storefront-heading),
.storefront-section-basic:has(.storefront-feature-highlight),
.storefront-section-basic:has(.storefront-customer-account-button):not(:has(.storefront-faq,.storefront-grid-container)){background:var(--theme-color-50);padding-top:24px;padding-bottom:40px}
.storefront-faq-item{border:1px solid var(--theme-color-100);border-radius:12px;margin-bottom:8px;padding:16px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Vague 3, case 2, palier 4 (10/10/2026) : apparition au défilement, CSS pur (navigateurs récents ; ailleurs, pas d'animation) */
@keyframes tt-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){.storefront-split-hero,.storefront-feature-highlight{animation:tt-fade linear both;animation-timeline:view();animation-range:entry 0% entry 35%}}
.storefront-section-banner-container{animation:tt-fade .6s ease-out both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ===== Vague 4 site-premium (16/10/2026) : 6 points CSS validés par Nico, zéro JS ===== */

/* Point 6 : bouton secondaire du hero lisible (fond blanc plein, texte bleu Lagune foncé) */
.storefront-section-banner .storefront-button-blurred{background:#fff!important;color:var(--theme-color-800)!important;border:1px solid #fff!important;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Point 6 (suite) : bouton principal du hero à la même taille que le secondaire (43 px, cible tactile correcte) */
.storefront-section-banner .storefront-customer-account-button{font-size:1rem;padding:.52rem 1.2rem}
.storefront-section-banner .storefront-button-blurred:hover{background:linear-gradient(var(--theme-color-50),var(--theme-color-50)),#fff!important}

/* Point 3 (socle) : la bannière devient un repère de position pour la vague et le zoom */
.storefront-section-banner{position:relative;overflow:hidden;isolation:isolate}
.storefront-section-banner-container{position:relative;z-index:2}

/* Point 3 : vague discrète en bas du hero, couleur du fond de page */
.storefront-section-banner::after{content:"";position:absolute;left:0;bottom:-1px;width:200%;height:28px;z-index:1;pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C75 2 150 2 225 14 S375 26 450 14 S525 2 600 14 V28 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x 0 0/50% 100%}

@media (prefers-reduced-motion:no-preference){

  /* Point 2 : zoom très lent de l'image du hero (copie de l'image en pseudo-élément, l'image d'origine reste peinte pour le LCP) */
  .storefront-section-banner::before{content:"";position:absolute;inset:0;z-index:0;background:inherit;animation:tt-zoom 9s cubic-bezier(.16,1,.3,1) both}
  @keyframes tt-zoom{from{transform:scale(1.08)}to{transform:none}}

  /* Point 2 : entrée en cascade titre puis boutons (remplace le fondu global du 10/10) */
  .storefront-section-banner .storefront-section-banner-container{animation:none}
  .storefront-section-banner-title{animation:tt-rise .8s cubic-bezier(.16,1,.3,1) both}
  .storefront-section-banner-children>*{animation:tt-rise .7s cubic-bezier(.16,1,.3,1) both}
  .storefront-section-banner-children>*:nth-child(1){animation-delay:.25s}
  .storefront-section-banner-children>*:nth-child(2){animation-delay:.38s}
  @keyframes tt-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* Point 3 : la vague ondule lentement (transform seul, pas de repeinte) */
  .storefront-section-banner::after{animation:tt-wave 16s linear infinite}
  @keyframes tt-wave{to{transform:translateX(-50%)}}

  @supports (animation-timeline:view()){

    /* Point 1 : apparition au défilement étendue, en cascade dans les grilles */
    .storefront-section-header>.storefront-container,
    .storefront-grid-container>.storefront-container,
    .storefront-grid-container>.storefront-prose,
    .storefront-faq-item{animation:tt-fade linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    .storefront-grid-container>:nth-child(2),.storefront-faq-item:nth-child(2){animation-range:entry 8% entry 43%}
    .storefront-grid-container>:nth-child(3),.storefront-faq-item:nth-child(3){animation-range:entry 16% entry 51%}
    .storefront-grid-container>:nth-child(n+4),.storefront-faq-item:nth-child(n+4){animation-range:entry 24% entry 59%}

    /* Point 4 : parallax léger des images des split-hero, ordinateur et tablette seulement */
    @media (min-width:768px){
      /* Timeline nommée sur le cadre : le cadre est en overflow:hidden, view() sur l'image resterait figé */
      .storefront-split-hero-image{view-timeline:--tt-img block}
      .storefront-split-hero-image img{animation:tt-parallax linear both;animation-timeline:--tt-img;animation-range:cover}
      @keyframes tt-parallax{from{transform:scale(1.1) translateY(-3%)}to{transform:scale(1.1) translateY(3%)}}
    }
  }

  /* Point 5 : barre de progression de lecture, articles de blog uniquement */
  @supports (animation-timeline:scroll()){
    body.storefront:has(.storefront-blog-article) .storefront-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--theme-color-600);transform-origin:0 50%;animation:tt-progress linear both;animation-timeline:scroll(root)}
    @keyframes tt-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* Accessibilité (16/10/2026, demandé par Nico) : barre du haut en bleu Lagune foncé, contraste suffisant pour le texte blanc (PageSpeed signalait #51a3c0) */
.storefront-topbar{background-color:var(--theme-color-700)!important}