/* ---------- <1440 : largeur fluide + hauteurs naturelles ---------- */
@media (max-width:1439.98px){
  html,body{overflow-x:clip;}
  [data-sc-id="sn-2"],[data-sc-id="sn-43"]{width:100%!important;}
  [data-sc-id="sn-7"]{width:auto!important;}
  .container-1440,.container-1344{width:auto!important;max-width:100%!important;}

  /* hauteurs figées par l'export -> naturelles. Exclusions : les <svg> à sprite
     sans taille intrinsèque (retomberaient à 150px), le décor .fh-art, et les
     boutons/liens dont la hauteur EST le gabarit (sinon ils s'aplatissent à la
     hauteur du texte : mesuré 17px au lieu de 48px). */
  .block-home_hero [data-sc-id]:not(svg):not(a):not(button):not(.fh-art):not(.fh-art *),
  .block-products_main [data-sc-id]:not(svg):not(a):not(button),
  .block-key_results [data-sc-id]:not(svg):not(a):not(button):not(.ellipse_purple){height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:none!important;grid-auto-rows:auto!important;}
  .block-home_hero [data-sc-id]:not(svg):not(.fh-art):not(.fh-art *),
  .block-products_main [data-sc-id]:not(svg),
  .block-key_results [data-sc-id]:not(svg){max-width:100%;}
}

/* ---------- 768-1439 : grilles fluides (le mobile <=767 a ses propres styles) ---------- */
@media (min-width:768px) and (max-width:1439.98px){
  /* barre de nav (>=992 seulement, en dessous c'est le menu burger) */
  [data-sc-id="sn-4"]{width:100%!important;}

  [data-sc-id="gh-35"],[data-sc-id="gh-1098"],[data-sc-id="gh-1100"]{grid-template-columns:repeat(16,minmax(0,1fr))!important;width:auto!important;max-width:100%!important;}
  [data-sc-id="gh-1101"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;width:auto!important;max-width:100%!important;}
  [data-sc-id="hs-166"]{grid-template-columns:minmax(280px,352px) minmax(0,1fr)!important;width:auto!important;max-width:100%!important;}
  [data-sc-id="hs-181"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:auto!important;max-width:100%!important;}
  [data-sc-id="hs-440"][data-sc-id]{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)!important;width:auto!important;max-width:100%!important;}
  [data-sc-id="hs-441"]{width:auto!important;max-width:100%!important;min-width:0!important;}
  [data-sc-id="sr-715"]{grid-template-columns:repeat(3,minmax(0,1fr))!important;width:auto!important;max-width:100%!important;}
  [data-sc-id="mf-569"]{grid-template-columns:repeat(5,minmax(0,1fr))!important;width:auto!important;max-width:100%!important;}

  .block-products_main .cl-card{height:auto!important;min-height:0!important;}
  .block-key_results [data-sc-id]:not(svg):not(.ellipse_purple):not(.picto_squared):not(.arrow_button){width:auto!important;}
}

/* <1200 : les colonnes de texte centrées perdent leurs marges dimensionnées pour 1440 */
@media (max-width:1199.98px){
  [data-sc-id="sr-709"],[data-sc-id="sr-818"]{margin-left:0!important;margin-right:0!important;align-self:stretch!important;}
}
/* ---------- petits écrans : largeurs figées à 390px par l'export ----------
   L'export a cuit une variante « mobile » à exactement 390 px de large. En dessous
   (iPhone SE, Android compacts : 320-375 px) le contenu débordait — le bouton du
   menu se retrouvait hors écran, donc inatteignable. */
@media (max-width:859.98px){
  .block-main_nav [data-sc-id],
  .block-home_hero [data-sc-id]:not(svg):not(.fh-art):not(.fh-art *),
  .block-products_main [data-sc-id]:not(svg),
  .block-key_results [data-sc-id]:not(svg):not(.picto_squared):not(.arrow_button),
  .block-site_footer [data-sc-id]{max-width:100%!important;}
  .block-main_nav [data-sc-id]:not(img):not(svg),
  .block-home_hero div[data-sc-id]:not(.fh-art):not(.fh-art *),
  .block-key_results div[data-sc-id]{width:auto!important;}
  /* la barre de nav reste pleine largeur : c'est elle qui pousse le bouton du menu
     contre le bord droit. L'attribut est répété pour passer devant la règle
     width:auto ci-dessus, qui est plus spécifique à cause des :not(). */
  .block-main_nav [data-sc-id="sn-2"][data-sc-id],
  .block-main_nav [data-sc-id="sn-3"][data-sc-id],
  .block-main_nav [data-sc-id="sn-4"][data-sc-id]{width:100%!important;}

}

