/* ============================================================
   Seeqle - corrections design globales servies en asset versionne
   (le head de site approchait la limite de 20 000 caracteres).
   Contenu : bloc sq-design-p10 (stress test 2026-08-13/14)
   + bloc sq-design-p11 (lot apple-design 2026-08-20).
   Pour modifier : NE PAS editer cet asset en place, uploader un
   fichier v(n+1) et repointer le <link> du head de site (update_asset
   ne change pas l'URL, piege documente dans seeqle-webflow-site).
   ============================================================ */

/* ============================================================
   SQ 2026-08i : correction du RENDU (stress test 2026-08-13)
   B1 FAQ 768-991 (dans sq-design-p3) . B2 heros . B3 CTA navbar
   B4 vert sur vert . B5 bentos + hauteurs figees . V1/V2 footer
   B6 rognage horizontal des locales longues (2026-08-14)
   Reversible en supprimant ce bloc.
   ============================================================ */

/* ---- B1 : FAQ lisible entre 768 et 991 (le repli de .faq6_accordion
   est corrige dans sq-design-p3 ; ici on aligne aussi le conteneur) ---- */
@media screen and (min-width:768px) and (max-width:991px){
.faq6_content{grid-template-columns:1fr;grid-row-gap:2rem}
}

/* ---- B2 : heros produit, le mockup recouvrait le H1 ---- */
@media screen and (max-width:991px){
.product-hero-wrapper{flex-flow:column}
.product-hero-content{width:100%}
.product-hero-image-wrapper{width:100%}
}
@media screen and (min-width:992px){
.product-hero-content{flex:1 1 0;min-width:0;width:auto}
.product-hero-image-wrapper{flex:0 1 38%;min-width:0}
.product-hero-text{min-width:0;width:100%;max-width:100%}
}
@media screen and (min-width:992px) and (max-width:1279px){
.product-hero-text .heading-style-h1{font-size:3.5rem}
}
.product-hero-text h1,.product-hero-text p{overflow-wrap:break-word}

/* ---- B3 : CTA de la navbar tronque entre 992 et 1499 ---- */
@media screen and (min-width:992px) and (max-width:1499px){
.navbar_container{grid-template-columns:auto auto auto;grid-column-gap:12px}
.navbar_button-wrapper{grid-column-gap:.5rem;margin-left:.5rem}
.navbar_button-wrapper .button.is-white{margin-right:0;padding-left:14px;padding-right:14px}
.navbar_button-wrapper .button.is-white:hover .btn-arrow-wrapper{width:0 !important;margin-left:0 !important;opacity:0 !important}
.sq-nav-trial{padding-left:14px;padding-right:14px}
}
@media screen and (min-width:992px) and (max-width:1279px){
.navbar_link{padding-left:8px;padding-right:8px;font-size:15px}
.navbar_dropdown-toggle{padding-left:6px;padding-right:6px;font-size:15px}
.navbar_button-wrapper .button.is-white,.sq-nav-trial{font-size:15px}
}
/* sous 1150px la barre ne peut pas porter logo + menu + 2 CTA en DE et ES :
   on garde le CTA primaire, le secondaire reste accessible dans chaque hero */
@media screen and (min-width:992px) and (max-width:1149px){
.navbar_button-wrapper .sq-nav-trial,
.navbar_button-wrapper .button.login.hide-tablet{display:none}
}

