/* ==========================================================================
   Adaptations : tablette puis mobile. Les animations lourdes s'allègent.
   ========================================================================== */

@media(max-width:1100px){
  :root{--hdr:76px}
  .a-hero__montre{width:min(78%,420px)}
}

/* ----- Tablette ----- */
@media(max-width:1024px){
  .a-savoir__media img{transform:scale(1.1)!important}
  .a-histoire__img img{transform:scale(1.04)!important}
  .a-carte:hover{transform:none}
}

/* ----- Mobile ----- */
@media(max-width:900px){
  :root{--hdr:68px}
  .a-nav{display:none}
  .a-burger{display:block;order:-1}
  .a-logo{margin-inline:auto}
  .a-hdr__actions{margin-left:0}
  .a-hdr__in{gap:8px}
  .a-produit__haut{grid-template-columns:1fr}
  .a-grille{grid-template-columns:repeat(2,1fr);gap:12px}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .a-carte__corps{padding:16px 16px 20px}
  .a-carte__nom{font-size:17px}
  .a-carte__cta{width:100%;justify-content:center;padding:12px 14px;font-size:9.5px}
  .a-carrousel__item{flex:0 0 74vw}
  .a-carrousel__nav{display:none}
  .a-carrousel__item{opacity:1;transform:none}
  .a-vignette{width:66px;height:66px}
  .woocommerce div.product form.cart{flex-direction:column}
  .woocommerce div.product form.cart .quantity,
  .woocommerce div.product form.cart .single_add_to_cart_button{width:100%;min-width:0}
  /* Le tableau du panier devient une pile de cartes */
  .woocommerce-cart table.shop_table_responsive tr{display:block;border:1px solid var(--encre);
    margin-bottom:14px;padding:10px}
  .woocommerce-cart table.shop_table_responsive thead{display:none}
  .woocommerce-cart table.shop_table_responsive td{display:block;width:100%;border:0;padding:8px 6px}
  .woocommerce-cart table.shop_table_responsive td::before{
    font-size:10px;letter-spacing:var(--ls-mini);text-transform:uppercase;color:rgba(14,14,14,.6)}
}

@media(max-width:520px){
  .a-grille,.woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important}
  .a-hero h1{font-size:clamp(34px,10vw,52px)}
  .a-hero__cta{flex-direction:column;align-items:stretch}
  .a-hero__cta .a-btn{width:100%}
}

/* ----- Mouvement réduit : on calme, on ne fige pas ----- */

/* ==========================================================================
   MOUVEMENT RÉDUIT — mode « calme », pas « figé »
   --------------------------------------------------------------------------
   Opera GX et Windows proposent de désactiver les animations. Le navigateur
   annonce alors prefers-reduced-motion: reduce. La plupart des sites coupent
   tout : la page paraît alors cassée, rien n'apparaît.
   Ici on retire les DÉPLACEMENTS mais on garde les FONDUS, et surtout on
   n'annule jamais l'état final : aucun contenu ne peut rester invisible.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  /* Les animations restent, mais très courtes : l'état final est atteint. */
  *,*::before,*::after{
    animation-duration:.2s!important;
    animation-iteration-count:1!important;
    transition-duration:.2s!important;
    scroll-behavior:auto!important}

  /* Aucun déplacement, aucune rotation, aucune mise à l'échelle. */
  .a-reveal,.a-reveal.est-vu,
  .a-def__plan .a-def__octo,.a-def__visuel img,.a-def__titre span,
  .a-def__kicker,.a-def__modele,
  .a-seq__octo,.a-seq__plan img,
  .a-hero__montre,.a-hero__halo,
  .a-hero .a-label,.a-hero h1,.a-hero__st,.a-hero__cta,
  .a-savoir__media img,.a-histoire__img img,.a-video__media,
  .a-carte,.a-btn,.a-icone,.a-avis blockquote{
    transform:none!important}

  /* L'opacité finale est forcée : rien ne reste masqué. */
  .a-reveal,.a-def__titre span,.a-def__kicker,.a-def__modele,
  .a-def__visuel img,.a-def__octo,
  .a-hero .a-label,.a-hero h1,.a-hero__st,.a-hero__cta,.a-hero__montre,.a-hero__halo,
  .a-seq__plan.est-actif img,.a-seq__plan.est-actif .a-seq__octo,
  .a-seq__plan.est-actif .a-seq__nom{
    opacity:1!important}

  /* Le bandeau défilant s'arrête, mais reste lisible. */
  /* Le bandeau continue de tourner, mais trois fois plus lentement :
     l'information reste lisible sans mouvement agressif. */
  .a-ticker__piste{animation-duration:110s!important}

  /* Les ombres décalées restent : c'est du graphisme, pas du mouvement. */
  .a-carte:hover,.a-btn:hover,.a-avis blockquote:hover{box-shadow:none!important}

  /* Le défilé automatique est coupé côté JavaScript ; la barre reste utile. */
  .a-def__progres i{transition:none!important}
  .a-hero__scroll,.a-loader{display:none!important}
}