/* ---------- grilles cuites à 390px par l'export ----------
   La variante « mobile » de l'export fige toutes les grilles de la home en pixels
   pour un écran de 390px exactement. Converties en fractions : identique à 390px,
   mais elles suivent enfin les écrans plus étroits (320-375px). */
@media (max-width:767.98px){
  [data-sc-id="gh-35"][data-sc-id],
  [data-sc-id="gh-1098"][data-sc-id],
  [data-sc-id="gh-1100"][data-sc-id]{grid-template-columns:repeat(24,minmax(0,1fr))!important;}

  [data-sc-id="gh-36"][data-sc-id],
  [data-sc-id="gh-51"][data-sc-id],
  [data-sc-id="gh-1099"][data-sc-id],
  [data-sc-id="gh-1101"][data-sc-id],
  [data-sc-id="hs-166"][data-sc-id],
  [data-sc-id="hs-181"][data-sc-id]{grid-template-columns:minmax(0,1fr)!important;}

  [data-sc-id="gh-35"][data-sc-id],[data-sc-id="gh-36"][data-sc-id],[data-sc-id="gh-51"][data-sc-id],
  [data-sc-id="gh-1098"][data-sc-id],[data-sc-id="gh-1099"][data-sc-id],[data-sc-id="gh-1100"][data-sc-id],
  [data-sc-id="gh-1101"][data-sc-id],[data-sc-id="hs-166"][data-sc-id],
  [data-sc-id="hs-181"][data-sc-id]{width:auto!important;max-width:100%!important;}

  /* les enfants héritent alors de la largeur réelle de l'écran */
  .block-products_main [data-sc-id]:not(img):not(svg){max-width:100%!important;}
}

/* footer : l'export a figé la rangée logo + liens en `row` alors que sa propre
   classe `max-xl:flex-col` prévoit un empilement sous 1280px. Sans ça, la colonne
   de liens ne peut pas rétrécir et sort de l'écran. */
@media (max-width:1279.98px){
  [data-sc-id="mf-544"][data-sc-id]{flex-direction:column!important;}
  [data-sc-id="mf-569"][data-sc-id]{min-width:0!important;}
}

/* footer : les largeurs de colonnes cuites par l'export entrent en conflit avec
   ses propres classes responsive entre 600 et 992px */
@media (max-width:599.98px){
  [data-sc-id="mf-569"][data-sc-id]{grid-template-columns:repeat(2,minmax(0,1fr))!important;width:auto!important;max-width:100%!important;}
}
@media (min-width:600px) and (max-width:991.98px){
  [data-sc-id="mf-569"][data-sc-id]{grid-template-columns:repeat(3,minmax(0,1fr))!important;width:auto!important;max-width:100%!important;}
}

/* très petits écrans (320-374px) : les sous-pages gardaient des marges et des
   visuels dimensionnés pour 390px, ce qui débordait de quelques dizaines de px */
@media (max-width:374.98px){
  .sp .hero,.sp .section,.sp .dive,.sp .stats,.sp .quote,.sp .cta-band,.sp .site-foot{
    padding-left:18px!important;padding-right:18px!important;}
  .sp .hero > *,.sp .dive > *,.sp .card,.sp .dv-visual,.sp .hero-visual{min-width:0;}
  .sp .dv-visual,.sp .hero-visual{padding:24px 16px;min-height:0;}
}
/* métriques : 1 colonne en petite tablette, 3 colonnes d'items empilés ensuite */
@media (min-width:768px) and (max-width:1023.98px){
  [data-sc-id="sr-715"]{grid-template-columns:minmax(0,1fr)!important;row-gap:18px!important;}
}
@media (min-width:1024px) and (max-width:1199.98px){
  .block-key_results .flex-align-start.horizontal{flex-direction:column!important;gap:12px!important;}
}

/* tablette étroite : colonne latérale produits au-dessus des cartes */
@media (min-width:768px) and (max-width:1099.98px){
  [data-sc-id="hs-166"]{grid-template-columns:minmax(0,1fr)!important;row-gap:28px!important;}
}
/* Cette colonne est « sticky » dans la maquette d'origine, ce qui n'a de sens qu'en
   deux colonnes. Une fois empilée, elle restait figée pendant que les cartes
   défilaient dessous — l'en-tête recouvrait les cartes produits (jusqu'à 476px de
   chevauchement à 768px, et sur un téléphone tenu en paysage). */
@media (max-width:1099.98px){
  [data-sc-id="hs-167"]{position:static!important;}
}