/* ---- B4 : jamais de bouton vert sur un hero vert ---- */
html[data-wf-page="688a2760b5e40346e13aa187"] .product-hero-sectioon .button.is-green,
html[data-wf-page="69b955e944f929c9383ed3ec"] .product-hero-sectioon .button.is-green{background-color:#1B1B1B;color:#F8FFF4}
html[data-wf-page="688a2760b5e40346e13aa187"] .product-hero-sectioon .button.is-green .txt-btn,
html[data-wf-page="69b955e944f929c9383ed3ec"] .product-hero-sectioon .button.is-green .txt-btn{color:#F8FFF4}

/* ---- B5a : bentos, replier a 768-991 comme le fait deja le mobile ---- */
@media screen and (min-width:768px) and (max-width:991px){
.solution-bento-grid{grid-template-columns:1fr}
.solution-bento-grid>*{grid-column-start:auto !important;grid-column-end:span 1 !important}
.product-bentogrid.first-3,.product-bentogrid.first-3.technologie{grid-template-columns:1fr}
.product-bentogrid.first-3>*,.product-bentogrid.second-3>*{grid-column-start:auto !important;grid-column-end:span 1 !important}
.solution-bento-box.bg-dark-green.min-height-500.flex-bottom-left,
.solution-bento-box.bg-dark-green.min-height-360.flex-left,
.solution-bento-box.bg-light-green.min-height-500.flex-bottom-left{min-height:300px}
.bento-wrapper.vertical{flex-flow:column;align-items:flex-start}
}
@media screen and (max-width:991px){
.soluton-bento-wrapper{flex-flow:column;min-width:0;max-width:100%}
.soluton-bento-wrapper>*{min-width:0;max-width:100%}
.bento-left-content{max-width:100%}
}
.bento-vertical-div,.solution-bento-box,.why_horizontal-item{overflow-wrap:break-word}
.light-green-badge-list{flex-wrap:wrap}

/* ---- B5b : hauteurs figees remplacees par des min-height ---- */
.avis_tab-wrapper,.auto-tabs_pane{height:auto;min-height:450px}
.why_horizontal-item{height:auto;min-height:360px}
.why_horizontal-item.attract{height:auto;min-height:320px}
@media screen and (max-width:991px){
.avis_tab-wrapper,.auto-tabs_pane{height:auto;min-height:554px}
.why_horizontal-item.attract{height:auto;min-height:300px}
}
@media screen and (max-width:991px){
.avis_tab-wrapper,.auto-tabs_pane{height:auto;min-height:400px}
.why_horizontal-item{height:auto;min-height:0}
}
@media screen and (max-width:479px){
.avis_tab-wrapper,.auto-tabs_pane{height:auto;min-height:500px}
.why_horizontal-item.attract{height:auto;min-height:0}
}

/* ---- V1 : footer allemand entre 992 et 1099 ---- */
@media screen and (min-width:768px) and (max-width:1279px){
.footer_content-wrapper{grid-column-gap:2rem}
.footer_top-wrapper{grid-column-gap:1.5rem}
}
/* ---- V2 : mentions legales ES a 768 ---- */
.footer_legal-list{display:flex;flex-wrap:wrap;justify-content:center;column-gap:1.5rem;row-gap:.5rem}

/* ============================================================
   B6 (2026-08-14) : ROGNAGE HORIZONTAL des locales longues.
   Cause commune mesuree : un mot compose allemand (ou une chip
   en white-space:nowrap) impose un plancher de min-content a un
   conteneur en overflow:hidden, qui coupe le texte.
   Correctif : plancher remis a zero (min-width:0) et retour a la
   ligne autorise. Mesure avant/apres a 340/520/768/900/1024/1280
   dans les 4 langues : le francais ne bouge pas (0 px partout).
   ============================================================ */
/* B6a : titres composes allemands dans les cartes du scroll horizontal
   (Match 103 px a 1024, 52 px a 1280 ; Attract et Entreprise 45 px ;
   Ecole 21 px) -> 0 px */
.why_top-wrapper,.why_top-wrapper > *{min-width:0}
.why_horizontal-item,.why_horizontal-item *{min-width:0}
.why-text-smaller,.why_content-wrapper{overflow-wrap:anywhere}

/* B6b : bentos horizontaux verts, l'embed sqv2 ne pouvait pas retrecir
   (Match 45 px a 768 et 61 px a 1024 ; Ecole 26 px et 42 px) -> 0 px */
.bento-horizontal-div .bento-wrapper{min-width:0}
.bento-horizontal-div .bento-content-wrapper{flex:1 1 0;min-width:0}
.bento-horizontal-div .w-embed{min-width:0}

/* B6c : bandeau conformite Attract, chips non secables (24 px a 340) -> 0 px */
.sqv2-cfm .chips .chip{white-space:normal}

/* B6d : carte profil Entreprise (6 px a 768, 33 px a 1024) -> 0 px */
.sqv2-en6.sqk .prof .pt b{overflow-wrap:anywhere}

/* B6e : carrousel Match, le volet sqv2-git provoquait 14 px de scroll
   horizontal parasite a 768 en allemand -> 0 px */
.ads-tabs-wrapper{min-width:0;max-width:100%}
.ads-tabs-wrapper .w-embed{min-width:0;max-width:100%}
.ads-tabs-wrapper .sqv2-git{max-width:100%}
.ads-tabs-wrapper .sqv2-git .hd{flex-wrap:wrap}


/* ==== sq-design-p11 : lot apple-design 2026-08-20 ==== */

/* A13 : LE fond clair de marque est le papier #FBF6EC (DS). F8FFF4 ne sert jamais de fond. */
body{background-color:#FBF6EC}

/* A4 : interlignage du corps a 1,5 (les blocs denses gardent leurs regles propres :
   .button, .navbar_link, .footer_link, .avis_name, .avis_job, .text-size-small restent a 110%) */
p{line-height:1.5}
.text-size-regular{line-height:1.5}
.text-size-18px{line-height:1.5}

/* A5 : Hedvig n'existe qu'en 400, jamais de faux gras sur la serif (tag h2, les classes gardent la main) */
h2{font-weight:400;line-height:1.1}

/* A8/C4 : focus clavier de marque, un seul systeme pour tout le site */
:focus-visible{outline:2px solid #43AA8B;outline-offset:2px}
.button.is-green:focus-visible,.sq-sec-btn:focus-visible,.sq-inv-bt:focus-visible{outline-color:#024455}

/* A12 : cibles tactiles, zone cliquable etendue sans changement visuel */
.footer_legal-link{display:inline-block;padding-top:8px;padding-bottom:8px}
.footer_social-link{padding:8px;margin:-8px}
a[href^="tel:"]{display:inline-block;padding-top:6px;padding-bottom:6px}
.sqa-l,.sqa-l-dark,.bento-link,.sq-inv-link,.sq-gloss-link{display:inline-block;padding-top:5px;padding-bottom:5px}

/* C5 : titres de rich text en noir, le teal est reserve aux surfaces et vignettes */
.text-rich-text h2,.text-rich-text h3{color:#1B1B1B}

/* A2 : chiffres verts sous 24px en green-700 (embeds Ecole, classe .kv interne aux embeds) */
.kv{color:#2E7E65!important}

/* B-accueil.1 : le collage de mockups du hero home se disloque sous 1200px, on le masque
   (precedent acte : heros Secteurs variante C) */
@media (max-width:1199px){
html[data-wf-page="66bc65300d219ae248200c43"] .header_images-wrapper{display:none}
}