/* Même garantie si le JavaScript ne tourne pas du tout. */
html:not(.a-js) .a-reveal,
html:not(.a-js) .a-def__plan,
html:not(.a-js) .a-def__titre span,
html:not(.a-js) .a-def__kicker,
html:not(.a-js) .a-def__modele,
html:not(.a-js) .a-def__visuel img,
html:not(.a-js) .a-def__octo{opacity:1!important;transform:none!important;visibility:visible!important}
html:not(.a-js) .a-def__plan{position:relative}
html:not(.a-js) .a-loader{display:none}
html:not(.a-js) body{overflow:auto!important}

/* ==========================================================================
   Filet de sécurité d'affichage
   Si le JavaScript ne s'exécute pas — extension, mode économie, blocage —
   aucun contenu ne doit rester invisible. La classe .js-actif est posée par
   le script : sans elle, tout s'affiche normalement.
   ========================================================================== */
html:not(.js-actif) .a-reveal,
html:not(.js-actif) [data-reveal],
html:not(.js-actif) .rise{opacity:1!important;transform:none!important}
html:not(.js-actif) .a-bd__plan{position:relative;opacity:1;visibility:visible}
html:not(.js-actif) .a-bd__plan ~ .a-bd__plan{display:none}
html:not(.js-actif) .a-bd__label,
html:not(.js-actif) .a-bd__titre,
html:not(.js-actif) .a-bd__ligne,
html:not(.js-actif) .a-bd__cta,
html:not(.js-actif) .a-bd__visuel img{opacity:1!important;transform:none!important;animation:none!important}
html:not(.js-actif) .a-seq__plan{opacity:1;visibility:visible}
html:not(.js-actif) .a-seq__plan ~ .a-seq__plan{display:none}
html:not(.js-actif) .a-loader{display:none}
html:not(.js-actif) body{overflow:auto}

/* Sans JavaScript, le contenu s'affiche et le voile disparaît. */
html:not(.js-actif) .a-hdr,
html:not(.js-actif) .a-bd,
html:not(.js-actif) .a-boutique,
html:not(.js-actif) .a-produit,
html:not(.js-actif) .a-page{opacity:1!important;transform:none!important}

/* ==========================================================================
   Débordement horizontal — la bande blanche sur mobile
   Une seule ligne trop large suffit à élargir la page : les fonds de section
   s'arrêtent alors avant le bord de l'écran. On verrouille la largeur à la
   racine, et on autorise les enfants de grille à se réduire.
   ========================================================================== */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;max-width:100%;position:relative}

/* Par défaut, un enfant de grille ou de flex refuse de passer sous sa taille
   de contenu : un titre long élargit alors toute la page. */
.a-bd__plan > *,
.a-vedette > *,
.a-histoire > *,
.a-det__grille > *,
.a-grille > *,
.a-tete > *{min-width:0}

/* Les très longs mots des titres ne doivent jamais pousser la mise en page. */
.a-bd__titre,.a-tete h2,.a-savoir h2,.a-final h2,
.a-det__bloc h3,.a-carte__nom{overflow-wrap:anywhere}

/* Le numéro de plan est décoratif : il ne doit pas créer de largeur. */
.a-bd__numero{max-width:100%;pointer-events:none}

@media(max-width:900px){
  /* Sur petit écran, la scène suit le contenu plutôt qu'une hauteur fixe. */
  .a-bd,.a-ticker,.a-savoir,.a-final,.a-pied{max-width:100%}
  .a-bd__plan{padding-inline:var(--gouttiere)}
  .a-savoir__media{inset:0}
}