/* La section produits gardait la marge horizontale de 180px prévue pour un écran
   de 1440px : à 768px elle ne laissait que 408px utiles, et les cartes tombaient
   à 192px de large (texte coupé à deux mots par ligne). */
@media (min-width:768px) and (max-width:1439.98px){
  [data-sc-id="hs-165"]{margin-left:40px!important;margin-right:40px!important;width:auto!important;}
}
/* témoignage empilé (photo au-dessus de la citation) : on garde le flex de la
   variante mobile mais en colonne ; les grilles internes (stats) restent intactes */
@media (max-width:1099.98px){
  [data-sc-id="hs-440"][data-sc-id]{display:flex!important;flex-direction:column!important;}
  [data-sc-id="hs-441"],[data-sc-id="hs-443"],[data-sc-id="hs-451"]{width:auto!important;max-width:100%!important;min-width:0!important;flex:0 0 auto!important;}
}

/* le décor du hero reste affiché 1200-1439 : il suit l'échelle --fhs posée par le JS.
   La valeur CSS de repli donne déjà la bonne échelle au premier rendu — sans elle le
   décor s'affiche à 100 % puis rétrécit quand le script s'exécute (saut visible). */
@media (min-width:1200px) and (max-width:1439.98px){
  [data-sc-id="gh-35"]{--fhs:calc(100vw / 1440);min-height:calc(900px * var(--fhs, 1))!important;}
  .fh-art{transform:translateX(-50%) scale(var(--fhs,1))!important;transform-origin:top center!important;}
}

/* ---------- grands écrans : fonds pleine largeur ----------
   Le conteneur du hero était plafonné à max-width:1440px ET aligné à gauche : au-delà
   de 1440px sa couleur de fond s'arrêtait net, laissant une bande blanche à droite,
   et son contenu restait centré sur 1440 alors que le reste de la page se centre sur
   l'écran. Le fond occupe maintenant toute la largeur, les colonnes de la grille
   (24 × 60px = 1440) restant centrées : identique jusqu'à 1440px. */
@media (min-width:1441px){
  [data-sc-id="gh-35"]{max-width:none!important;width:100%!important;
    justify-content:center!important;}

  /* Tous les conteneurs de la page étaient bornés à 1440px ET calés à gauche : au-delà,
     la page entière glissait vers la gauche en laissant une large zone vide à droite.
     Ils se centrent maintenant. Rien ne change jusqu'à 1440px. */
  [data-sc-id="sn-4"],
  [data-sc-id="gh-1098"],[data-sc-id="gh-1100"],
  [data-sc-id="hs-165"],[data-sc-id="hs-426"],
  [data-sc-id="sr-706"],[data-sc-id="sr-816"],
  [data-sc-id="mf-543"]{margin-left:auto!important;margin-right:auto!important;}
  [data-sc-id="sn-43"]{width:100%!important;}
}

/* ---------- ouverture des sous-menus au survol ----------
   Elle était confiée au JS, derrière un test `matchMedia('(hover:hover)')` évalué
   une seule fois au chargement — non fiable (il renvoie false dans plusieurs
   contextes). Elle est maintenant déclarative : le CSS ouvre le panneau au survol
   et au focus clavier, le JS restant utile au clic et au tactile.
   `any-hover` plutôt que `hover` : sur un portable tactile, le pointeur principal
   est le doigt (`hover:none`) alors qu'une souris est bien présente — c'est le cas
   où le menu refusait de s'ouvrir au survol. */
@media (any-hover:hover){
  .fh-item[data-fh]:hover > .fh-panel,
  .fh-item[data-fh]:focus-within > .fh-panel{
    opacity:1;visibility:visible;transform:translateY(0);}
  .fh-item[data-fh]:hover > .fh-trigger{background:rgba(31,31,31,.05);}
  .fh-item[data-fh]:hover > .fh-trigger .fh-chev{transform:rotate(180deg);}
}

/* lien d'évitement : hors écran, il apparaît dès qu'il reçoit le focus clavier */
.fh-skip{position:absolute;left:-9999px;top:0;z-index:2000;
  background:#1f1f1f;color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  font:600 15px/1 'FH Sans',Arial,sans-serif;text-decoration:none;}
.fh-skip:focus{left:0;}

/* ---------- confort de lecture & navigation ---------- */
/* le header est collant : sans cela, une ancre (#products) atterrit dessous */
html{scroll-padding-top:104px;}
@media (max-width:767.98px){html{scroll-padding-top:80px;}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

/* focus clavier visible et homogène sur tout le site */
a:focus-visible,button:focus-visible,summary:focus-visible,
[role="link"]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid #da3d00;outline-offset:3px;border-radius:6px;}
:focus:not(:focus-visible){outline:none;}

::selection{background:#ffddd0;color:#1f1f1f;}

/* respect de « réduire les animations » */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ---------- onglets des témoignages (mobile) ----------
   Quatre onglets ne tiennent pas sur une ligne de téléphone : ils débordaient des
   deux côtés. Ils passent à la ligne, resserrés. */
@media (max-width:599.98px){
  .block-products_main .fh-tabbed-testimonials__tab-list{flex-wrap:wrap!important;gap:8px 22px!important;padding:0 12px!important;}
  .block-products_main .fh-tabbed-testimonials__tab-button{font-size:15.5px!important;padding-bottom:7px!important;}
}

/* ---------- liens dans le texte des sous-pages ---------- */
.sp main p a,.sp main li a{color:#da3d00;text-decoration:underline;text-underline-offset:2px;}
.sp main p a:hover,.sp main li a:hover{text-decoration-thickness:2px;}

/* ---------- photos des témoignages ---------- */
.fht-photo .fht-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fht-has-img .fht-stars{color:#ffd166;text-shadow:0 1px 4px rgba(0,0,0,.55);}

/* ---------- logo de l'en-tête ---------- */
.block-main_nav .brand .fh-logo{display:block;height:34px;width:auto;max-width:none;}
@media (max-width:374.98px){.block-main_nav .brand .fh-logo{height:30px;}}

/* ---------- confort tactile ----------
   Le doigt est moins précis que la souris. La zone cliquable est étendue par un
   pseudo-élément en position absolue : le rendu ne bouge pas d'un pixel, seule
   la surface tactile grandit (mesuré : 17px -> 29px sur les liens du footer). */
@media (max-width:991.98px){
  .block-main_nav .brand,
  .block-products_main .cl-textLink,
  .block-site_footer nav a{position:relative;}
  .block-main_nav .brand::after,
  .block-products_main .cl-textLink::after,
  .block-site_footer nav a::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px;}
  .block-main_nav .brand::after{top:-12px;bottom:-12px;}
}

/* ---------- nav mobile ----------
   Seuil à 860px : c'est la largeur en dessous de laquelle le menu bureau ne tient
   plus (mesuré : contenu 800px + marges). Au-dessus, les panneaux déroulants
   restent disponibles au survol — un seuil trop haut les faisait disparaître
   sur les fenêtres étroites et les écrans à fort zoom. */
.fh-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-left:auto;border:0;background:transparent;border-radius:10px;color:#1f1f1f;cursor:pointer;}
.fh-burger:hover{background:rgba(31,31,31,.05);}
.fh-burger:focus-visible{outline:2px solid #da3d00;outline-offset:2px;}
@media (max-width:859.98px){
  .fh-burger{display:inline-flex;}
  [data-sc-id="sn-3"]{position:relative!important;}
  [data-sc-id="sn-4"]{display:flex;align-items:center;}
  .block-main_nav .main-nav__wrapper{display:none;}
  .block-main_nav.fh-nav-open .main-nav__wrapper{
    display:block!important;position:absolute!important;top:100%;left:0;right:0;
    width:auto!important;height:auto!important;min-height:0!important;padding:10px 16px 18px!important;
    background:#fff;border-top:1px solid rgba(31,31,31,.07);
    box-shadow:0 24px 40px -24px rgba(20,20,20,.25);
    transform:none!important;z-index:1300;max-height:calc(100vh - 72px);overflow:auto;}
  .block-main_nav .main-nav__content{display:block!important;width:auto!important;height:auto!important;min-height:0!important;padding:0!important;}
  .fh-menu{display:block!important;height:auto!important;}
  .fh-item{display:block!important;height:auto!important;}
  .fh-trigger{width:100%;justify-content:space-between;height:48px;font-size:16px;padding:0 6px;}
  .fh-panel{position:static!important;display:none;width:100%!important;min-width:0!important;
    opacity:1!important;visibility:visible!important;transform:none!important;
    box-shadow:none!important;border:0!important;padding:0 2px 10px!important;}
  .fh-item.fh-open .fh-panel{display:block;}
  .fh-panel::before{display:none;}
  .fh-panel .fh-cols{grid-template-columns:1fr!important;}
  [data-sc-id="sn-38"]{display:flex;align-items:center;gap:12px;width:auto!important;height:auto!important;min-height:0!important;
    padding:12px 6px 0;border-top:1px solid rgba(31,31,31,.07);margin-top:8px;}
  /* flèches du carrousel de témoignages : redondantes avec les onglets */
  .tg-nav-btn{display:none!important;}
}