/* Ken Burns - Lookbook banner */
.elementor-element-6c96874{overflow:hidden;position:relative;}
.elementor-element-6c96874::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:inherit;background-size:cover;background-position:0% 50%;transform:scale(1.04);transform-origin:center;animation:hupKenBurns 8s ease-out forwards;z-index:0;pointer-events:none;}
.elementor-element-6c96874 > *{position:relative;z-index:1;}
@keyframes hupKenBurns{from{transform:scale(1.04);}to{transform:scale(1);}}

/* ===== HAWAII — Fiche produit : variations sobres (blanc/gris/noir) ===== */
.woocommerce div.product form.cart .variations{margin-bottom:1.5em !important;border:0 !important;}
.woocommerce div.product form.cart .variations td,.woocommerce div.product form.cart .variations th{padding:0 0 .6em 0 !important;display:block !important;text-align:left !important;border:0 !important;}
.woocommerce div.product form.cart .variations label{font-size:.78rem !important;letter-spacing:.12em !important;text-transform:uppercase !important;font-weight:600 !important;color:#1a1a1a !important;margin-bottom:.5em !important;display:block !important;}
.woocommerce div.product form.cart table.variations td.value select,.woocommerce div.product form.cart .variations select,.woocommerce div.product form.cart select#pa_taille,.woocommerce div.product form.cart select#pa_couleur{appearance:none !important;-webkit-appearance:none !important;background-color:#fff !important;background-image:none !important;border:1px solid #d9d9d9 !important;color:#1a1a1a !important;border-radius:0 !important;padding:.7em 1em !important;font-size:.95rem !important;min-width:200px !important;cursor:pointer !important;text-shadow:none !important;}
.woocommerce div.product form.cart .variations select:hover{border-color:#1a1a1a !important;}
.woocommerce div.product form.cart .variations select:focus{outline:none !important;border-color:#1a1a1a !important;box-shadow:0 0 0 1px #1a1a1a !important;}
.woocommerce div.product form.cart .variations select option{background:#fff !important;color:#1a1a1a !important;}
.woocommerce div.product form.cart a.reset_variations{display:inline-block !important;margin-top:.4em !important;font-size:.78rem !important;color:#7a7a7a !important;text-decoration:underline !important;}
.woocommerce div.product form.cart .single_add_to_cart_button,.woocommerce div.product form.cart button.single_add_to_cart_button{background-color:#1a1a1a !important;color:#fff !important;border-radius:0 !important;text-transform:uppercase !important;letter-spacing:.12em !important;font-weight:600 !important;padding:1em 2.2em !important;border:1px solid #1a1a1a !important;transition:background .2s,color .2s !important;}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{background-color:#fff !important;color:#1a1a1a !important;}
.woocommerce div.product form.cart .quantity .qty{border:1px solid #d9d9d9 !important;border-radius:0 !important;padding:.6em !important;text-align:center !important;color:#1a1a1a !important;}

/* FIX bouton Valider la commande (WooCommerce Blocks) - texte blanc */
.wc-block-cart .wc-block-components-button.wp-element-button,
.wc-block-cart .wc-block-components-button.wp-element-button .wc-block-components-button__text,
.wp-block-woocommerce-cart .wc-block-components-button.wp-element-button,
.wp-block-woocommerce-cart .wc-block-components-button.wp-element-button .wc-block-components-button__text{color:#fff !important;}

/* Alignement boutons quantite (- / +) avec le chiffre */
.wc-block-components-quantity-selector__button{display:flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;}

/* QTY-CENTER-V2 alignement vertical chiffre + boutons */
.wc-block-components-quantity-selector{align-items:stretch !important;}
.wc-block-components-quantity-selector__input{line-height:normal !important;padding-top:0 !important;padding-bottom:0 !important;text-align:center !important;display:flex !important;align-items:center !important;justify-content:center !important;}
.wc-block-components-quantity-selector__button{display:flex !important;align-items:center !important;justify-content:center !important;line-height:normal !important;padding-top:0 !important;padding-bottom:0 !important;}

/* SIDECART-QTY-ALIGN fleches alignees avec le chiffre (drawer panier) */
.hw-sc-qty{display:inline-flex !important;align-items:stretch !important;}
.hw-sc-qty button.hw-qm,.hw-sc-qty button.hw-qp{display:inline-flex !important;align-items:center !important;justify-content:center !important;height:30px !important;line-height:1 !important;padding:0 !important;font-size:16px !important;}
.hw-sc-qty span{display:inline-flex !important;align-items:center !important;justify-content:center !important;height:30px !important;line-height:1 !important;}

/* FIX-GALLERY-OVERFLOW : empeche les images de la galerie produit de deborder (fallback si flexslider non charge) */
.woocommerce-product-gallery{overflow:hidden !important;}
.woocommerce-product-gallery__wrapper{display:block !important;}


/* GRID-IMG-UNIFORM : vignettes catalogue de taille egale */
ul.products li.product a img,
ul.products li.product img.attachment-woocommerce_thumbnail,
.elementor-products-grid ul.products li.product img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center top !important;
  aspect-ratio: auto !important;
  display: block !important;
}
@media (max-width: 767px){
  ul.products li.product a img,
  .elementor-products-grid ul.products li.product img { height: 320px !important; }
}

/* ===== RSE - force affichage images de fond (anti lazy-load) ===== */
body .elementor-1176 .elementor-element.elementor-element-hwrse4000.elementor-element-hwrse4000.elementor-element-hwrse4000{background-image:url("https://hawaii-uniformes-paris.com/wp-content/uploads/2026/06/hf_20260622_142549_53716062-7738-4ad0-ac97-17b4ebee3879-scaled.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
body .elementor-1176 .elementor-element.elementor-element-hwrse4006.elementor-element-hwrse4006.elementor-element-hwrse4006{background-image:url("https://hawaii-uniformes-paris.com/wp-content/uploads/2026/06/hf_20260622_142554_6f89006e-33ee-4e88-80df-44cc215c4ee7-scaled.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
body .elementor-1176 .elementor-element.elementor-element-hwrse4012.elementor-element-hwrse4012.elementor-element-hwrse4012{background-image:url("https://hawaii-uniformes-paris.com/wp-content/uploads/2026/06/hf_20260622_142817_d598c9f0-b1ae-4761-bdd1-e119090a4a51-scaled.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
body .elementor-1176 .elementor-element.elementor-element-hwrse4018.elementor-element-hwrse4018.elementor-element-hwrse4018{background-image:url("https://hawaii-uniformes-paris.com/wp-content/uploads/2026/06/hf_20260622_142706_ef88e3ef-24c2-4b99-97af-e85ab5fda2af-scaled.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
body .elementor-1176 .elementor-element.elementor-element-hwrse5014.elementor-element-hwrse5014.elementor-element-hwrse5014{background-image:url("https://hawaii-uniformes-paris.com/wp-content/uploads/2026/06/hf_20260622_142559_22cbabab-7eeb-4775-bc98-0c6ccd136889-scaled.png")!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}

/* ===== RSE - bouton CTA texte blanc (override snippet global) ===== */
body .elementor-1176 .elementor-element.elementor-element-hwrse5022 .elementor-button,body .elementor-1176 .elementor-element.elementor-element-hwrse5022 a.elementor-button .elementor-button-text{color:#FFFFFF!important;}
body .elementor-1176 .elementor-element.elementor-element-hwrse5022 .elementor-button{background-color:#1A1A1A!important;}
body .elementor-1176 .elementor-element.elementor-element-hwrse5022 .elementor-button:hover{background-color:#FFFFFF!important;}
body .elementor-1176 .elementor-element.elementor-element-hwrse5022 .elementor-button:hover .elementor-button-text,body .elementor-1176 .elementor-element.elementor-element-hwrse5022 a.elementor-button:hover{color:#1A1A1A!important;}

/* == LOOKBOOK RESPONSIVE GRID == */
.page-id-1178 .elementor-widget-loop-grid .elementor-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  width:100%;
}
.page-id-1178 .elementor-widget-loop-grid .elementor-loop-container{
  width:100%;
}
.page-id-1178 .elementor-widget-loop-grid img{
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
}
.page-id-1178 .elementor-widget-loop-grid h2{
  font-family:"Cormorant Garamond",serif; /* etait Playfair Display, police retiree du site le 29/07 */
  font-size:clamp(18px,1.6vw,30px);
  line-height:1.25;
  margin-top:14px;
  color:#1A1A1A;
}
/* Tablette : 2 colonnes */
@media (max-width:1024px){
  .page-id-1178 .elementor-widget-loop-grid .elementor-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
}
/* Mobile : 2 colonnes (audit 06/09/2026) */
@media (max-width:600px){
  .page-id-1178 .elementor-widget-loop-grid .elementor-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
  }
}
/* === GRANDS ECRANS : les images grandissent avec l'ecran === */
/* On laisse le conteneur de la page s'elargir sur la zone Lookbook */
.page-id-1178 .elementor-widget-loop-grid{
  max-width:none;
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:1440px){
  .page-id-1178 .elementor-widget-loop-grid .elementor-grid{
    gap:32px;
  }
  .page-id-1178 .elementor-widget-loop-grid h2{
    font-size:clamp(22px,1.7vw,32px);
  }
}
@media (min-width:1920px){
  .page-id-1178 .elementor-widget-loop-grid .elementor-grid{
    gap:40px;
  }
}
/* == LOOKBOOK CONTAINER WIDTH == */
/* Elargit le conteneur de la grille Lookbook sur grands ecrans */
.page-id-1178 .elementor-widget-loop-grid{ width:100%; }
@media (min-width:1200px){
  .page-id-1178 .e-con-inner:has(.elementor-widget-loop-grid){
    max-width:min(100%, 1600px) !important;
  }
}
@media (min-width:1700px){
  .page-id-1178 .e-con-inner:has(.elementor-widget-loop-grid){
    max-width:min(100%, 1880px) !important;
    padding-left:48px;
    padding-right:48px;
  }
}
@media (min-width:2200px){
  .page-id-1178 .e-con-inner:has(.elementor-widget-loop-grid){
    max-width:2100px !important;
  }
}

/* Fix: sticky header row losing position:fixed after mega-menu dropdowns were added */
.elementor-element.elementor-element-70332e7f.elementor-sticky--active.elementor-sticky--active {
  position: fixed !important;
}
.elementor-element.elementor-element-70332e7f.elementor-sticky__spacer.elementor-sticky__spacer {
  visibility: hidden !important;
}

/* ===== Animations d'apparition unifiées — accueil (fadeInUp doux et lent) ===== */
@keyframes hwFadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Toute apparition Elementor sur le site adopte le même mouvement, la même durée, la même courbe */
.elementor-element.animated {
  animation-name: hwFadeInUp !important;
  animation-duration: 1.1s !important;
  animation-timing-function: cubic-bezier(.22,.61,.36,1) !important;
  animation-fill-mode: both !important;
}
/* Neutralise les variantes de vitesse Elementor (fast/slow) pour une cadence homogène */
.elementor-element.animated-fast,
.elementor-element.animated-slow {
  animation-duration: 1.1s !important;
}
/* ===== Formulaire premium "Parlons de votre projet" ===== */
/* La carte blanche à droite */
.elementor-element-afbdcc6 {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 56px 60px 48px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.06) !important;
}
/* Champs : fond blanc, bordure fine grise, léger arrondi */
.elementor-element-afbdcc6 .elementor-field-group input:not([type=checkbox]):not([type=submit]),
.elementor-element-afbdcc6 .elementor-field-group select,
.elementor-element-afbdcc6 .elementor-field-group textarea {
  background: #ffffff !important;
  border: 1px solid #dcdcd7 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  height: auto !important;
  min-height: 52px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 15px !important;
  color: #1a1a1a !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}
.elementor-element-afbdcc6 .elementor-field-group textarea {
  min-height: 120px !important;
}
.elementor-element-afbdcc6 .elementor-field-group input:focus,
.elementor-element-afbdcc6 .elementor-field-group select:focus,
.elementor-element-afbdcc6 .elementor-field-group textarea:focus {
  border-color: #c9a24b !important;
  box-shadow: 0 0 0 3px rgba(201,162,75,0.10) !important;
  outline: none !important;
}
/* Placeholders discrets */
.elementor-element-afbdcc6 ::placeholder { color: #b3b3ac !important; opacity: 1 !important; }
/* Labels : petites capitales espacées */
.elementor-element-afbdcc6 .elementor-field-group > label {
  font-family: 'Jost', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  color: #2a2a28 !important;
  margin-bottom: 10px !important;
}
/* Espacement vertical entre les groupes de champs */
.elementor-element-afbdcc6 .elementor-form-fields-wrapper { row-gap: 4px !important; }
.elementor-element-afbdcc6 .elementor-field-group { margin-bottom: 8px !important; }
/* Bouton envoyer : noir, pleine largeur, capitales espacées */
.elementor-element-afbdcc6 .elementor-button {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  width: 100% !important;
  padding: 20px !important;
  letter-spacing: 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  transition: background .3s ease !important;
}
.elementor-element-afbdcc6 .elementor-button:hover { background: #9a8c78 !important; }
/* Case à consentement */
.elementor-element-afbdcc6 .elementor-field-type-checkbox label { font-size: 13px !important; color: #4a4a45 !important; letter-spacing: normal !important; text-transform: none !important; font-weight: 400 !important; }

/* ===== Boutons d'action du contenu : anthracite, carrés (le header est explicitement réinitialisé après) ===== */
.elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque){
  background-color:#343333 !important;
  color:#ffffff !important;
  border-width:0 !important;
  border-style:none !important;
  border-radius:0 !important;
  letter-spacing:1.6px !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  transition:background-color .3s ease !important;
}
.elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque):hover{ background-color:#1a1a1a !important; }
.elementor-element-afbdcc6 .elementor-button{ padding:20px !important; width:100% !important; }
/* Header : liens de navigation restent transparents (surtout pas des boutons pleins) */
.elementor-location-header .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque), header .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque){
  background-color:transparent !important;
  color:#000000 !important;
  padding:6px 0 !important;
  letter-spacing:1.6px !important;
  text-transform:none !important;
}
.elementor-location-header .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque):hover, header .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque):hover{ background-color:transparent !important; color:#9a8c78 !important; }
/* ===== Raffinements du menu (header) ===== */
/* Liens de navigation : soulignement doré animé au survol + état actif */
.elementor-location-header .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque){
  position:relative !important;
  overflow:visible !important;
}
.elementor-location-header .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque)::before{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:#9a8c78;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .35s cubic-bezier(.25,.8,.25,1);
}
.elementor-location-header .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque):hover::before{
  transform:scaleX(1);
}
/* État actif : soulignement doré permanent + couleur sur le lien courant */
.elementor-location-header .elementor-button.hw-menu-active:not(#hw-trigger-metiers):not(#hw-trigger-marque)::before{ transform:scaleX(1) !important; }
.elementor-location-header .elementor-button.hw-menu-active:not(#hw-trigger-metiers):not(#hw-trigger-marque){ color:#7D6A46 !important; }
/* Séparateur fin entre la navigation et les icônes (cœur / panier) */
.elementor-location-header .hw-cart-count{ position:relative; }

/* ===== DA Marcy — conversion des bandeaux sombres en blanc cassé clair ===== */
.elementor-element-f33d74d,
.elementor-element-afdf644,
.elementor-element-d11792f,
.elementor-element-2374088,
.elementor-element-3391130,
.elementor-element-hwrse3000,
.elementor-element-hwrse5000{
  background-color:#F7F5F2 !important;
  background-image:none !important;
}
.elementor-element-f33d74d h1, .elementor-element-f33d74d h2, .elementor-element-f33d74d h3, .elementor-element-f33d74d h4, .elementor-element-f33d74d p, .elementor-element-f33d74d li, .elementor-element-f33d74d span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-afdf644 h1, .elementor-element-afdf644 h2, .elementor-element-afdf644 h3, .elementor-element-afdf644 h4, .elementor-element-afdf644 p, .elementor-element-afdf644 li, .elementor-element-afdf644 span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-d11792f h1, .elementor-element-d11792f h2, .elementor-element-d11792f h3, .elementor-element-d11792f h4, .elementor-element-d11792f p, .elementor-element-d11792f li, .elementor-element-d11792f span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-2374088 h1, .elementor-element-2374088 h2, .elementor-element-2374088 h3, .elementor-element-2374088 h4, .elementor-element-2374088 p, .elementor-element-2374088 li, .elementor-element-2374088 span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-2095037 h1, .elementor-element-2095037 h2, .elementor-element-2095037 h3, .elementor-element-2095037 h4, .elementor-element-2095037 p, .elementor-element-2095037 li, .elementor-element-2095037 span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-96aec5e h1, .elementor-element-96aec5e h2, .elementor-element-96aec5e h3, .elementor-element-96aec5e h4, .elementor-element-96aec5e p, .elementor-element-96aec5e li, .elementor-element-96aec5e span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-3391130 h1, .elementor-element-3391130 h2, .elementor-element-3391130 h3, .elementor-element-3391130 h4, .elementor-element-3391130 p, .elementor-element-3391130 li, .elementor-element-3391130 span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-hwrse3000 h1, .elementor-element-hwrse3000 h2, .elementor-element-hwrse3000 h3, .elementor-element-hwrse3000 h4, .elementor-element-hwrse3000 p, .elementor-element-hwrse3000 li, .elementor-element-hwrse3000 span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper),
.elementor-element-hwrse5000 h1, .elementor-element-hwrse5000 h2, .elementor-element-hwrse5000 h3, .elementor-element-hwrse5000 h4, .elementor-element-hwrse5000 p, .elementor-element-hwrse5000 li, .elementor-element-hwrse5000 span:not([style*="C9A24B"]):not([style*="c9a24b"]):not(.elementor-button-text):not(.elementor-button-content-wrapper){
  color:#1a1a1a !important;
}
/* Préserver les accents dorés sur fond clair */
.elementor-element-80d73b9 h1,.elementor-element-80d73b9 h2,.elementor-element-80d73b9 h3,.elementor-element-80d73b9 .elementor-heading-title{ color:#C9A24B !important; }
/* Textes blancs résiduels dans les bandeaux convertis → anthracite (hors accents dorés) */
.elementor-element-f33d74d .elementor-heading-title, .elementor-element-f33d74d .elementor-widget-container > div, .elementor-element-f33d74d .elementor-text-editor,
.elementor-element-afdf644 .elementor-heading-title, .elementor-element-afdf644 .elementor-widget-container > div, .elementor-element-afdf644 .elementor-text-editor,
.elementor-element-d11792f .elementor-heading-title, .elementor-element-d11792f .elementor-widget-container > div, .elementor-element-d11792f .elementor-text-editor,
.elementor-element-2374088 .elementor-heading-title, .elementor-element-2374088 .elementor-widget-container > div, .elementor-element-2374088 .elementor-text-editor,
.elementor-element-2095037 .elementor-heading-title, .elementor-element-2095037 .elementor-widget-container > div, .elementor-element-2095037 .elementor-text-editor,
.elementor-element-96aec5e .elementor-heading-title, .elementor-element-96aec5e .elementor-widget-container > div, .elementor-element-96aec5e .elementor-text-editor,
.elementor-element-3391130 .elementor-heading-title, .elementor-element-3391130 .elementor-widget-container > div, .elementor-element-3391130 .elementor-text-editor,
.elementor-element-hwrse3000 .elementor-heading-title, .elementor-element-hwrse3000 .elementor-widget-container > div, .elementor-element-hwrse3000 .elementor-text-editor,
.elementor-element-hwrse5000 .elementor-heading-title, .elementor-element-hwrse5000 .elementor-widget-container > div, .elementor-element-hwrse5000 .elementor-text-editor{
  color:#1a1a1a !important;
}
/* Re-préserver le doré 1986 après cette règle */
.elementor-element-80d73b9 .elementor-heading-title,.elementor-element-80d73b9 h2{ color:#C9A24B !important; }
/* ===== Affinage light Marcy : alléger ombres, rendu plus plat ===== */
/* Carte formulaire : ombre très légère au lieu d'une ombre marquée */
.elementor-element-afbdcc6{ box-shadow:0 2px 20px rgba(0,0,0,0.04) !important; }
/* Section formulaire : suppression de l'ombre de section */
.elementor-element-e7fef0c{ box-shadow:none !important; }
/* Bordure carte formulaire : fin trait clair facon Marcy */
.elementor-element-afbdcc6{ border:1px solid #f0eeec !important; }
/* ===== Grille produits — format portrait (Collection permanente) ===== */
.woocommerce ul.products li.product a img,
ul.products li.product img{
  height:auto !important; aspect-ratio:832 / 1272 !important; max-height:700px !important;
  width:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  display:block !important;
}
/* ===== Finitions grille produits (Collection permanente) ===== */
/* Zoom doux de l'image au survol de la carte */
.woocommerce ul.products li.product a img,
ul.products li.product img{ transition:transform .7s cubic-bezier(.22,.61,.36,1), opacity .4s ease !important; }
.woocommerce ul.products li.product:hover a img,
ul.products li.product:hover img{ transform:scale(1.04); }
/* Conteneur image : masquer le débordement du zoom */

/* Espacement vertical plus généreux entre les lignes */
.woocommerce ul.products,
ul.products{ row-gap:64px !important; column-gap:24px !important; }
/* Titre produit : plus d'air au-dessus */
.woocommerce ul.products li.product .woocommerce-loop-product__title{ margin-top:18px !important; letter-spacing:.3px; }
/* Compteur de résultats : plus discret */
.woocommerce-result-count{ color:#a5a5a5 !important; font-size:12px !important; letter-spacing:.3px; }
/* ===== Image produit pleine case (largeur + hauteur, sans padding) ===== */
.woocommerce ul.products li.product a img,
ul.products li.product img{
  padding:0 !important;
  margin:0 0 14px !important;
  width:100% !important;
  height:auto !important; aspect-ratio:832 / 1272 !important; max-height:700px !important;
  object-fit:cover !important;
  object-position:center top !important;
  display:block !important;
}
/* Le lien conteneur ne doit pas ajouter d'espace */
.woocommerce ul.products li.product a,
ul.products li.product > a:first-child{ padding:0 !important; display:block !important; overflow:visible !important; }
/* ===== Fix survol image ne coupe pas le texte ===== */
/* L'image a son propre cadre qui masque le zoom, sans affecter titre/prix */
.woocommerce ul.products li.product a,
ul.products li.product > a:first-child{ overflow:visible !important; }
.woocommerce ul.products li.product a img,
ul.products li.product img{
  position:relative;
  z-index:1;
  overflow:hidden;
  will-change:transform;
}
/* Titre et prix passent au-dessus de l'image pour ne jamais être recouverts */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .hawaii-loop-price,
ul.products li.product .hawaii-loop-swatches{
  position:relative;
  z-index:2;
  background:#fff;
}
/* hover-zoom-origin : le zoom part du centre, titre toujours dégagé */
.woocommerce ul.products li.product:hover a img,
ul.products li.product:hover img{ transform:scale(1.03); transform-origin:center center; }
/* Marge de sécurité sous l'image pour absorber le zoom */
.woocommerce ul.products li.product a img,
ul.products li.product img{ margin-bottom:20px !important; }
/* ===== Largeur max grille boutique (fix responsive grand écran) ===== */
.woocommerce.columns-4, .woocommerce ul.products{ max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; }
/* Le titre, l'intro et la barre de filtres suivent la même largeur pour rester alignés */
.woocommerce-products-header, .woocommerce-result-count, .woocommerce-ordering{ max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; }
/* Sur écrans intermédiaires, garder 4 colonnes mais raisonnables ; passer à 3 puis 2 en dessous */
@media(min-width:1024px) and (max-width:1400px){ .woocommerce ul.products{ grid-template-columns:repeat(3,1fr) !important; } }
@media(min-width:768px) and (max-width:1023px){ .woocommerce ul.products{ grid-template-columns:repeat(2,1fr) !important; } }
/* ===== Espacement intro boutique (sous la description) ===== */
.elementor-element-3fb6e73, .woocommerce-archive-description, .term-description{ margin-bottom:42px !important; }
/* Intro alignée sur la grille produits */
.elementor-element-3fb6e73, .woocommerce-archive-description, .term-description{ max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; }
/* ===== Texte SEO bas aligné sur la grille produits (1500px) ===== */
.hw-seo-text{ max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; }
.hw-seo-inner{ max-width:1500px !important; margin-left:auto !important; margin-right:auto !important; }
/* ===== Fiche produit — typographie serif (cohérence DA Hawaii) ===== */
.single-product .product_title,
.single-product h1.product_title,
.woocommerce div.product .product_title{
  font-family:"Cormorant Garamond", serif !important;
  font-weight:500 !important;
  letter-spacing:.3px;
}
/* Prix en serif pour cohérence */
.single-product .summary .price,
.woocommerce div.product .summary .price,
.single-product .summary .price .woocommerce-Price-amount{
  font-family:"Cormorant Garamond", serif !important;
  font-size:26px !important;
  font-weight:500 !important;
}
/* Prix fiche produit serif v2 (cible le widget Elementor prix) */
.single-product .price,
.single-product .price .woocommerce-Price-amount,
.single-product .price .amount,
.woocommerce div.product .price,
.woocommerce div.product .price .woocommerce-Price-amount{
  font-family:"Cormorant Garamond", serif !important;
  font-size:26px !important;
  font-weight:500 !important;
}
/* Labels variations fiche produit (harmonisation Jost) */
.single-product .variations label,
.single-product .variations th,
.woocommerce div.product .variations label{
  font-family:"Jost", sans-serif !important;
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-size:12px !important;
}
/* ===== Fix galerie produit : 1 seule image → pleine largeur (pas de colonne vide) ===== */
/* Quand la galerie ne contient qu'une image, forcer une seule colonne */
.woocommerce-product-gallery__wrapper:has(.woocommerce-product-gallery__image:only-child){
  grid-template-columns:1fr !important;
}
/* Fallback pour navigateurs sans :has — si une seule image, elle prend toute la largeur */
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child{
  grid-column:1 / -1 !important;
  width:100% !important;
}
.woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child img{
  width:100% !important;
  height:auto !important;
}
/* ===== Fix produits liés "Vous aimerez aussi" : rangées de 2 ===== */
.single-product .related.products ul.products,
.single-product .up-sells ul.products,
.related.products ul.products{
  grid-template-columns:repeat(2, 1fr) !important;
  max-width:900px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* Le titre de la section suit le même alignement */
.single-product .related.products > h2,
.related.products > h2{
  max-width:900px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ===== Masquer les vignettes doublon (toutes les images sont deja en grille 2 colonnes) ===== */
.single-product .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs,
ol.flex-control-thumbs,
.flex-control-nav{
  display:none !important;
}
/* Masquer vignettes v2 (specificite maximale) */
body.single-product .woocommerce div.product .woocommerce-product-gallery ol.flex-control-nav.flex-control-thumbs,
body .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs,
.woocommerce-product-gallery ol.flex-control-thumbs.flex-control-thumbs{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  overflow:hidden !important;
}
/* ===== Fix flex-viewport : liberer la hauteur pour montrer toutes les rangees d'images ===== */
.woocommerce-product-gallery .flex-viewport,
.single-product .flex-viewport{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}
/* ===== Section "Vous aimerez aussi" — DA et alignement ===== */
/* Titre : serif Cormorant, centré au-dessus des produits, espacement aéré */
.elementor-element-16b48b17 .elementor-heading-title{
  font-family:"Cormorant Garamond", serif !important;
  font-weight:500 !important;
  font-size:34px !important;
  text-align:center !important;
  letter-spacing:.5px;
  color:#1a1a1a !important;
}
.elementor-element-16b48b17{
  margin-top:90px !important;
  margin-bottom:36px !important;
}
/* Cartes produits liés : titres en Jost (fini Poppins), cohérents avec la boutique */
.related.products li.product .woocommerce-loop-product__title,
.single-product .related li.product .woocommerce-loop-product__title{
  font-family:"Jost", sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  color:#1a1a1a !important;
}
/* Espace sous la grille des produits liés avant le footer */
.related.products{
  margin-bottom:90px !important;
}
/* Écart entre les 2 cartes un peu plus généreux */
.single-product .related.products ul.products,
.related.products ul.products{
  gap:28px !important;
}
/* ===== Colonne info produit sticky (style Loulou de Saison) ===== */
/* La colonne titre/prix/panier reste fixe pendant le scroll de la galerie */
.single-product .elementor-element-81c2498{
  position:sticky !important;
  position:-webkit-sticky !important;
  top:165px !important;
  align-self:flex-start !important;
  height:auto !important;
  max-height:calc(100vh - 185px);
  overflow-y:auto;
  scrollbar-width:none;
}
.single-product .elementor-element-81c2498::-webkit-scrollbar{ display:none; }
/* Sur mobile, pas de sticky (colonnes empilees) */
@media(max-width:1024px){
  .single-product .elementor-element-81c2498{
    position:static !important;
    max-height:none;
    overflow:visible;
  }
}
/* ===== Bouton ajouter panier etats clairs ===== */
.single-product .single_add_to_cart_button{
  background:#1a1a1a !important;
  color:#fff !important;
  border-radius:0 !important;
  transition:background .2s !important;
}
.single-product .single_add_to_cart_button:hover{ background:#343333 !important; }
.single-product .single_add_to_cart_button.disabled,
.single-product .single_add_to_cart_button.wc-variation-selection-needed{
  background:#c9c5bf !important;
  color:#fff !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}
/* Bouton panier disabled specificite max */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed,
body.single-product .woocommerce div.product form.cart .single_add_to_cart_button.disabled{
  background:#c9c5bf !important;
  color:#fff !important;
  cursor:not-allowed !important;
}
/* ===== Calc taille retouches UX ===== */
#hu-sizecalc-wrap .hu-sc-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;top:8px;right:10px}
.hu-sc-input::-webkit-outer-spin-button,.hu-sc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hu-sc-input[type=number]{-moz-appearance:textfield;appearance:textfield}
@keyframes huScFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#hu-sizecalc-wrap .hu-sc-anim{animation:huScFade .28s ease}
.hu-size-calc-btn{font-family:Jost,sans-serif !important;letter-spacing:1.5px !important}
.single-product .elementor-accordion .elementor-tab-title,
.single-product .elementor-accordion .elementor-tab-title a,
.single-product .elementor-toggle .elementor-tab-title,
.single-product .elementor-toggle .elementor-tab-title a{font-family:Jost,sans-serif !important}
/* ===== Calc taille anti-rose + responsive ===== */
/* Neutraliser la couleur accent du theme sur TOUS les etats des controles du panneau */
#hu-sizecalc-wrap button:hover,#hu-sizecalc-wrap button:focus,#hu-sizecalc-wrap button:active{background-image:none !important;box-shadow:none;}
#hu-sizecalc-wrap .hu-sc-cta:hover,#hu-sizecalc-wrap .hu-sc-cta:focus,#hu-sizecalc-wrap .hu-sc-cta:active{background:#343333 !important;color:#fff !important;}
#hu-sizecalc-wrap .hu-sc-ghost:hover,#hu-sizecalc-wrap .hu-sc-ghost:focus,#hu-sizecalc-wrap .hu-sc-ghost:active{background:#f4f2ef !important;color:#1a1a1a !important;border-color:#1a1a1a !important;}
#hu-sizecalc-wrap .hu-sc-gender:hover,#hu-sizecalc-wrap .hu-sc-gender:focus{background:#fff !important;color:#1a1a1a !important;border-color:#1a1a1a !important;}
#hu-sizecalc-wrap .hu-sc-gender.on,#hu-sizecalc-wrap .hu-sc-gender.on:hover,#hu-sizecalc-wrap .hu-sc-gender.on:focus{background:#1a1a1a !important;color:#fff !important;}
#hu-sizecalc-wrap .hu-sc-fit:hover,#hu-sizecalc-wrap .hu-sc-fit:focus,#hu-sizecalc-wrap .hu-sc-fit:active{background:#f4f2ef !important;color:#1a1a1a !important;}
#hu-sizecalc-wrap .hu-sc-fit.on,#hu-sizecalc-wrap .hu-sc-fit.on:hover,#hu-sizecalc-wrap .hu-sc-fit.on:focus{background:#fff !important;color:#1a1a1a !important;box-shadow:inset 0 0 0 2px #1a1a1a !important;}
#hu-sizecalc-wrap .hu-sc-link,#hu-sizecalc-wrap .hu-sc-link:hover,#hu-sizecalc-wrap .hu-sc-link:focus{background:transparent !important;border:0 !important;color:#555 !important;text-decoration:underline;text-underline-offset:3px;font-family:Jost,sans-serif !important;font-size:13px;padding:10px 0;}
#hu-sizecalc-wrap .hu-sc-link:hover{color:#1a1a1a !important;}
#hu-sizecalc-wrap button:focus-visible{outline:2px solid #1a1a1a !important;outline-offset:2px;}
/* Responsive : onglets de coupe qui retrecissent proprement */
#hu-sizecalc-wrap .hu-sc-body{overflow-x:hidden;}
#hu-sizecalc-wrap .hu-sc-fits{width:100%;}
#hu-sizecalc-wrap .hu-sc-fit{min-width:0;white-space:normal;text-align:center;line-height:1.25;}
#hu-sizecalc-wrap .hu-sc-fit span{display:block;}
#hu-sizecalc-wrap .hu-sc-cta{white-space:normal;line-height:1.4;font-size:clamp(11px,3.2vw,13px);}
@media(max-width:480px){
  #hu-sizecalc-wrap .hu-sc-fit{font-size:9.5px;letter-spacing:.6px;padding:10px 2px;}
  #hu-sizecalc-wrap .hu-sc-fit svg{width:20px;height:20px;}
  #hu-sizecalc-wrap .hu-sc-body{padding:28px 20px 16px;}
}
/* ===== Fiche produit : ecart header reduit (180px -> 40px) ===== */
.single-product .elementor-element-16d7ebc{margin-top:40px !important;}
/* ===== Bouton ajouter panier Jost ===== */
.single-product .single_add_to_cart_button,
.woocommerce div.product form.cart .button{font-family:Jost,sans-serif !important;letter-spacing:2px !important;}
/* ===== Le Process images angles nets (pas de radius) ===== */
.page-id-1700 .elementor-element-f2fe706,
.page-id-1700 .elementor-element-13d444b,
.page-id-1700 .elementor-element-b6a84c1,
.page-id-1700 .elementor-element-14a14cd,
.page-id-1700 .elementor-element-b12a6b0,
.page-id-1700 .elementor-element-cb53189,
.page-id-1700 .elementor-element-6e47bc1{border-radius:0 !important;}
/* ===== Lot P2 typo + anti-rose global ===== */
/* Ligne categories fiche produit : Manrope -> Jost */
.single-product .elementor-element-480b338f .elementor-heading-title,
.single-product .elementor-element-480b338f .elementor-heading-title a{font-family:Jost,sans-serif !important;font-size:13px !important;letter-spacing:.4px;}
/* Pastilles couleur : hygiene typo */
.hu-swatches .hu-swatch{font-family:Jost,sans-serif !important;}
/* Neutraliser le rose #CC3366 du reset Hello Elementor sur les boutons natifs (site entier) */
button:hover,button:focus,
[type="button"]:hover,[type="button"]:focus,
[type="submit"]:hover,[type="submit"]:focus,
[type="reset"]:hover,[type="reset"]:focus{background-color:#343333;}
/* Exceptions : pastilles et boutons transparents */
.hu-swatches .hu-swatch:hover,.hu-swatches .hu-swatch:focus{background-color:transparent;}
/* Bouton Trouver ma taille : hover propre anthracite */
.hu-size-calc-btn:hover,.hu-size-calc-btn:focus{background-color:#1a1a1a !important;color:#fff !important;border-color:#1a1a1a !important;}
/* ===== Panier & Commande UX DA ===== */
/* Titres de page : Cormorant (remplace Playfair) */
body.woocommerce-cart h1, body.woocommerce-checkout h1,
body.woocommerce-cart .entry-title, body.woocommerce-checkout .entry-title{font-family:"Cormorant Garamond",serif !important;font-weight:500 !important;font-size:42px !important;letter-spacing:.5px !important;}
/* Bouton principal */
.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button{background:#1a1a1a !important;color:#fff !important;border:none !important;border-radius:0 !important;font-family:Jost,sans-serif !important;font-size:13px !important;font-weight:500 !important;letter-spacing:2px !important;text-transform:uppercase !important;padding:16px 24px !important;transition:background .25s ease;}
.wc-block-cart__submit-button:hover, .wc-block-cart__submit-button:focus,
.wc-block-components-checkout-place-order-button:hover{background:#343333 !important;color:#fff !important;}
/* Selecteur quantite */
.wc-block-components-quantity-selector{border-radius:0 !important;border:1px solid #d5d1cb !important;}
.wc-block-components-quantity-selector input{font-family:Jost,sans-serif !important;}
.wc-block-components-quantity-selector__button{color:#343333 !important;}
/* Nom produit + details */
.wc-block-components-product-name{font-family:Jost,sans-serif !important;font-size:14px !important;letter-spacing:.3px !important;color:#1a1a1a !important;}
a.wc-block-components-product-name:hover{color:#9a8c78 !important;}
.wc-block-components-product-details__name, .wc-block-components-product-details__value{font-size:12px !important;color:#8a8a8a !important;}
/* Lien supprimer */
.wc-block-cart-item__remove-link{font-family:Jost,sans-serif !important;font-size:12px !important;color:#9a8c78 !important;text-decoration:underline;text-underline-offset:3px;}
.wc-block-cart-item__remove-link:hover{color:#1a1a1a !important;}
/* Bouton panneau coupon */
.wc-block-components-panel__button{font-family:Jost,sans-serif !important;font-size:13px !important;color:#343333 !important;}
/* Totaux */
.wc-block-components-totals-item__label{font-family:Jost,sans-serif !important;font-size:13px !important;letter-spacing:1px !important;text-transform:uppercase !important;color:#555 !important;}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{color:#1a1a1a !important;font-weight:600 !important;}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-family:Jost,sans-serif !important;font-size:18px !important;font-weight:600 !important;color:#1a1a1a !important;}
/* Recapitulatif : panneau premium */
.wc-block-cart__sidebar{background:#faf9f7;border:1px solid #e5e0d8;padding:10px 22px 22px;}
/* Separateurs lignes */
.wc-block-cart-items__row{border-bottom:1px solid #ece8e1 !important;}
.wc-block-cart-items__header{border-bottom:1px solid #d5d1cb !important;}
.wc-block-cart-items__header span{font-family:Jost,sans-serif !important;font-size:12px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:#777 !important;}
/* Panier vide */
.wc-block-cart__empty-cart__title, .cart-empty{font-family:"Cormorant Garamond",serif !important;font-weight:500 !important;font-size:34px !important;color:#1a1a1a !important;}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link{background:#1a1a1a !important;color:#fff !important;border-radius:0 !important;font-family:Jost,sans-serif !important;font-size:13px !important;letter-spacing:2px !important;text-transform:uppercase !important;padding:14px 28px !important;}
.wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover{background:#343333 !important;}
.wp-block-woocommerce-empty-cart-block h2{font-family:"Cormorant Garamond",serif !important;font-weight:500 !important;font-size:30px !important;text-align:center;}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product img{border-radius:0 !important;}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title{font-family:Jost,sans-serif !important;font-size:13px !important;letter-spacing:.5px;}
/* ===== Mini-panier FunnelKit DA ===== */
.fkcart-panel .fkcart-checkout--btn, .fkcart-panel .fkcart-checkout-btn, #fkcart-checkout-btn,
.fkcart-panel a.fkcart-checkout--wrap-btn, .fkcart-checkout-wrap a{background:#1a1a1a !important;color:#fff !important;border:none !important;border-radius:0 !important;font-family:Jost,sans-serif !important;font-size:13px !important;font-weight:500 !important;letter-spacing:2px !important;text-transform:uppercase !important;transition:background .25s ease;}
.fkcart-panel .fkcart-checkout--btn:hover, .fkcart-checkout-wrap a:hover{background:#343333 !important;color:#fff !important;}
.fkcart-panel-header, .fkcart-header{background:#faf9f7 !important;border-bottom:1px solid #e5e0d8 !important;}
.fkcart-panel-header .fkcart-title, .fkcart-panel-header span, .fkcart-header *{font-family:Jost,sans-serif !important;font-size:13px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:#1a1a1a !important;}
.fkcart-panel .fkcart-item-title, .fkcart-panel .fkcart-cart-item-name, .fkcart-panel a[class*=title]{font-family:Jost,sans-serif !important;font-size:13px !important;letter-spacing:.3px !important;color:#1a1a1a !important;}
.fkcart-panel [class*=price], .fkcart-panel .fkcart-subtotal{font-family:Jost,sans-serif !important;}
.fkcart-panel .fkcart-quantity, .fkcart-panel [class*=quantity]{border-radius:0 !important;}
.fkcart-panel input[type=text], .fkcart-panel input[type=number], .fkcart-panel button.fkcart-coupon-btn{border-radius:0 !important;font-family:Jost,sans-serif !important;}
.fkcart-panel img{border-radius:0 !important;}
.fkcart-zero-state h2, .fkcart-zero-state [class*=heading]{font-family:"Cormorant Garamond",serif !important;font-weight:500 !important;font-size:28px !important;text-transform:none !important;letter-spacing:.5px !important;color:#1a1a1a !important;}
.fkcart-zero-state p{font-family:Jost,sans-serif !important;font-size:14px !important;color:#8a8a8a !important;}
.fkcart-panel .fkcart-primary-button, a.fkcart-primary-button, .fkcart-shop-button{background:#1a1a1a !important;color:#fff !important;border:none !important;border-radius:0 !important;font-family:Jost,sans-serif !important;font-size:13px !important;font-weight:500 !important;letter-spacing:2px !important;text-transform:uppercase !important;padding:14px 26px !important;transition:background .25s ease;}
.fkcart-panel .fkcart-primary-button:hover, a.fkcart-primary-button:hover, .fkcart-shop-button:hover{background:#343333 !important;color:#fff !important;}

/* ===== Page confirmation commande DA ===== */
body.woocommerce-order-received .woocommerce-thankyou-order-received{font-family:"Cormorant Garamond",serif !important;font-size:30px !important;font-weight:500 !important;color:#1a1a1a !important;text-align:center;padding:36px 20px 32px;margin:6px 0 36px;border:1px solid #e5e0d8;background:#faf9f7;letter-spacing:.5px;}
body.woocommerce-order-received .woocommerce-thankyou-order-received:before{content:"\2713";display:block;width:46px;height:46px;line-height:44px;margin:0 auto 16px;border:1px solid #C9A24B;border-radius:50%;color:#C9A24B;font-size:20px;font-family:Jost,sans-serif;}
body.woocommerce-order-received ul.woocommerce-order-overview{display:flex;flex-wrap:wrap;margin:0 0 46px !important;padding:0 !important;border:1px solid #e5e0d8;background:#fff;list-style:none;}
body.woocommerce-order-received .woocommerce-order-overview li{flex:1 1 0;min-width:160px;float:none !important;width:auto !important;border-right:1px solid #e5e0d8 !important;border-left:0 !important;margin:0 !important;padding:18px 20px !important;font-family:Jost,sans-serif !important;font-size:11px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:#8a8a8a !important;}
body.woocommerce-order-received .woocommerce-order-overview li:last-child{border-right:0 !important;}
body.woocommerce-order-received .woocommerce-order-overview li strong{display:block;margin-top:8px;font-size:15px !important;letter-spacing:.3px !important;text-transform:none !important;color:#1a1a1a !important;font-weight:500 !important;}
body.woocommerce-order-received h2{font-family:"Cormorant Garamond",serif !important;font-weight:500 !important;font-size:30px !important;color:#1a1a1a !important;margin:40px 0 8px !important;}
body.woocommerce-order-received h2:after{content:"";display:block;width:44px;height:2px;background:#C9A24B;margin-top:10px;}
body.woocommerce-order-received table.woocommerce-table--order-details{border:1px solid #e5e0d8 !important;background:#fff;margin-top:24px !important;border-collapse:collapse !important;}
body.woocommerce-order-received table.woocommerce-table--order-details th, body.woocommerce-order-received table.woocommerce-table--order-details td{border:0 !important;border-bottom:1px solid #ece8e1 !important;padding:15px 18px !important;font-family:Jost,sans-serif !important;font-size:14px !important;}
body.woocommerce-order-received table.woocommerce-table--order-details thead th{font-size:12px !important;letter-spacing:1.5px !important;text-transform:uppercase !important;color:#777 !important;background:#faf9f7;}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot th{font-size:12px !important;letter-spacing:1.2px !important;text-transform:uppercase !important;color:#555 !important;}
body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td{border-bottom:0 !important;font-size:16px !important;font-weight:600 !important;color:#1a1a1a !important;background:#faf9f7;}
body.woocommerce-order-received .woocommerce-columns--addresses .woocommerce-column{background:#faf9f7;border:1px solid #e5e0d8;padding:26px 28px;margin-top:18px;}
body.woocommerce-order-received address{font-style:normal !important;font-family:Jost,sans-serif !important;font-size:14px !important;line-height:1.9 !important;color:#444 !important;}
@media(max-width:767px){body.woocommerce-order-received .woocommerce-order-overview li{flex:1 1 100%;border-right:0 !important;border-bottom:1px solid #e5e0d8 !important;}body.woocommerce-order-received .woocommerce-order-overview li:last-child{border-bottom:0 !important;}}
/* ===== Header : espace icones coeur/panier (anti-chevauchement CONTACT) ===== */
.elementor-element-2b6d286{margin-right:88px !important;}
@media(max-width:1024px){.elementor-element-2b6d286{margin-right:72px !important;}}

/* ===== Bandeau consentement Complianz - Charte Hawaii ===== */
/* Bouton Accepter = style CTA principal du site (comme EXPLORER) : */
/* anthracite #343333, texte blanc, Jost 13px 500, uppercase, spacing 1.6px, carre */

.cmplz-cookiebanner {
    border-top: 3px solid #C9A24B !important;
    border-radius: 0 !important;
}
.cmplz-cookiebanner .cmplz-title { color: #1a1a1a !important; }

/* Tous les boutons : forme carree, typo Jost uppercase espacee */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    font-family: "Jost", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    padding: 15px 30px !important;
}

/* Accepter = CTA principal plein anthracite */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
    background-color: #343333 !important;
    border: 1px solid #343333 !important;
    color: #ffffff !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

/* Refuser = secondaire, meme forme, contour anthracite (au meme niveau, conforme CNIL) */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
    background-color: transparent !important;
    border: 1px solid #343333 !important;
    color: #343333 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover {
    background-color: #343333 !important;
    color: #ffffff !important;
}

/* Voir les preferences = secondaire, contour taupe */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
    background-color: transparent !important;
    border: 1px solid #9a8c78 !important;
    color: #343333 !important;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover {
    background-color: #9a8c78 !important;
    color: #ffffff !important;
}

/* Liens en or, touche de marque */
.cmplz-cookiebanner .cmplz-links a,
.cmplz-cookiebanner a {
    color: #C9A24B !important;
    text-decoration: underline !important;
}
.cmplz-cookiebanner .cmplz-links a:hover,
.cmplz-cookiebanner a:hover {
    color: #b8933f !important;
}

/* ===== Bas de page - letter-spacing (retour Sylvie : lettres trop resserrées) ===== */
/* Titres de colonnes du footer (majuscules) : on aère un peu */
.elementor-location-footer h3,
.elementor-location-footer .elementor-widget-heading h1,
.elementor-location-footer .elementor-widget-heading h2,
.elementor-location-footer .elementor-widget-heading h3 {
    letter-spacing: 1.5px;
}
/* Liens et texte courant du footer : aération douce */
.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-text,
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .menu-item a,
.elementor-location-footer p,
.elementor-location-footer li a,
.elementor-location-footer .elementor-widget-text-editor {
    letter-spacing: 0.6px;
}

/* ===== Retours Sylvie 07/2026 - lot A ===== */

/* Header : bande blanche affinee (min-height + logo) */
.elementor-element-70332e7f.e-con.e-con.e-con{min-height:88px;}
/* Logo : hauteur contrainte SANS deformation. La largeur (324px) est verrouillee par le */
/* reglage de largeur du widget Elementor -> width:auto est ignore et l aplatit horizontalement. */
/* object-fit:contain repeint l image a son ratio natif (1200x324) dans la boite existante. */
header .elementor-element-21d34d36 img{height:76px !important;max-height:76px !important;object-fit:contain !important;object-position:center !important;}
header #hw-fav-link{top:50% !important;transform:translateY(-50%);z-index:10;}
header #hw-cart-icon{top:50% !important;transform:translateY(-50%);z-index:10;}

/* Header : repartition du menu (desktop) - style LV, bords a 40px, items a 56px. */
/* Le partage de largeur egale entre groupe gauche et droit (donc le centrage du logo) est */
/* pose en inline par le script du template header : flex est verrouille par la @layer Elementor. */
@media (min-width:1025px){
header .elementor-element-70332e7f{padding-left:40px !important;padding-right:40px !important;gap:0 !important;}
/* Les blocs internes sont centres dans leur groupe (max-width + marges auto), ce qui */
/* recreait ~47px de vide sur les bords : on les force en pleine largeur. */
header .elementor-element-9cb6395>.e-con-inner,
header .elementor-element-436946b>.e-con-inner{width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;}
header .elementor-element-9cb6395>.e-con-inner{gap:56px !important;padding-left:0 !important;}
/* Reserve a droite pour le coeur et le panier (positionnes en absolu sur le header). */
header .elementor-element-436946b>.e-con-inner{padding-right:104px !important;}
header .elementor-element-436946b .elementor-element-2328286.elementor-element{margin-left:56px !important;}
header .elementor-element-436946b .elementor-element-2b6d286.elementor-element{margin-left:56px !important;margin-right:0 !important;}
}

/* Panier : doublon supprime - flottant FunnelKit masque (bas de page) */
/* (le 2e bouton header dans le DOM = spacer sticky Elementor invisible, aucune regle requise) */
#fkcart-floating-toggler{display:none !important;}

/* Menu droite : groupe pousse a droite, gaps harmonises 42px (style LV) */
header .elementor-element-436946b>.e-con-inner{justify-content:flex-end !important;gap:0 !important;}


/* Menu : casse harmonisee en minuscules sur tout le header (style LV - arbitrage Sylvie) */
header .elementor-element-98d25c9 .elementor-button-text,
header .elementor-element-7e4a322 .elementor-button-text,
header .elementor-element-336e069 .elementor-button-text,
header .elementor-element-2328286 .elementor-button-text,
header .elementor-element-2b6d286 .elementor-button-text{text-transform:none !important;}

/* Citation atelier : bloc resserre et centre */
body .elementor-element-wycqtjw .elementor-heading-title,
body .elementor-element-wycqtjw .elementor-widget-container>p{max-width:680px !important;margin-left:auto !important;margin-right:auto !important;}

/* Typo : test titre en Jost (H1 hero accueil) - validation Sylvie */
.page-id-10 .elementor-element-b56f4da .elementor-heading-title{font-family:'Jost',sans-serif !important;font-size:30px !important;font-weight:400 !important;letter-spacing:2.5px !important;text-transform:uppercase !important;font-style:normal !important;}

/* Accueil : header transparent superpose au hero, fond blanc en fondu au scroll (LV) */
/* Le fond blanc n est PAS une transition sur background-color : Elementor reecrit sans cesse */
/* le style inline du clone sticky, ce qui relance la transition a l infini (et une transition */
/* en cours bat meme un !important inline). On peint donc le blanc sur un ::before en opacite. */
.home .elementor-location-header{position:absolute;top:0;left:0;width:100%;z-index:99;}
.home header .elementor-element-70332e7f::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff;box-shadow:0 1px 0 rgba(26,26,26,.08);opacity:1;transition:opacity .3s cubic-bezier(.215,.61,.355,1);pointer-events:none;z-index:-1;}
.home.hw-header-top header .elementor-element-70332e7f::before{opacity:0;}

/* Mega-menu : alignement des panneaux sous la bande (leurs top etaient figes a 88 et 130px, */
/* desaccordes depuis le passage de la bande a 88px -> un vide apparaissait sous le header). */
header .hw-mm,
header .hw-mm2{top:88px !important;}
body.admin-bar header .hw-mm,
body.admin-bar header .hw-mm2{top:120px !important;}

/* Menus deroulants du bureau : pleine hauteur d ecran (01/09/2026).
   Les deux panneaux sont en position fixed avec un top deja cale sur la hauteur de
   l en-tete (88px, 120px avec la barre d admin). bottom:0 suffit donc a les faire
   descendre jusqu au bas de la fenetre, quelle que soit sa hauteur. Le min-height de
   620px de .hw-mm-inner est neutralise : sur un ecran court il imposait un plancher
   plus haut que la fenetre. Debordement eventuel du contenu : defilement interne. */
@media (min-width: 1025px){
header .hw-mm,
header .hw-mm2{ bottom: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; }
header .hw-mm-inner,
header .hw-mm2-inner{ min-height: 100% !important; height: 100% !important; }
}

/* Lookbook mis en avant dans la colonne Decouvrir du mega-menu (01/09/2026,
   arbitrage Sylvie : dore, dans le sous-menu et pas dans la barre principale).
   Cible le lien par son href : pas de classe a poser dans le widget HTML 419f5a7. */
header .hw-mm-col a[href='/lookbook/']{ color: #9a8c78 !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
header .hw-mm-col a[href='/lookbook/']:hover{ color: #7d7160 !important; }


/* Accueil : lettrage blanc sur le hero (etat haut), noir des que le fond blanc apparait. */
/* Le logo n a pas besoin d un 2e fichier : brightness(0) invert(1) transforme le lettrage */
/* noir sur fond transparent en blanc pur. */
header .elementor-element-70332e7f .elementor-button-text,
header #hw-fav-link,
header #hw-cart-icon{transition:color .3s cubic-bezier(.215,.61,.355,1);}
header .elementor-element-21d34d36 img{transition:filter .3s cubic-bezier(.215,.61,.355,1);}
.home.hw-header-top header .elementor-element-70332e7f .elementor-button-text,
.home.hw-header-top header .elementor-element-70332e7f a,
.home.hw-header-top header #hw-fav-link,
.home.hw-header-top header #hw-cart-icon{color:#ffffff !important;}
.home.hw-header-top header .elementor-element-21d34d36 img{filter:brightness(0) invert(1) !important;}
/* Lisibilite : le hero est tres clair (luminance 0,684) -> voile degrade sous le header, */
/* dense en haut et fondu vers le bas, present uniquement quand le lettrage est blanc. */
.home header .elementor-element-70332e7f::after{content:"";position:absolute;left:0;right:0;top:0;bottom:-36px;background:linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,.24) 55%,rgba(0,0,0,0) 100%);opacity:0;transition:opacity .3s cubic-bezier(.215,.61,.355,1);pointer-events:none;z-index:-1;}
.home.hw-header-top header .elementor-element-70332e7f::after{opacity:1;}

/* ===== Carousel univers (page Nos uniformes sur mesure) - controles facon Cultura ===== */
/* Espace reserve en bas pour la barre et les fleches, qui sortent de la zone des cartes. */
.elementor-element-78bdcf6 .swiper,.elementor-element-c0b98b3 .swiper{padding-bottom:66px;}
/* Barre de progression : passee du haut vers le bas, centree et raccourcie. */
.elementor-element-78bdcf6 .swiper-pagination-progressbar,.elementor-element-c0b98b3 .swiper-pagination-progressbar{top:auto !important;bottom:22px !important;left:50% !important;transform:translateX(-50%) !important;width:240px !important;height:3px !important;border-radius:2px !important;background:rgba(26,26,26,.20) !important;}
.elementor-element-78bdcf6 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,.elementor-element-c0b98b3 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:#1a1a1a !important;border-radius:2px !important;}
/* Fleches : carres contrastes en bas a droite (elles etaient en gris 238 a 25px, invisibles). */
.elementor-element-78bdcf6 .elementor-swiper-button,.elementor-element-c0b98b3 .elementor-swiper-button{width:46px !important;height:46px !important;display:flex !important;align-items:center;justify-content:center;top:auto !important;bottom:0 !important;transform:none !important;margin:0 !important;background:#ffffff !important;border:1px solid rgba(26,26,26,.28) !important;color:#1a1a1a !important;font-size:17px !important;opacity:1 !important;transition:background .25s ease,color .25s ease,border-color .25s ease;}
.elementor-element-78bdcf6 .elementor-swiper-button-prev,.elementor-element-c0b98b3 .elementor-swiper-button-prev{left:auto !important;right:58px !important;}
.elementor-element-78bdcf6 .elementor-swiper-button-next,.elementor-element-c0b98b3 .elementor-swiper-button-next{left:auto !important;right:0 !important;}
.elementor-element-78bdcf6 .elementor-swiper-button,.elementor-element-c0b98b3 .elementor-swiper-button{border-color:#1a1a1a !important;}
/* Le chevron est un SVG : c est son fill qui peint, pas la couleur du bouton. */
.elementor-element-78bdcf6 .elementor-swiper-button svg,.elementor-element-c0b98b3 .elementor-swiper-button svg{fill:#1a1a1a !important;width:20px !important;height:20px !important;}
.elementor-element-78bdcf6 .elementor-swiper-button:hover svg,.elementor-element-c0b98b3 .elementor-swiper-button:hover svg{fill:#ffffff !important;}
.elementor-element-78bdcf6 .elementor-swiper-button:hover,.elementor-element-c0b98b3 .elementor-swiper-button:hover{background:#1a1a1a !important;border-color:#1a1a1a !important;color:#ffffff !important;}
.elementor-element-78bdcf6 .elementor-swiper-button.swiper-button-disabled,.elementor-element-c0b98b3 .elementor-swiper-button.swiper-button-disabled{opacity:.4 !important;}

/* ===== Section Presentation (accueil) : visuel en carre ===== */
/* L image etait en object-fit:fill dans une colonne de 940px : donc etiree, et sa hauteur */
/* imposait celle de toute la section. Passage en carre 1:1 + recadrage propre (cover). */
.elementor-element-2f61135 img{aspect-ratio:1/1 !important;height:auto !important;width:100% !important;object-fit:cover !important;}
.elementor-element-f462562{align-items:center !important;}
.elementor-element-99d4db5{margin-top:auto !important;margin-bottom:auto !important;}
/* Conteneur resserre + carre de taille maitrisee : sans cela, le carre suit la largeur */
/* de l ecran (817px de cote en 1920) et ecrase la section. */
@media (min-width:1025px){
.elementor-element-f462562{max-width:1360px !important;margin-left:auto !important;margin-right:auto !important;gap:56px !important;}
/* Bloc texte en carre, identique au visuel : deux carres de 520 cote a cote. */
.elementor-element-99d4db5{flex:0 1 584px !important;width:auto !important;max-width:584px !important;display:flex !important;flex-direction:column !important;justify-content:center !important;}
.elementor-element-2f61135{flex:0 1 720px !important;width:auto !important;max-width:720px !important;}
}

/* ===== Paiement express (Apple Pay / Google Pay) : colonne de droite ===== */
/* Le formulaire de commande est un conteneur flex : on renvoie les boutons dans la */
/* colonne du recapitulatif via l ordre flex, en calant la meme largeur. */
@media (min-width:1025px){
form.checkout.woocommerce-checkout{flex-wrap:wrap;align-items:flex-start;}
form.checkout #wc-stripe-express-checkout-element,
form.checkout #wc-stripe-express-checkout-button-separator,
form.checkout .wc-stripe-express-checkout__separator{order:2 !important;width:498px !important;max-width:498px !important;margin-left:auto !important;}
form.checkout .woocommerce-checkout-review-order{order:3 !important;}
}

/* ===== FAQ pages metiers - design gabarit ===== */
/* Le shortcode genere deja des  natifs dans .hw-faq : simple habillage CSS. */
/* Le « + » est construit en 2 pseudo-elements ; la barre verticale pivote et s efface. */
.hw-faq{margin-top:34px;border-top:1px solid rgba(52,51,51,.14);}
.hw-faq details{border-bottom:1px solid rgba(52,51,51,.14);}
.hw-faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;font-family:'Jost',sans-serif;font-size:16px;font-weight:500;line-height:1.4;color:#343333;transition:color .3s cubic-bezier(.215,.61,.355,1);}
.hw-faq summary::-webkit-details-marker{display:none;}
.hw-faq summary:hover{color:#756857;}
.hw-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:1px;background:#1a1a1a;}
.hw-faq summary::before{content:"";position:absolute;right:11px;top:50%;width:1px;height:11px;margin-top:-5px;background:#1a1a1a;transition:opacity .3s cubic-bezier(.215,.61,.355,1),transform .5s cubic-bezier(.645,.045,.355,1);}
.hw-faq details[open] summary::before{opacity:0;transform:rotate(90deg);}
.hw-faq details>p{padding:0 60px 24px 0;margin:0;font-size:15px;line-height:1.7;color:#555;max-width:72ch;}
/* Accessibilite : focus clavier visible sur les questions. */
.hw-faq summary:focus-visible{outline:2px solid #756857;outline-offset:4px;}
/* Titre de section : passe du Cormorant 30px au surtitre du gabarit (Jost petites capitales taupe). */
.elementor-element-4d146f5 h2{font-family:'Jost',sans-serif !important;font-size:11px !important;font-weight:500 !important;line-height:1.4 !important;letter-spacing:1.6px !important;text-transform:uppercase !important;color:#756857 !important;margin:0 !important;}

/* ===== Sections promesse et RSE (pages metiers) ===== */
#hw-rse{padding:88px 40px;}
#hw-rse{background:#f7f4ef;}
#hw-promesse>.e-con-inner,#hw-rse>.e-con-inner{max-width:1060px;margin:0 auto;}
/* Surtitre : meme traitement que la FAQ du gabarit. */
#hw-promesse-surtitre .elementor-heading-title,
#hw-rse-surtitre .elementor-heading-title{font-family:'Jost',sans-serif !important;font-size:11px !important;font-weight:500 !important;letter-spacing:1.6px !important;text-transform:uppercase !important;color:#756857 !important;margin:0 0 14px !important;}
/* Titre de section : Cormorant, bas de casse, charte maison. */
#hw-promesse h2.elementor-heading-title,
#hw-rse h2.elementor-heading-title{font-family:'Cormorant Garamond',serif !important;font-size:40px !important;font-weight:600 !important;line-height:1.25 !important;color:#343333 !important;margin:0 0 22px !important;max-width:22ch;}
#hw-promesse p{font-size:16px;line-height:1.7;color:#555;max-width:68ch;margin:0 0 16px;}
#hw-rse .hw-rse-chapo{font-size:16px;line-height:1.7;color:#343333;max-width:62ch;margin:0 0 46px;}
/* Les 4 engagements : grille 2 colonnes, filet superieur pour marquer la separation. */
#hw-rse .hw-rse-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 56px;}
#hw-rse .hw-rse-grille h3{font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#1a1a1a;margin:0 0 12px;padding-top:18px;border-top:1px solid rgba(52,51,51,.14);}
#hw-rse .hw-rse-grille p{font-size:14px;line-height:1.75;color:#555;margin:0;}
@media (max-width:1024px){
#hw-rse{padding:60px 24px;}
#hw-rse .hw-rse-grille{grid-template-columns:1fr;gap:32px;}
#hw-promesse h2.elementor-heading-title,#hw-rse h2.elementor-heading-title{font-size:29px !important;}
}

/* ===== Formulaire pages metiers : meme rendu que celui de l accueil ===== */
/* Le formulaire copie de l accueil s etalait sur 1361px (champs de 692px) au lieu de 525px. */
@media (min-width:1025px){
/* Section reconstruite par Maxence : ids 1601c83/ac7c768 remplaces par 37738d20/417e0882. */
/* Formulaire pages metiers : la mise en page 2 colonnes et la carte blanche sont */
/* desormais gerees dans Elementor (conteneurs 33da800 et 0629743). */
/* Ne restent ici que les styles de champs, alignes sur ceux de l accueil. */
.elementor-element-37738d20 .elementor-field-group input:not([type=checkbox]),
.elementor-element-37738d20 .elementor-field-group select,
.elementor-element-37738d20 .elementor-field-group textarea{background-color:#ffffff !important;border-color:#dcdcd7 !important;}
.elementor-element-37738d20 .elementor-field-group input:not([type=checkbox]),
.elementor-element-37738d20 .elementor-field-group select{min-height:52px !important;}
/* Taille de police des champs alignee sur l accueil (15px, elle etait a 18px). */
.elementor-element-37738d20 .elementor-field-group input:not([type=checkbox]),
.elementor-element-37738d20 .elementor-field-group select,
.elementor-element-37738d20 .elementor-field-group textarea{font-size:15px !important;}

}
/* ===== Hero pages metiers : photo posee au sol, texte et photo centres ensemble ===== */
/* La photo flottait (130px du bas) avec ombre et coins arrondis. Elle est desormais */
/* collee au bas de la section, agrandie, et reste dans la grille de 1180px pour ne pas */
/* creer un vide de 740px entre le texte et elle (reference Marcy). */
@media (min-width:1025px){
.elementor-element-70acf6ca{padding-bottom:0 !important;overflow:hidden;}
.elementor-element-70acf6ca>.e-con-inner{max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:140px !important;padding-right:140px !important;padding-bottom:0 !important;padding-top:30px !important;}
.elementor-element-feffc4b{padding-bottom:0 !important;align-items:flex-end !important;}
.elementor-element-bb8cb31{align-self:flex-end !important;margin-bottom:0 !important;}
/* Le bloc texte heritait du flex-end pose pour la photo : on le recentre verticalement. */
.elementor-element-bf239c1{align-self:center !important;}
/* Colonnes du hero a largeur fixe : sans cela, un titre court (ex. « Accueil ») laisse */
/* un vide de 709px entre le texte et la photo, contre 48px sur un titre long. */
/* Colonnes en largeur FIXE et bloc centre : la photo detouree contient du vide lateral */
/* dans le fichier (personnages sur 493px pour une boite de 717px). En calant la boite sur */
/* la largeur reelle des personnages, l ecart avec le texte passe de 390px a 24px. */
.elementor-element-feffc4b{justify-content:flex-start !important;gap:24px !important;}
.elementor-element-bf239c1{flex:0 0 700px !important;max-width:700px !important;}
/* Position horizontale de la photo : 300px apres la colonne texte. Valeur ajustable ici. */
.elementor-element-bb8cb31{flex:0 0 540px !important;max-width:540px !important;margin-left:120px !important;}
.elementor-element-bb8cb31 img{box-shadow:none !important;border-radius:0 !important;display:block;width:100% !important;max-width:100% !important;height:auto !important;max-height:min(920px, calc(100vh - 150px)) !important;margin:0 0 0 auto !important;object-fit:contain !important;object-position:bottom center !important;}
}

/* ===== Grille commune pages metiers : toutes les sections sur le meme axe ===== */
/* Releve avant harmonisation : le texte demarrait a 0, 130, 363, 387, 423, 573, 621 et 880px */
/* selon la section. Reference retenue : la grille du hero, 1180px centree. */
@media (min-width:1025px){
.elementor-element-1778034>.e-con-inner,
.elementor-element-6890ed7>.e-con-inner,
.elementor-element-d31e728>.e-con-inner,
.elementor-element-37738d20>.e-con-inner{max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:140px !important;padding-right:140px !important;}
/* Sections dont le conteneur est pleine largeur : on cale le contenu par le padding. */

/* Le shortcode PHP impose ses propres largeurs (1200px) : on les ramene a 1180. */
.hw-band__inner,.hw-steps,.hw-faq,.hw-final__inner{max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:140px !important;padding-right:140px !important;}
}

/* Rattrapage par padding : sur ces sections max-width est verrouille a 100% par Elementor, */
/* on cale donc le contenu avec un padding lateral calcule pour retomber sur l axe 1180px. */
@media (min-width:1025px){
.elementor-element-6333eac>.e-con-inner,
.elementor-element-6b10da14>.e-con-inner,
.elementor-element-4e4b1b78>.e-con-inner,
.elementor-element-752e6ba>.e-con-inner{max-width:none !important;padding-left:140px !important;padding-right:140px !important;}
.elementor-element-37738d20>.e-con-inner{padding-left:140px !important;padding-right:140px !important;}
/* Le shortcode PHP centre ses titres : on les repasse a gauche pour suivre l axe commun. */
.hw-band__head,.hw-steps__head{text-align:left !important;margin-left:0 !important;max-width:760px;}
.elementor-element-d31e728 .elementor-widget-container{text-align:left !important;}
}

/* Ces sections sont des conteneurs pleine largeur SANS .e-con-inner : le contenu est */
/* enfant direct. Le padding doit donc etre pose sur la section elle-meme. */
@media (min-width:1025px){
.elementor-element-6333eac,
.elementor-element-4e4b1b78,
.elementor-element-37738d20,
.elementor-element-752e6ba{padding-left:140px !important;padding-right:140px !important;}
/* Section process : son titre reste centre dans sa grille, on l aligne a gauche. */
.elementor-element-d31e728,.elementor-element-d31e728 .elementor-widget-container{text-align:left !important;}
}

/* Bande de logos : pleine largeur, sans padding lateral (le logo Chanel etait coupe). */
@media (min-width:1025px){
.elementor-element-6b10da14{padding-left:0 !important;padding-right:0 !important;}
/* Sections dont le contenu est pousse au centre par un conteneur intermediaire : */
/* on ramene les blocs a gauche (le texte lui-meme etait deja aligne a gauche). */
.elementor-element-6333eac>*,
.elementor-element-4e4b1b78>*,
.elementor-element-d31e728>*{margin-left:0 !important;margin-right:auto !important;}
.elementor-element-4e4b1b78,.elementor-element-d31e728{align-items:flex-start !important;}
}

/* Detail produit : un conteneur intermediaire etait limite a 1180px avec une marge */
/* gauche automatique de 338px, ce qui poussait tout le bloc au centre. */
@media (min-width:1025px){
.elementor-element-6333eac>.e-child,
.elementor-element-6333eac>div{max-width:none !important;margin-left:0 !important;margin-right:0 !important;}
}

/* Detail produit : le widget HTML porte sa propre classe .perso-wrap en max-width 1180px */
/* + margin auto, d ou le centrage a 387px. On l aligne sur les 80px des autres sections. */
@media (min-width:1025px){
.elementor-element-6333eac .perso-wrap{max-width:none !important;margin-left:0 !important;margin-right:0 !important;padding-left:116px !important;padding-right:116px !important;}
}

/* ===== Blocs ex-shortcode : design editorial (Cormorant + Jost, or en accent rare) ===== */

/* --- Pourquoi choisir : grille editoriale, filet en tete de chaque atout --- */
#hw-atouts h2{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;line-height:1.2;color:#343333;margin:0 0 18px;max-width:none;}
#hw-atouts>.e-con-inner>.elementor-widget-text-editor p{font-family:'Jost',sans-serif;font-size:16px;line-height:1.75;color:#6b6b66;max-width:58ch;margin:0 0 64px;}
#hw-atouts-grille{counter-reset:atout;row-gap:52px !important;column-gap:56px !important;}
#hw-atouts-grille>.e-con{position:relative;padding-top:26px !important;border-top:1px solid rgba(52,51,51,.16);counter-increment:atout;}
/* Numero en flux (le positionnement absolu ne prenait pas et le compteur affichait 0). */
#hw-atouts-grille>.e-con::before{content:counter(atout,decimal-leading-zero) " ";display:block;font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:.14em;color:#C9A24B;margin:0 0 14px;}
#hw-atouts-grille h3{font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#1a1a1a;margin:0 0 12px;}
#hw-atouts-grille p{font-family:'Jost',sans-serif;font-size:16px;line-height:1.8;color:#6b6b66;margin:0;max-width:34ch;}

/* --- Trois etapes : chiffres en Cormorant dore, relies par un filet continu --- */
#hw-etapes h2{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;line-height:1.2;color:#343333;margin:0 0 62px;max-width:none;}
#hw-etapes-grille{position:relative;column-gap:56px !important;}
#hw-etapes-grille::before{content:"";position:absolute;top:34px;left:12%;right:12%;height:1px;background:rgba(52,51,51,.14);}
#hw-etapes-grille>.e-con{position:relative;}
#hw-etapes-grille [id^=hw-etape-num] .elementor-heading-title{font-family:'Cormorant Garamond',serif;font-size:58px;font-weight:600;line-height:1;color:#C9A24B;background:#ffffff;display:inline-block;padding:0 20px 0 0;margin:0 0 22px;position:relative;z-index:1;}
#hw-etapes-grille h3{font-family:'Jost',sans-serif;font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#1a1a1a;margin:0 0 12px;}
#hw-etapes-grille p{font-family:'Jost',sans-serif;font-size:16px;line-height:1.8;color:#6b6b66;margin:0;max-width:32ch;}

/* --- FAQ : filets fins, plus construit en pseudo-elements, largeur de lecture bridee --- */
#hw-faq-surtitre .elementor-heading-title{font-family:'Jost',sans-serif;font-size:11px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:#756857;margin:0 0 30px;}
#hw-faq-sec .elementor-accordion{max-width:none;border-top:1px solid rgba(52,51,51,.14);}
#hw-faq-sec .elementor-accordion-item{border:none !important;border-bottom:1px solid rgba(52,51,51,.14) !important;}
#hw-faq-sec .elementor-tab-title{background:transparent !important;padding:24px 44px 24px 0 !important;position:relative;transition:color .3s cubic-bezier(.215,.61,.355,1);}
#hw-faq-sec .elementor-tab-title a{font-family:'Jost',sans-serif;font-size:16px;font-weight:500;color:#343333 !important;}
#hw-faq-sec .elementor-tab-title:hover a{color:#756857 !important;}
#hw-faq-sec .elementor-accordion-icon{display:none !important;}
#hw-faq-sec .elementor-tab-title::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:1px;background:#1a1a1a;}
#hw-faq-sec .elementor-tab-title::before{content:"";position:absolute;right:11px;top:50%;width:1px;height:11px;margin-top:-5px;background:#1a1a1a;transition:opacity .3s cubic-bezier(.215,.61,.355,1),transform .5s cubic-bezier(.645,.045,.355,1);}
#hw-faq-sec .elementor-tab-title.elementor-active::before{opacity:0;transform:rotate(90deg);}
#hw-faq-sec .elementor-tab-content{background:transparent !important;border:none !important;padding:0 44px 26px 0 !important;font-family:'Jost',sans-serif;font-size:15px;line-height:1.75;color:#6b6b66;max-width:80ch;}

/* --- Bloc final : fond anthracite, bouton en contour --- */
#hw-cta-final{text-align:center;}
#hw-cta-surtitre .elementor-heading-title{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff;margin:0 0 14px;}
#hw-cta-final p{font-family:'Jost',sans-serif;font-size:15px;line-height:1.75;color:rgba(255,255,255,.72);margin:0 auto 30px;max-width:52ch;}
#hw-cta-bouton .elementor-button{background:transparent !important;border:1px solid rgba(255,255,255,.55) !important;color:#fff !important;font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:15px 34px;border-radius:0;transition:background .3s cubic-bezier(.215,.61,.355,1),color .3s cubic-bezier(.215,.61,.355,1),border-color .3s cubic-bezier(.215,.61,.355,1);}
#hw-cta-bouton .elementor-button:hover{background:#fff !important;border-color:#fff !important;color:#1a1a1a !important;}

@media (max-width:1024px){
#hw-atouts h2,#hw-etapes h2{font-size:28px;}
#hw-etapes-grille::before{display:none;}
#hw-atouts-grille>.e-con,#hw-etapes-grille>.e-con{width:100% !important;}
}

/* Marges laterales des 4 sections ex-shortcode (leur padding vient d Elementor). */
@media (min-width:1025px){
#hw-atouts,#hw-etapes,#hw-faq-sec,#hw-cta-final{padding-left:140px !important;padding-right:140px !important;}
}

/* Bouton process, rapatrie de l ancienne section « Notre Process » (supprimee). */
#hw-etapes-bouton{margin-top:52px;}
#hw-etapes-bouton .elementor-button{background:#1a1a1a !important;color:#fff !important;font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:16px 34px;border-radius:0;border:1px solid #1a1a1a !important;transition:background .3s cubic-bezier(.215,.61,.355,1),color .3s cubic-bezier(.215,.61,.355,1);}
#hw-etapes-bouton .elementor-button:hover{background:transparent !important;color:#1a1a1a !important;}
/* Bouton process dans la section etapes */


/* ===== Correctifs debordement horizontal ===== */

/* Filet decoratif des etapes : Elementor applique width:100% sur .e-con::before,
   ce qui ecrase le right:12% et fait finir le trait 9px au-dela du viewport. */
#hw-etapes-grille::before{width:auto;}

/* Hero : les deux colonnes etaient non retrecissables (flex:0 0).
   700 + 24 (gap) + 120 (marge) + 540 = 1384px exiges pour 1193px disponibles,
   d ou la photo rognee de 27px sous environ 1680px de large.
   flex:0 1 conserve les tailles cibles sur grand ecran et autorise le retrecissement. */
@media (min-width:1025px){
.elementor-element-bf239c1{flex:0 1 700px !important;}
.elementor-element-bb8cb31{flex:0 1 540px !important;margin-left:min(120px,6vw) !important;}
}


/* ===== La marque - Depuis 1986 : chiffre filigrane ===== */
/* Le grand 1986 est un pseudo-element : aucun widget ajoute, aucun impact sur le DOM. */
/* La reservation de hauteur se fait via le padding du widget (regle dans Elementor). */
.elementor-element-80d73b9{position:relative;}
.elementor-element-80d73b9::before{
content:"1986";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-family:"Cormorant Garamond",serif;
font-weight:400;
font-size:486px;
line-height:1;
letter-spacing:0;
color:#E7E2DF;
z-index:0;
pointer-events:none;
-webkit-user-select:none;
user-select:none;
white-space:nowrap;
}
.elementor-element-80d73b9 .elementor-heading-title{position:relative;z-index:1;}

/* Libelle en anthracite comme la maquette. Specificite triplee pour passer devant
   les 6 regles "accents dores" en !important definies plus haut.
   Pour revenir au dore : supprimer la ligne ci-dessous. */
.elementor-element-80d73b9.elementor-element-80d73b9.elementor-element-80d73b9 .elementor-heading-title{color:#1A1A1A !important;}

@media(max-width:1024px){
.elementor-element-80d73b9::before{font-size:330px;}
}
@media(max-width:767px){
.elementor-element-80d73b9::before{font-size:200px;}
}


/* ===== Animations douces au defilement =====
   Anime UNIQUEMENT le contenu (.page-content et le single CPT univers).
   L'en-tete et le pied de page ne sont jamais touches.

   Technique : animations pilotees par le scroll, 100% CSS, ZERO JavaScript.
   Le voile @supports garantit que les navigateurs qui ne savent pas faire
   affichent le contenu normalement (jamais de texte invisible).
   Respecte "reduire les animations" du systeme. */

@keyframes hwFadeUp{
from{opacity:0;transform:translateY(22px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes hwFadeIn{
from{opacity:0;}
to{opacity:1;}
}

@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){

/* Blocs de contenu : fondu + legere montee */
[data-elementor-type="wp-page"] > .e-con.e-parent > .e-con-inner > *,
[data-elementor-type="single-page"] > .e-con.e-parent > .e-con-inner > *,
[data-elementor-type="single-post"] > .e-con.e-parent > .e-con-inner > *,
[data-elementor-type="wp-page"] .elementor-top-section .elementor-widget,
[data-elementor-type="single-page"] .elementor-top-section .elementor-widget,
[data-elementor-type="wp-page"] > .e-con.e-parent.e-con-full > *,
[data-elementor-type="single-page"] > .e-con.e-parent.e-con-full > *,
[data-elementor-type="single-post"] > .e-con.e-parent.e-con-full > *,
[data-elementor-type="single-post"] .elementor-top-section .elementor-widget{
animation:hwFadeUp .9s cubic-bezier(.22,.61,.36,1) both;
animation-timeline:view();
animation-range:entry 0px entry 320px;
}

/* Enfants de grille : leger decalage pour un effet de cascade */
[data-elementor-type="wp-page"] > .e-con.e-parent .e-con-inner > .e-con > .e-con:nth-child(2),
[data-elementor-type="single-page"] > .e-con.e-parent .e-con-inner > .e-con > .e-con:nth-child(2){
animation-range:entry 60px entry 380px;
}
[data-elementor-type="wp-page"] > .e-con.e-parent .e-con-inner > .e-con > .e-con:nth-child(3),
[data-elementor-type="single-page"] > .e-con.e-parent .e-con-inner > .e-con > .e-con:nth-child(3){
animation-range:entry 12% cover 32%;
}
[data-elementor-type="wp-page"] > .e-con.e-parent .e-con-inner > .e-con > .e-con:nth-child(n+4),
[data-elementor-type="single-page"] > .e-con.e-parent .e-con-inner > .e-con > .e-con:nth-child(n+4){
animation-range:entry 120px entry 440px;
}

/* Le chiffre filigrane 1986 : simple fondu, sans deplacement */
.elementor-element-80d73b9::before{
animation:hwFadeIn 1.4s ease both;
animation-timeline:view();
animation-range:entry 0px entry 400px;
}

}
}

/* Transitions douces sur les elements interactifs (toutes plateformes) */
[data-elementor-type="wp-page"] .elementor-button,
[data-elementor-type="single-page"] .elementor-button,
[data-elementor-type="single-post"] .elementor-button{
transition:background-color .35s cubic-bezier(.22,.61,.36,1),color .35s cubic-bezier(.22,.61,.36,1),transform .35s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: no-preference){
[data-elementor-type="wp-page"] .elementor-button:hover,
[data-elementor-type="single-page"] .elementor-button:hover,
[data-elementor-type="single-post"] .elementor-button:hover{transform:translateY(-2px);}
}


/* ===== RSE : mise en cartes (structure inspiree d'EcoFarms) =====
   Blocs blancs poses sur fond colore, angles arrondis, ombre douce.
   Typographie et palette Hawaii conservees (Cormorant / Jost / creme / vert / or). */

/* Les enfants de grille deviennent des cartes */
.page-id-2148 [data-elementor-type="wp-page"] .e-con.e-parent .e-con-inner > .e-con > .e-con{
background:#FFFFFF;
padding:32px 28px !important;
border-top:0 !important;
box-shadow:0 1px 2px rgba(26,26,26,.05), 0 10px 28px rgba(26,26,26,.07);
transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: no-preference){
.page-id-2148 [data-elementor-type="wp-page"] .e-con.e-parent .e-con-inner > .e-con > .e-con:hover{
transform:translateY(-4px);
box-shadow:0 2px 4px rgba(26,26,26,.06), 0 18px 40px rgba(26,26,26,.10);
}
}

/* Sur fond vert : cartes translucides pour garder la profondeur */
.page-id-2148 .e-con.e-parent.elementor-element-9e5ea26 .e-con-inner > .e-con > .e-con,
.page-id-2148 .e-con.e-parent.elementor-element-f283e96 .e-con-inner > .e-con > .e-con{
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.16);
box-shadow:none;
}

/* La carte doit rester lisible : le filet dore des numeros remplace le trait du haut */
.page-id-2148 [data-elementor-type="wp-page"] .e-con.e-parent .e-con-inner > .e-con > .e-con > .elementor-widget-heading:first-child{
padding-bottom:14px;
border-bottom:1px solid rgba(201,162,75,.35);
margin-bottom:18px !important;
}

/* Les logos de certification ne sont pas des cartes : fond neutre, sans ombre */
.page-id-2148 .e-con.e-parent.elementor-element-231ac64 .e-con-inner > .e-con > .e-con{
background:#F7F6F2;
box-shadow:none;
padding:26px 18px !important;
}
.page-id-2148 .e-con.e-parent.elementor-element-231ac64 .e-con-inner > .e-con > .e-con > .elementor-widget-heading:first-child{
border-bottom:0;
padding-bottom:0;
}

/* Images arrondies facon EcoFarms */


/* ===== Boutons : traitement unifie =====
   Scope limite au CONTENU : l'en-tete et le pied de page ne sont pas touches.
   Forme et transition inspirees d'EcoFarms (rayon 6px), couleurs charte Hawaii. */

[data-elementor-type="wp-page"] .elementor-button.elementor-button.elementor-button,
[data-elementor-type="single-page"] .elementor-button.elementor-button.elementor-button,
[data-elementor-type="single-post"] .elementor-button.elementor-button.elementor-button{
border-radius:0 !important;
padding:19px 42px !important;
letter-spacing:1.8px !important;
font-family:"Jost",sans-serif;
font-size:13px;
font-weight:500;
line-height:1;
border:0;
transition:background-color .35s cubic-bezier(.22,.61,.36,1),
           color .35s cubic-bezier(.22,.61,.36,1),
           transform .35s cubic-bezier(.22,.61,.36,1),
           box-shadow .35s cubic-bezier(.22,.61,.36,1);
}

/* Etat de survol : leger relief plutot qu un simple changement de teinte */
@media (prefers-reduced-motion: no-preference){
[data-elementor-type="wp-page"] .elementor-button:hover,
[data-elementor-type="single-page"] .elementor-button:hover,
[data-elementor-type="single-post"] .elementor-button:hover{
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(26,26,26,.18);
}
}

/* Focus clavier visible : accessibilite */
[data-elementor-type="wp-page"] .elementor-button:focus-visible,
[data-elementor-type="single-page"] .elementor-button:focus-visible,
[data-elementor-type="single-post"] .elementor-button:focus-visible{
outline:2px solid #C9A24B;
outline-offset:3px;
}

/* Page RSE : boutons en vert de la charte plutot qu en anthracite.
   Specificite triplee pour passer devant la regle globale en !important. */
.page-id-2148 [data-elementor-type="wp-page"] .elementor-button.elementor-button.elementor-button{
background-color:#1A1A1A !important;
color:#FFFFFF !important;
}
.page-id-2148 [data-elementor-type="wp-page"] .elementor-button.elementor-button.elementor-button:hover{
background-color:#35422F !important;
}


/* ===== RSE : onglets ateliers =====
   Elementor applique son vert accent par defaut sur l onglet actif.
   On repasse sur le vert de la charte + carte centree verticalement. */

.page-id-2148 .elementor-widget-n-tabs .e-n-tab-title{
background-color:transparent !important;
border:1px solid rgba(26,26,26,.20) !important;
border-radius:0 !important;
padding:13px 26px !important;
font-family:"Jost",sans-serif !important;
font-size:14px !important;
font-weight:500 !important;
letter-spacing:1.6px !important;
color:rgba(26,26,26,.62) !important;
transition:background-color .35s cubic-bezier(.22,.61,.36,1),
           color .35s cubic-bezier(.22,.61,.36,1),
           border-color .35s cubic-bezier(.22,.61,.36,1) !important;
}
.page-id-2148 .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"]{
background-color:#1A1A1A !important;
border-color:#1A1A1A !important;
color:#FFFFFF !important;
}
.page-id-2148 .elementor-widget-n-tabs .e-n-tab-title:hover:not([aria-selected="true"]){
color:#1A1A1A !important;
border-color:rgba(26,26,26,.32) !important;
}
.page-id-2148 .elementor-widget-n-tabs .e-n-tab-title:focus-visible{
outline:2px solid #C9A24B !important;
outline-offset:3px !important;
}

/* Carte de contenu centree dans le visuel */
.page-id-2148 .elementor-widget-n-tabs .e-n-tabs-content > .e-con{
align-items:center !important;
}


/* ===== Angles vifs : conformite charte =====
   La DA Hawaii n utilise pas d arrondis. On neutralise ceux poses
   par les reglages Elementor du composant a onglets et des images. */
.page-id-2148 [data-elementor-type="wp-page"] .e-con,
.page-id-2148 [data-elementor-type="wp-page"] .e-con-inner,
.page-id-2148 [data-elementor-type="wp-page"] .elementor-widget-image img,
.page-id-2148 [data-elementor-type="wp-page"] .elementor-widget-n-tabs .e-n-tabs-content > .e-con,
.page-id-2148 [data-elementor-type="wp-page"] .elementor-widget-n-tabs .e-n-tab-title{
border-radius:0 !important;
}


/* ===== RSE : bloc final (inspiration EcoFarms) =====
   Surlignage d un mot dans le titre + bouton contour sur fond vert.
   Angles vifs conformes a la DA. */

.page-id-2148 .hw-surligne{
background:#F7F6F2;
color:#1A1A1A;
padding:2px 14px 4px;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}

.page-id-2148 .hw-cta-contour .elementor-button{
background-color:transparent !important;
color:#FFFFFF !important;
border:1px solid rgba(255,255,255,.55) !important;
}
.page-id-2148 .hw-cta-contour .elementor-button:hover{
background-color:#FFFFFF !important;
color:#1A1A1A !important;
border-color:#FFFFFF !important;
}


/* ===== RSE : section 2028 en beige =====
   Beige #E7E2DF, le meme que le chiffre filigrane de la page La Marque.
   Couvre le grand 2028, les trois chiffres des cartes et leur filet. */
.page-id-2148 .elementor-element-f283e96 .elementor-heading-title{
color:#E7E2DF !important;
}
.page-id-2148 .elementor-element-f283e96 .e-con-inner > .e-con > .e-con .elementor-widget-heading:last-child .elementor-heading-title{
color:rgba(255,255,255,.72) !important;
}
.page-id-2148 .elementor-element-f283e96 .e-con-inner > .e-con > .e-con > .elementor-widget-heading:first-child{
border-bottom-color:rgba(231,226,223,.35) !important;
}


/* ===== RSE : bloc formulaire en deux colonnes =====
   Sur ce bloc, les 6 widgets sont a plat dans un conteneur en colonne
   (contrairement au meme bloc des pages univers, structure en 2 colonnes).
   On les repartit en grille : texte a gauche, formulaire a droite. */

@media (min-width:1025px){
.page-id-2148 .elementor-element-462fffe{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
column-gap:80px;
row-gap:0;
align-items:start;
}
/* colonne gauche */
.page-id-2148 .elementor-element-462fffe > .elementor-element-119bdf22{grid-column:1;grid-row:1;}
.page-id-2148 .elementor-element-462fffe > .elementor-element-1535668a{grid-column:1;grid-row:2;}
.page-id-2148 .elementor-element-462fffe > .elementor-element-7a82b324{grid-column:1;grid-row:3;}
/* colonne droite : le formulaire occupe toute la hauteur */
.page-id-2148 .elementor-element-462fffe > .elementor-element-786fd7e5{
grid-column:2;
grid-row:1 / span 4;
}
/* blocs de style techniques : sans effet sur la grille */
.page-id-2148 .elementor-element-462fffe > .elementor-element-329c1ec7,
.page-id-2148 .elementor-element-462fffe > .elementor-element-58a0ba1{
grid-column:1;
grid-row:4;
}
}


/* ===== Lookbook - acces protege (formulaire de code) ===== */
.hw-lb-gate { background: #F5F2ED; padding: 100px 20px; text-align: center; }
.hw-lb-inner { max-width: 620px; margin: 0 auto; }
.hw-lb-gate .hw-lb-sur { font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 4px; color: #9a8c7a; margin: 0; }
.hw-lb-gate .hw-lb-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 46px; line-height: 1.2; color: #1a1a1a; margin: 14px 0 0; }
.hw-lb-gate .hw-lb-txt { font-family: 'Jost', sans-serif; font-size: 16px; line-height: 1.9; color: #4a4a4a; margin: 20px 0 0; }
.hw-lb-gate .hw-lb-err { font-family: 'Jost', sans-serif; font-size: 14px; color: #a33; margin: 18px 0 0; }
.hw-lb-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.hw-lb-form input[type=password] { font-family: 'Jost', sans-serif; font-size: 15px; letter-spacing: 1px; padding: 15px 20px; min-width: 260px; border: 1px solid #d6cfc4; background: #fff; color: #1a1a1a; border-radius: 0; }
.hw-lb-form input[type=password]:focus { outline: none; border-color: #C9A24B; }
.hw-lb-form button { font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; padding: 15px 32px; border: 1px solid #1a1a1a; background: #1a1a1a; color: #fff; cursor: pointer; transition: background .25s ease, color .25s ease; }
.hw-lb-form button:hover { background: transparent; color: #1a1a1a; }
.hw-lb-gate .hw-lb-help { font-family: 'Jost', sans-serif; font-size: 14px; color: #7a7a7a; margin: 24px 0 0; }
.hw-lb-gate .hw-lb-help a { color: #9a8c7a; text-decoration: underline; }
@media (max-width: 767px) {
  .hw-lb-gate { padding: 70px 18px; }
  .hw-lb-gate .hw-lb-title { font-size: 34px; }
  .hw-lb-form input[type=password] { min-width: 0; width: 100%; }
  .hw-lb-form button { width: 100%; }
}


/* ===== Lookbook - filtre par categorie ===== */
#lookbook-filtre .e-filter { justify-content: center; gap: 6px; flex-wrap: wrap; }
#lookbook-filtre .e-filter-item {
  font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: #7a7a7a; background: transparent; border: none; border-bottom: 1px solid transparent;
  padding: 8px 14px; cursor: pointer; transition: color .25s ease, border-color .25s ease;
}
#lookbook-filtre .e-filter-item:hover { color: #1a1a1a; }
#lookbook-filtre .e-filter-item[aria-pressed='true'] {
  color: #1a1a1a; border-bottom-color: #C9A24B;
}
@media (max-width: 767px) {
  #lookbook-filtre .e-filter { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  #lookbook-filtre .e-filter-item { font-size: 12px; padding: 8px 10px; white-space: nowrap; }
}


/* ===== Onglets ateliers RSE - survol et lisibilite ===== */
.page-id-2148 .elementor-widget-n-tabs .e-n-tab-title[aria-selected='false']:hover {
  color: #1A1A1A !important;
  border-color: #9a8c78 !important;
  background-color: rgba(154,140,120,0.06) !important;
}
.page-id-2148 .elementor-widget-n-tabs .e-n-tab-title {
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 12.5px;
}
.page-id-2148 .elementor-widget-n-tabs .e-n-tab-title:focus-visible {
  outline: 2px solid #C9A24B;
  outline-offset: 2px;
}


/* ===== Onglets ateliers RSE (page historique) - alignes sur la refonte ===== */
.page-id-1176 .elementor-widget-n-tabs .e-n-tab-title {
  font-family: 'Jost', sans-serif;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 13px 26px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  border: 1px solid rgba(26,26,26,.20) !important;
  color: rgba(26,26,26,.62) !important;
  transition: color .25s, border-color .25s, background-color .25s;
}
.page-id-1176 .elementor-widget-n-tabs .e-n-tab-title[aria-selected='true'] {
  background-color: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #FFFFFF !important;
}
.page-id-1176 .elementor-widget-n-tabs .e-n-tab-title[aria-selected='false']:hover {
  color: #1A1A1A !important;
  border-color: #9a8c78 !important;
  background-color: rgba(154,140,120,0.06) !important;
}
.page-id-1176 .elementor-widget-n-tabs .e-n-tab-title:focus-visible {
  outline: 2px solid #C9A24B;
  outline-offset: 2px;
}


/* ===== Lookbook - colonne filtre collante (droite) ===== */
#lookbook-colonne-filtre {
  position: sticky;
  top: 130px;
  align-self: flex-start;
}
#lookbook-filtre .e-filter {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
#lookbook-filtre .e-filter-item {
  text-align: left;
  justify-content: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,26,26,0.08);
  width: 100%;
}
#lookbook-filtre .e-filter-item:last-child { border-bottom: none; }
#lookbook-filtre .e-filter-item[aria-pressed='true'] {
  border-bottom-color: #C9A24B;
}
@media (max-width: 1024px) {
  #lookbook-colonne-filtre { position: static; width: 100% !important; padding-left: 0 !important; }
  #lookbook-filtre .e-filter { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  #lookbook-filtre .e-filter-item { width: auto; padding: 8px 12px; border-bottom: 1px solid transparent; }
}


/* ===== Blocs partages - lien edition (admins) ===== */
.hu-shared { position: relative; }
.hu-edit-tpl {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  background: #1A1A1A;
  color: #fff !important;
  font-family: Jost, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 14px;
  text-decoration: none !important;
  opacity: 0.25;
  transition: opacity .2s;
}
.hu-shared:hover .hu-edit-tpl { opacity: 1; }


/* ===== Fiches univers - correctifs UX du 25/08/2026 (Linko) ===== */
/* 1 - Case de consentement : 13px -> 24px (WCAG 2.5.8) */
.elementor-field-type-acceptance input[type="checkbox"]{
  inline-size:24px; block-size:24px; accent-color:#1A1A1A;
  margin-inline-end:10px; flex:none;
}
.elementor-field-type-acceptance .elementor-field-option{
  display:flex; align-items:flex-start; gap:4px;
}

/* 2 - Focus clavier visible (aucun style de focus propre au site) */
.single-uniformes_sur_mesure :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #1A1A1A; outline-offset:3px; border-radius:2px;
}

/* 3 - L'en-tete fixe (88px) recouvrait l'ancre #formulaire-contact */
.single-uniformes_sur_mesure [id]{ scroll-margin-block-start:112px; }

/* 4 - Confort tactile : supprime le delai de double-tap iOS */
.single-uniformes_sur_mesure :is(button,[role="radio"],.swiper-button-next,.swiper-button-prev){
  touch-action:manipulation;
}

/* 5 - Image du simulateur : object-fit explicite (valeur initiale = fill) */
.perso-imgbox img{ object-fit:cover; }

/* 6 - Bouton secondaire en contour. Une regle globale du CSS additionnel
      force le fond fonce sur tous les .elementor-button en !important :
      il faut donc la meme force pour le variant contour. */
.hw-btn-contour .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque){
  background-color: transparent !important;
  color: #1A1A1A !important;
  border: 1px solid #1A1A1A !important;
  transition: background-color .25s ease, color .25s ease;
}
.hw-btn-contour .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque):hover,
.hw-btn-contour .elementor-button:not(#hw-trigger-metiers):not(#hw-trigger-marque):focus-visible{
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
}

/* 7 - Carrousel des univers : sous 768px la barre de progression traversait
      les deux fleches. Elementor n emet pas les reglages responsives de position
      pour ce widget, et une regle existante fixe la barre a bottom:22px !important.
      On la remonte au-dessus des fleches uniquement en mobile. */
@media (max-width: 767px){
  .elementor-element-c0b98b3 .swiper-pagination-progressbar{
    bottom: 64px !important;
  }
}

/* 8 - Panneaux hors-ecran : #hw-sidecart est parque en position:fixed a
      377px a droite de la fenetre. Sur iOS cela rend toute la page
      deplacable lateralement ; Chrome bureau ne le reproduit pas, ce qui
      a masque le probleme au premier controle. On coupe le debordement
      horizontal a la racine.
      `clip` et non `hidden` : `hidden` ferait de html un conteneur de
      defilement et casserait l en-tete collant. */
html{ overflow-x: hidden; }

/* Tiroir panier : en position fixed, il restait a 105% hors ecran une fois ferme,
   ce qui ouvre une zone de defilement horizontale parasite sur iOS. Sous 1024px il
   est ramene a largeur nulle contre le bord droit tant qu il n est pas ouvert. */
@media (max-width: 1024px){
  #hw-sidecart{ transition: opacity .3s ease, visibility 0s linear .3s !important; }
  #hw-sidecart:not(.open){ left: auto !important; width: 0 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden !important; }
  #hw-sidecart.open{ opacity: 1 !important; visibility: visible !important; transition: opacity .3s ease !important; }
}

/* En-tete mobile : le declencheur du menu etait pose au centre, sous le logo, en
   20x20. Il est ancre a gauche et occupe toute la hauteur de l en-tete (cible
   tactile de 44px), ce qui recale aussi le panneau deroulant juste sous l en-tete. */
@media (max-width: 1024px){
  header .e-con-full.e-parent > .elementor-element-8a346e8{ left: 20px !important; top: 0 !important; height: 100% !important; }
  header .elementor-element-8a346e8 .elementor-widget-container,
  header .elementor-element-8a346e8 .e-n-menu,
  header .e-n-menu-toggle{ height: 100% !important; }
  header .e-n-menu-toggle{ width: 44px !important; justify-content: center !important; align-items: center !important; }
}

/* Menu mobile plein ecran : le panneau deroulant (375x260) devient une surface
   qui occupe toute la hauteur restante sous l en-tete. Liste editoriale numerotee,
   coordonnees et bouton Contact ancres en bas. */
@media (max-width: 1024px){
  header .elementor-element-8a346e8 .e-n-menu-wrapper{ position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; max-width: none !important; height: var(--n-menu-dropdown-content-box-height, calc(100dvh - 88px)) !important; max-height: none !important; background: #F7F6F2 !important; overflow-y: auto !important; padding: 6px 30px 32px !important; transform: none !important; box-shadow: none !important; }
  header .elementor-element-8a346e8 .e-n-menu-heading{ display: flex !important; flex-direction: column !important; min-height: 100% !important; gap: 0 !important; counter-reset: hwmenu; }
  header .elementor-element-8a346e8 .e-n-menu-item{ border-bottom: 1px solid rgba(28,28,30,.12); animation: hw-menu-in .5s cubic-bezier(.22,.61,.36,1) both; }
  header .elementor-element-8a346e8 .e-n-menu-title{ background: transparent !important; }
  /* Le mega-menu pose une largeur fixe (--stretch-width) sur chaque entree :
     elles debordaient de 30px a droite du panneau. */
  header .elementor-element-8a346e8 .e-n-menu-item,
  header .elementor-element-8a346e8 .e-n-menu-title,
  header .elementor-element-8a346e8 .e-n-menu-title > a{ width: 100% !important; max-width: 100% !important; }
  /* Le panneau est en position fixed : un glissement dessus faisait defiler la page
     derriere, l en-tete disparaissait et le menu restait suspendu. La page est
     verrouillee tant que le menu est ouvert. */
  header .elementor-element-8a346e8 .e-n-menu-wrapper{ overscroll-behavior: contain !important; }
  html:has(header .e-n-menu-toggle[aria-expanded="true"]){ overflow: hidden !important; }
  header .elementor-element-8a346e8 .e-n-menu-title > a{ flex: 1 1 auto !important; min-height: 44px !important; display: flex !important; align-items: baseline !important; gap: 14px !important; line-height: 1.12 !important; }
  header .elementor-element-8a346e8 .e-n-menu-title-text{ text-transform: none !important; }
  header .elementor-element-8a346e8 .e-n-menu-title > a::before{ counter-increment: hwmenu; content: counter(hwmenu, decimal-leading-zero); font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .18em; color: #9A8C78; flex: none; }
  /* 08/09 - ces regles de bas de menu etaient calees sur nth-child(6|7|8),
     positions du telephone, de l e-mail et de Contact quand le menu comptait
     8 entrees. Depuis le passage a 19 entrees elles tombaient sur Accueil,
     Evenementiel et Retail. Ciblage par lien : insensible a l ordre. */
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="tel:"]),
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="mailto:"]),
  header .elementor-element-8a346e8 .e-n-menu-heading > .e-n-menu-item:last-child{ border-bottom: 0; }
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="tel:"]){ margin-top: 26px; padding-top: 14px; }
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="tel:"]) .e-n-menu-title,
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="mailto:"]) .e-n-menu-title{ padding: 5px 0 !important; }
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="tel:"]) .e-n-menu-title-text,
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="mailto:"]) .e-n-menu-title-text{ font-family: "Jost", sans-serif !important; font-size: 14px !important; letter-spacing: .01em !important; color: #6B6B66 !important; }
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="tel:"]) .e-n-menu-title > a::before,
  header .elementor-element-8a346e8 .e-n-menu-item:has(> .e-n-menu-title > a[href^="mailto:"]) .e-n-menu-title > a::before{ content: none; }
  header .elementor-element-8a346e8 .e-n-menu-heading > .e-n-menu-item:last-child .e-n-menu-title{ padding: 0 !important; }
  header .elementor-element-8a346e8 .e-n-menu-heading > .e-n-menu-item:last-child .e-n-menu-title > a{ justify-content: center !important; align-items: center !important; min-height: 56px !important; margin-top: 22px !important; margin-bottom: 10px !important; background: #1C1C1E !important; }
  header .elementor-element-8a346e8 .e-n-menu-heading > .e-n-menu-item:last-child .e-n-menu-title-text{ font-family: "Jost", sans-serif !important; font-size: 12px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #FFFFFF !important; }
  header .elementor-element-8a346e8 .e-n-menu-heading > .e-n-menu-item:last-child .e-n-menu-title > a::before{ content: none; }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(1){ animation-delay: .03s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(2){ animation-delay: .06s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(3){ animation-delay: .10s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(4){ animation-delay: .13s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(5){ animation-delay: .16s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(6){ animation-delay: .19s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(7){ animation-delay: .22s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(8){ animation-delay: .26s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(9){ animation-delay: .29s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(10){ animation-delay: .32s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(11){ animation-delay: .35s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(12){ animation-delay: .38s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(13){ animation-delay: .42s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(14){ animation-delay: .45s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(15){ animation-delay: .48s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(16){ animation-delay: .51s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(17){ animation-delay: .54s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(18){ animation-delay: .58s }
header .elementor-element-8a346e8 .e-n-menu-item:nth-child(19){ animation-delay: .61s }
}
@keyframes hw-menu-in{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  header .elementor-element-8a346e8 .e-n-menu-item{ animation: none !important; }
}
/* Les deux zones de navigation du bureau sont vides sous 768px : elles faisaient
   passer l en-tete sur trois lignes (116px). */
@media (max-width: 767px){
  header .e-con-full.e-parent > .elementor-element-9cb6395,
  header .e-con-full.e-parent > .elementor-element-436946b{ display: none !important; }
}
/* Pied de page mobile : les deux listes de liens etaient des lignes de 26px
   separees par des . Elles deviennent des lignes de 45px, tactiles. */
@media (max-width: 1024px){
  footer .elementor-element-5118e95 p a,
  footer .elementor-element-cadf79c p a{ display: block; padding: 11px 0; }
  footer .elementor-element-5118e95 p br,
  footer .elementor-element-cadf79c p br{ display: none; }
}

/* Le pied de page herite de la typo globale (18px). Sous 1024px il passe a 15px,
   et le bloc legal a 13px, pour retrouver une hierarchie. */
@media (max-width: 1024px){
  footer .elementor-widget-text-editor{ font-size: 15px !important; letter-spacing: normal !important; }
  footer .elementor-element-ffa05b3,
  footer .elementor-element-90b7a0e{ font-size: 14px !important; }
}
/* ===== fin du bloc du 25/08/2026 ===== */


/* ================================================================
   Uniformisation des fonds de section - 01/09/2026 (Linko)
   Demande cliente : une seule couleur de fond sur tout le site.
   Reference retenue : #F7F5F2 (ivoire deja majoritaire).
   Remplace #F7F6F2, #F7F5F1, #F5F2ED, #E7E7E7, #EFEFEF.
   Pour annuler : supprimer ce bloc.
   ================================================================ */
body .elementor-element.elementor-element-f519c0a,
body .elementor-element.elementor-element-70acf6ca,
body .elementor-element.elementor-element-ilxcode,
body .elementor-element.elementor-element-ead021f,
body .elementor-element.elementor-element-7f52ffc,
body .elementor-element.elementor-element-03701a2{
  background-color:#F7F5F2 !important;
}
/* f519c0a  Accueil, section Explorer       etait #E7E7E7 */
/* 70acf6ca 9 fiches univers, hero          etait #F7F6F2 */
/* bbc1d6c  L'Atelier, premier volet        etait #F5F2ED */
/* 4e26015  L'Atelier, second volet         etait #F5F2ED */
/* ilxcode  Contact, adresse de l'atelier   etait #F7F5F1 */
/* ead021f  RSE, en chiffres                etait #F7F6F2 */
/* 7f52ffc  RSE, cycle de vie               etait #F7F6F2 */
/* 03701a2  Boutique, bloc Aide             etait #EFEFEF */
/* mrinqw8  L Atelier, bloc Parlons projet   etait #F7F4EF */


/* ===== 02/09/2026 - passe mobile ===== */

/* 1. Echelle typographique globale : reglee depuis Reglages du site
   -> Polices globales (Principal 40/34/28, Secondaire 32/28/24) le 02/09/2026.
   La surcharge CSS provisoire a ete retiree. */

/* 2. Logos clients : normalisation du modele 357 propagee a
   La Marque (495ed226) et L Atelier (4d916e3). */
body .elementor-widget.elementor-element-495ed226 .elementor-image-carousel .swiper-slide-image,
body .elementor-widget.elementor-element-4d916e3 .elementor-image-carousel .swiper-slide-image{
  width: 130px !important; height: 80px !important;
  max-width: 130px !important; max-height: 80px !important;
  object-fit: contain !important; transform: none !important;
  margin: 0 auto !important;
}
@media (max-width: 767px){
  body .elementor-widget.elementor-element-495ed226 .elementor-image-carousel .swiper-slide-image,
  body .elementor-widget.elementor-element-4d916e3 .elementor-image-carousel .swiper-slide-image,
  body .elementor-widget.elementor-element-51743402 .elementor-image-carousel .swiper-slide-image{
    width: 100% !important; height: 56px !important;
    max-width: 100% !important; max-height: 56px !important;
  }
}

/* 3. Boutons en mobile : la regle globale padding 19px 42px et le nowrap
   faisaient deborder les libelles longs hors de l ecran. */
@media (max-width: 767px){
  .elementor-button.elementor-button.elementor-button.elementor-button{
    padding-left: 20px !important;
    padding-right: 20px !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
}

/* 4. Logos : contenir chaque logo dans sa diapositive en mobile.
   Les images etaient forcees a 110 px dans des diapositives de 78 a 85 px,
   donc rognees a gauche et a droite. */
@media (max-width: 767px){
  body .elementor-widget.elementor-element-51743402 .elementor-image-carousel .swiper-slide .swiper-slide-image.swiper-slide-image.swiper-slide-image,
  body .elementor-widget.elementor-element-495ed226 .elementor-image-carousel .swiper-slide .swiper-slide-image.swiper-slide-image.swiper-slide-image,
  body .elementor-widget.elementor-element-4d916e3 .elementor-image-carousel .swiper-slide .swiper-slide-image.swiper-slide-image.swiper-slide-image{
    width: 100% !important; height: 56px !important;
    max-width: 100% !important; max-height: 56px !important;
    object-fit: contain !important;
  }
}

/* 5. Blocs alignwide (panier WooCommerce) : le theme Hello applique
   margin-inline:-80px sans media query. Sous 1025 px le bloc partait
   80 px hors ecran a gauche et son contenu etait rogne. */
@media (max-width: 1024px){
  .alignwide{ margin-inline: 0 !important; }
}
/*   Gouttiere de 20 px pour le panier en mobile, sinon le recapitulatif
   et les lignes produit collent aux deux bords de l ecran. */
@media (max-width: 767px){
  .wp-block-woocommerce-cart .wc-block-cart__main,
  .wp-block-woocommerce-cart .wc-block-cart__sidebar{
    padding-inline: 20px !important;
  }
}

/* 6. Tunnel WooCommerce : typographie du site.
   Les blocs et gabarits WooCommerce sortaient en Jost gras fonce,
   sans rapport avec le reste du site. */
.woocommerce h1, .woocommerce h2, .woocommerce h3,
.wp-block-woocommerce-cart h1, .wp-block-woocommerce-cart h2, .wp-block-woocommerce-cart h3,
.wc-block-components-title{
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 500 !important;
  color: #1A1A1A !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce, .woocommerce input, .woocommerce select, .woocommerce textarea,
.wp-block-woocommerce-cart, .wc-block-components-form{
  font-family: 'Jost', sans-serif;
}
/* iframe de paiement qui depassait de 3 px sur le panier */
.woocommerce iframe, .wp-block-woocommerce-cart iframe{ max-width: 100% !important; }

/* 7. Gouttiere mobile de reference (30 px).
   Anciennes sections : la largeur de contenu globale a 90 % laissait
   19 px de chaque cote au lieu de 30. Conteneurs : le meme centrage
   ajoutait 16 px a la marge interieure de section. */
@media (max-width: 767px){
  .elementor-section.elementor-section-boxed:not(.elementor-inner-section) > .elementor-container{
    max-width: 100% !important;
  }
  .elementor-section.elementor-section-boxed:not(.elementor-inner-section){
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  .elementor-section:not(.elementor-inner-section) > .elementor-container > .elementor-column > .elementor-widget-wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .e-con.e-parent > .e-con-inner{ max-width: 100% !important; }
}


/* ================================================================
   06/09/2026 — audit mobile & tablette : correctifs globaux
   Voir claude/audit-mobile-tablette-tout-le-site-06-09-2026.md
   ================================================================ */

/* 1. Zoom automatique iOS : Safari zoome sur tout champ sous 16px.
   Taille fonctionnelle, sans effet sur l'echelle typographique du site. */
@media (max-width:767px){
  .elementor-field-textual,
  .elementor-field-textual.elementor-size-sm,
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="password"], input[type="search"], input[type="date"],
  textarea, select,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .wc-block-components-text-input input,
  .wc-block-components-textarea,
  .wc-block-components-select__container select,
  .wc-block-components-quantity-selector__input{
    font-size:16px !important;
  }
}

/* 2. Hauteur des champs et des boutons de quantite : 44px minimum */
@media (max-width:767px){
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .wc-block-components-text-input input,
  .wc-block-components-select__container select{ min-height:44px !important; }
  .wc-block-components-quantity-selector{ min-height:44px !important; }
  .wc-block-components-quantity-selector__button{ min-width:44px !important; min-height:44px !important; }
  .wc-block-components-quantity-selector__input{ min-height:44px !important; }
}

/* 3. Cases a cocher et boutons radio : 24px minimum (WCAG 2.2 AA) */
@media (max-width:767px){
  .elementor-field-type-acceptance input[type="checkbox"],
  .woocommerce input[type="checkbox"],
  .woocommerce input[type="radio"],
  .wc-block-components-checkbox__input{ width:24px !important; height:24px !important; }
}

/* 4. Liens du pied de page : cible tactile portee de ~21px a ~37px.
   Padding seul : la typographie du pied de page (passe du 25/08) n'est pas touchee. */
@media (max-width:1024px){
  .elementor-location-footer .elementor-widget-text-editor a{
    display:inline-block; padding-top:8px; padding-bottom:8px;
  }
}

/* 5. Puces de carrousel : zone tactile de 34px sans changer le visuel.
   34px de pas pour 35px d'ecart entre puces : aucun recouvrement. */
@media (max-width:1024px){
  .swiper-pagination-bullet{ position:relative; margin:0 13px !important; }
  .swiper-pagination-bullet::after{
    content:""; position:absolute; top:50%; left:50%;
    width:34px; height:34px; transform:translate(-50%,-50%);
  }
  .swiper-pagination{ min-height:44px; display:flex; align-items:center; justify-content:center; }
}

/* 6. Fiche produit : titre ramene a l'echelle du site */
@media (max-width:1024px){ .single-product .product_title{ font-size:36px !important; } }
@media (max-width:767px){ .single-product .product_title{ font-size:30px !important; } }

/* 7. Zone tactile de 44px sur les icones de l'en-tete et le retrait du panier.
   Pseudo-element : aucun deplacement de la mise en page. Ecart entre les deux
   icones : 50px, donc pas de recouvrement des zones. */
@media (max-width:1024px){
  .wc-block-cart-item__remove-link{ position:relative; }
  #hw-fav-link::after, #hw-cart-icon::after, .wc-block-cart-item__remove-link::after{
    content:""; position:absolute; top:50%; left:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
}

/* 8. Listes deroulantes des formulaires Elementor : 44px de haut en mobile */
@media (max-width:767px){
  select.elementor-field-textual{ min-height:44px !important; }
}


/* ===================================================================== */
/* 07/09/2026 - Header des fiches univers : une seule hauteur, plein ecran */
/* Avant : la photo etait en height:auto + object-fit:contain, donc c'est le  */
/* ratio du FICHIER qui fixait la hauteur du hero. Releve : 710px sur les 8   */
/* fiches dont la photo fait 683x1024, 597px sur Securite (photo 800x999).    */
/* Desormais le hero est cale sur la hauteur de l'ecran (100vh - 88px de      */
/* menu) et la photo remplit cette hauteur, alignee en bas, sans rognage.     */
/* Desktop uniquement : tablette et mobile gardent leurs regles existantes.   */
@media (min-width:1025px){
  .elementor-element-70acf6ca{ min-height:calc(100vh - 88px) !important; }
  body.admin-bar .elementor-element-70acf6ca{ min-height:calc(100vh - 120px) !important; }
  .elementor-element-feffc4b{ flex:1 1 auto !important; align-items:stretch !important; }
  .elementor-element-bf239c1{ align-self:center !important; flex:0 1 700px !important; }
  .elementor-element-bb8cb31{
    align-self:stretch !important; flex:0 1 auto !important;
    width:auto !important; max-width:52% !important; min-width:0 !important;
    margin-left:auto !important; margin-bottom:0 !important;
    display:flex !important; align-items:flex-end !important;
  }
  .elementor-element-bb8cb31 > .elementor-widget-container{
    display:flex !important; align-items:flex-end !important; min-width:0 !important;
  }
  /* Hauteur DEFINIE en unites d'ecran : un height:100% en cascade ne se resout  */
  /* pas (le hero est en min-height), la photo repartait alors sur son ratio.    */
  /* 118px = 88px de menu + 30px de padding haut du hero ; +32px avec la barre   */
  /* d'administration WordPress.                                                 */
  .elementor-element-bb8cb31 img{
    height:calc(100vh - 118px) !important; width:auto !important;
    max-width:100% !important; max-height:none !important;
    object-fit:contain !important; object-position:bottom center !important;
    margin:0 0 0 auto !important;
  }
  body.admin-bar .elementor-element-bb8cb31 img{ height:calc(100vh - 150px) !important; }
}


/* ================================================================
   07/09/2026 - Page L'Atelier (693) entierement en blanc
   Les 3 sections propres a la page (bbc1d6c premier volet, 4e26015
   second volet, mrinqw8 bloc Parlons projet) sortent du groupe ivoire
   du 01/09 : leur fond est desormais pilote depuis Elementor
   (Section > Style > Arriere-plan), valeur #FFFFFF.
   Le bloc Aide 03701a2 est partage avec Boutique et Collection
   permanente : il reste ivoire ailleurs, blanc seulement sur la 693.
   Annuler = supprimer ce bloc et remettre les 3 selecteurs ci-dessus.
   07/09 (suite) - Page Le Process (1700) : le bandeau citation 96aec5e
   etait un bandeau sombre #1A1A1A converti en ivoire par le bloc
   "DA Marcy". Il en a ete retire ; son fond est desormais #FFFFFF dans
   Elementor. Le bloc Aide 03701a2 passe aussi en blanc sur cette page.
   ================================================================ */
body.page-id-693 .elementor-element.elementor-element-03701a2,
body.page-id-1700 .elementor-element.elementor-element-03701a2{
  background-color:#FFFFFF !important;
}


/* ============================================================
   Passe mobile 07/09 - densite verticale
   Plafonne a 48px les marges de section restees en valeurs
   bureau (80 a 160px, une a 462px) et met la grille des
   univers de l'accueil en 2 colonnes.
   ============================================================ */
@media (max-width: 767px) {

  /* 1. Marges verticales de section plafonnees a 48px */
  .elementor-element-f519c0a,
  .elementor-element-633f9a9,
  .elementor-element-2095037,
  .elementor-element-2374088,
  .elementor-element-ml80h41,
  .elementor-element-8b23be2,
  .elementor-element-1xycq9y,
  .elementor-element-bbc1d6c,
  .elementor-element-4u6zpmf,
  .elementor-element-4e26015,
  .elementor-element-mrinqw8,
  .elementor-element-462fffe,
  .elementor-element-xbm7i1m {
    --padding-top: 48px;
    --padding-bottom: 48px;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* 2. Marges laterales ramenees a 24px */
  .elementor-element-f519c0a,
  .elementor-element-633f9a9,
  .elementor-element-b5f676a,
  .elementor-element-0fe4c10 {
    --padding-left: 24px;
    --padding-right: 24px;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 3. Accueil - grille des univers : une carte par ligne
     (2 colonnes essayees puis ecartees par Maxence le 07/09) */
  .elementor-element-134e0fd,
  .elementor-element-9c10c32 {
    gap: 16px !important;
  }
}

/* ---- Passe mobile 07/09 (suite) : marges portees par .e-con-inner ---- */
@media (max-width: 767px) {

  .elementor-element-8b7a256 > .e-con-inner,
  .elementor-element-b5f676a > .e-con-inner,
  .elementor-element-0fe4c10 > .e-con-inner,
  .elementor-element-c240e10 > .e-con-inner,
  .elementor-element-8302123 > .e-con-inner,
  .elementor-element-96aec5e > .e-con-inner,
  .elementor-element-d64f5e6 > .e-con-inner,
  .elementor-element-3d02924 > .e-con-inner,
  .elementor-element-ead021f > .e-con-inner,
  .elementor-element-6d2d4be > .e-con-inner,
  .elementor-element-93d3334 > .e-con-inner,
  .elementor-element-231ac64 > .e-con-inner,
  .elementor-element-7f52ffc > .e-con-inner,
  .elementor-element-f283e96 > .e-con-inner,
  .elementor-element-1084ad9 > .e-con-inner {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .elementor-element-80d73b9,
  .elementor-element-5871cad .elementor-element-populated {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  /* ---- Pied de page : monogramme et blocs legaux ---- */
  .elementor-element-b5f41e6 img {
    /* 150px -> 110px le 09/09 (retour Lina 01:51 : "Restez informe, peut-etre le
       diminuer un petit peu"). Valeur modifiee sur place plutot que surchargee. */
    max-width: 110px !important;
  }
  .elementor-element-b5f41e6 .elementor-widget-container {
    margin-bottom: 24px !important;
  }
  .elementor-element-03701a2 {
    --padding-top: 40px;
    --padding-bottom: 32px;
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
  .elementor-element-fe40ba4 {
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
}

/* ---- Passe mobile 07/09 : listes de liens du pied de page ----
   Les  qui separent les liens sont masques sous 768px : les
   libelles se collaient les uns aux autres. On retablit un ecart
   horizontal lisible plutot que de rendre les , qui feraient
   9 lignes par colonne. ---- */
@media (max-width: 767px) {
  .elementor-element-5118e95 p a,
  .elementor-element-cadf79c p a {
    margin-right: 18px;
  }
}

/* ---- Passe mobile 07/09 : fiches univers (modele 357) ---- */
@media (max-width: 767px) {
  .elementor-element-d4156d1 {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* ============================================================
   Passe mobile 07/09 (2) - retours Maxence
   ============================================================ */
@media (max-width: 767px) {

  /* Bandeau de logos. Chaque logo porte un transform:scale calibre
     pour le bureau (jusqu'a x1,9). En mobile la diapositive ne fait
     que 78px : les logos debordaient jusqu'a 152px, se touchaient et
     etaient rognes au bord. On neutralise l'echelle et on cale la
     taille sur la hauteur. */
  .elementor-widget-image-carousel .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 8px !important;
  }
  .elementor-element.elementor-widget-image-carousel .swiper-slide .swiper-slide-inner img[src] {
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 56px !important;
    object-fit: contain;
  }

  /* Collection permanente : le libelle HOMME etait cale a gauche et
     FEMME a droite (heritage de la mise en page bureau ou les deux
     cartes sont cote a cote). Empilees en mobile, les deux libelles
     sont centres. */
  .elementor-element-9221114,
  .elementor-element-cd1e013 {
    justify-content: center !important;
    padding: 0 20px 24px !important;
  }

  /* Marges verticales de section restees en valeurs bureau
     (160px en haut ET en bas sur cinq sections de l'accueil) */
  .elementor-element-cc5cb11,
  .elementor-element-2e73c15,
  .elementor-element-cc8280d,
  .elementor-element-95e5a0d,
  .elementor-element-6fea4d1,
  .elementor-element-44703338,
  .elementor-element-1f086e8f,
  .elementor-element-072afb0,
  .elementor-element-d54b320 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .elementor-element-3b486831 {
    margin-bottom: 0 !important;
  }
}

/* ---- Passe mobile 07/09 (3) : gouttiere unique de 30px ----
   Les sections utilisaient 20, 22, 24, 30 ou 40px de marge
   laterale selon la page : les bords de texte ne s'alignaient
   pas d'une section a l'autre. 30px est la valeur dominante,
   c'est celle du gabarit ; tout y est ramene. ---- */
@media (max-width: 767px) {

  .elementor-element-f519c0a,
  .elementor-element-cc8280d,
  .elementor-element-6fea4d1,
  .elementor-element-44703338,
  .elementor-element-1f086e8f,
  .elementor-element-d64f5e6,
  .elementor-element-93d3334,
  .elementor-element-231ac64,
  .elementor-element-f283e96,
  .elementor-element-c240e10,
  .elementor-element-8302123,
  .elementor-element-96aec5e,
  .elementor-element-2095037,
  .elementor-element-b5f676a,
  .elementor-element-0fe4c10,
  .elementor-element-633f9a9,
  .elementor-element-3b486831 {
    --padding-left: 30px;
    --padding-right: 30px;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* Accueil, section "Le savoir-faire se mesure a la precision" :
     le bloc de texte portait 10px de marge interne que l'image
     n'avait pas, d'ou un bord gauche decale de 10px. */
  .elementor-element-99d4db5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---- Formulaires : deux defauts presents a toutes les largeurs ----
   1. Le champ select etait encadre deux fois : Elementor enveloppe le
       dans un div .elementor-field.elementor-select-wrapper, qui
      recevait la bordure des champs texte, et le select portait la sienne.
      On retire la bordure du conteneur et on aligne le select sur la
      hauteur des champs texte (56px).
   2. La case a cocher de consentement s'affichait en 24 x 13px, ecrasee
      et sous le seuil de confort tactile. ---- */

.elementor-page .elementor-widget-form .elementor-field-group .elementor-field.elementor-select-wrapper {
  border: 0 !important;
  padding: 0 !important;
}
.elementor-page .elementor-widget-form .elementor-field-group .elementor-field.elementor-select-wrapper select {
  width: 100% !important;
  min-height: 56px;
  padding: 16px 18px !important;
}
.elementor-page .elementor-widget-form .elementor-field-group input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  flex: 0 0 20px;
  margin-right: 12px !important;
}

/* ---- Passe mobile 07/09 (4) : sur-titres a deux lignes ----
   Interligne egal a la taille de police (12px/12px) : lisible sur
   une ligne en bureau, les deux lignes se touchent des que le
   libelle passe a la ligne en mobile. ---- */
@media (max-width: 767px) {
  .elementor-element-8a3d393 .elementor-heading-title,
  .elementor-element-bbce9b6 .elementor-heading-title,
  .elementor-element-4b60c49 .elementor-heading-title {
    line-height: 1.5 !important;
  }

  .elementor-field-type-acceptance label,
  .elementor-field-type-acceptance .elementor-field-option {
    line-height: 1.5;
  }
}

/* ---- Passe mobile 07/09 (5) : rythme vertical resserre ----
   Les ecarts entre sections atteignaient 88 a 148px en mobile.
   Marges de section annulees, marges internes plafonnees a 28px :
   l'ecart entre deux sections tombe a ~56px.
   Exception : le hero de /uniformes-sur-mesure/ (d15a2f9), dont la
   marge basse de 462px reserve la place du bandeau photo. ---- */
@media (max-width: 767px) {
  .elementor-element-cc8280d,
  .elementor-element-6fea4d1,
  .elementor-element-3b486831,
  .elementor-element-44703338,
  .elementor-element-1f086e8f {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

@media (max-width: 767px) {
  /* derniers ecarts hors rythme */
  .elementor-element-7b9bb14 { margin-top: 12px !important; margin-bottom: 12px !important; }
  .elementor-element-e7fef0c { margin-top: 0 !important; margin-bottom: 0 !important; }
  .elementor-element-03701a2 > .e-con-inner { padding-top: 24px !important; }
}

/* ---- Bloc "Votre signature, jusque dans le detail" (perso-section,
   injecte par Code Snippets, present sur l'accueil, sur-mesure et
   L'Atelier) : aucune gouttiere en mobile, le titre touchait le bord
   gauche de l'ecran. ---- */
@media (max-width: 767px) {
  .perso-wrap {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* ---- Carrousel d'univers (loop-carousel) : en mobile la barre de
   progression, large de 240px et haute de 44px, passait sous les deux
   fleches de navigation. Barre fine calee a gauche, fleches a droite,
   sur la meme ligne. ---- */
@media (max-width: 767px) {
  .elementor-widget-loop-carousel.elementor-pagination-type-progressbar .swiper-pagination-progressbar {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: calc(100% - 130px) !important;
    height: 4px !important;
    bottom: 21px !important;
  }
}

/* ============================================================
   Passe TABLETTE 07/09 (768 - 1024px)
   La tablette n'avait jamais ete reprise : elle heritait des
   valeurs bureau. Ecarts releves entre sections sur l'accueil :
   200 a 360px. Marges de section annulees, marges internes
   plafonnees a 48px, gouttiere unique a 40px.
   Exception : le hero de /uniformes-sur-mesure/ (d15a2f9), dont
   les 512px de marge basse reservent le bandeau photo.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 1. Marges de section annulees */
  .elementor-element-072afb0,
  .elementor-element-d54b320,
  .elementor-element-cc5cb11,
  .elementor-element-2e73c15,
  .elementor-element-cc8280d,
  .elementor-element-95e5a0d,
  .elementor-element-6fea4d1,
  .elementor-element-e7fef0c,
  .elementor-element-44703338,
  .elementor-element-1f086e8f,
  .elementor-element-3b486831 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 2. Marges internes verticales plafonnees a 48px */
  .elementor-element-f519c0a,
  .elementor-element-633f9a9,
  .elementor-element-2374088,
  .elementor-element-ml80h41,
  .elementor-element-8b23be2,
  .elementor-element-1xycq9y,
  .elementor-element-bbc1d6c,
  .elementor-element-4u6zpmf,
  .elementor-element-4e26015,
  .elementor-element-mrinqw8,
  .elementor-element-2095037 {
    --padding-top: 48px;
    --padding-bottom: 48px;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .elementor-element-be1d214 > .e-con-inner,
  .elementor-element-8b7a256 > .e-con-inner,
  .elementor-element-b5f676a > .e-con-inner,
  .elementor-element-262498d > .e-con-inner,
  .elementor-element-f33d74d > .e-con-inner,
  .elementor-element-0fe4c10 > .e-con-inner,
  .elementor-element-d64f5e6 > .e-con-inner,
  .elementor-element-3d02924 > .e-con-inner,
  .elementor-element-ead021f > .e-con-inner,
  .elementor-element-6d2d4be > .e-con-inner,
  .elementor-element-93d3334 > .e-con-inner,
  .elementor-element-231ac64 > .e-con-inner,
  .elementor-element-7f52ffc > .e-con-inner,
  .elementor-element-f283e96 > .e-con-inner,
  .elementor-element-1084ad9 > .e-con-inner,
  .elementor-element-c240e10 > .e-con-inner,
  .elementor-element-8302123 > .e-con-inner,
  .elementor-element-96aec5e > .e-con-inner {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* 3. Gouttiere unique de 40px */
  .elementor-element-f519c0a,
  .elementor-element-b5f676a,
  .elementor-element-0fe4c10,
  .elementor-element-633f9a9 {
    --padding-left: 40px;
    --padding-right: 40px;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* 4. Pied de page */
  .elementor-element-03701a2 > .e-con-inner {
    padding-top: 40px !important;
    padding-bottom: 32px !important;
  }
}

/* Bloc perso-section : aucune gouttiere non plus en tablette */
@media (min-width: 768px) and (max-width: 1024px) {
  .perso-wrap {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ---- Accueil, grille des univers en tablette ----
   4 colonnes de 157px pour un libelle a 34px : "Evenementiel" mesure
   181px et debordait sur la carte voisine. Deux colonnes, libelle a
   26px. ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-134e0fd,
  .elementor-element-9c10c32 {
    flex-wrap: wrap !important;
    gap: 20px !important;
  }
  .elementor-element-134e0fd > .e-con,
  .elementor-element-9c10c32 > .e-con {
    --width: calc(50% - 10px);
    width: calc(50% - 10px) !important;
    min-width: 0;
  }
  .elementor-element-134e0fd .elementor-heading-title,
  .elementor-element-9c10c32 .elementor-heading-title {
    font-size: 26px !important;
  }
}

/* ---- Tablette : gouttiere a 40px sur les sections restees a 20px ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-bbc1d6c,
  .elementor-element-4u6zpmf,
  .elementor-element-4e26015,
  .elementor-element-mrinqw8,
  .elementor-element-c240e10,
  .elementor-element-8302123,
  .elementor-element-96aec5e {
    --padding-left: 40px;
    --padding-right: 40px;
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ---- Bandeau de logos en tablette : meme defaut qu'en mobile, les
   transform:scale calibres pour le bureau font deborder chaque logo
   de sa diapositive de 152px. ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element.elementor-widget-image-carousel .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 12px !important;
  }
  .elementor-element.elementor-widget-image-carousel .swiper-slide .swiper-slide-inner img[src] {
    transform: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 60px !important;
    object-fit: contain;
  }
}

/* ---- Fiches univers (modele 357, 9 pages) : marges de section de
   160px et 80px heritees du bureau, en mobile comme en tablette. ---- */
@media (max-width: 1024px) {
  .elementor-element-6b10da14,
  .elementor-element-4e4b1b78,
  .elementor-element-752e6ba {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-feffc4b { padding-bottom: 48px !important; }
  .elementor-element-3cd7449 {
    --padding-left: 40px; --padding-right: 40px;
    padding-left: 40px !important; padding-right: 40px !important;
  }
  .elementor-element-3cd7449 > .e-con-inner,
  .elementor-element-70acf6ca > .e-con-inner {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}
@media (max-width: 767px) {
  .elementor-element-feffc4b { padding-bottom: 28px !important; }
  .elementor-element-3cd7449 > .e-con-inner,
  .elementor-element-70acf6ca > .e-con-inner {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}

/* ============================================================
   Heros : le mobile reprend la composition du bureau
   Sur l'accueil et le Lookbook, une regle sous 1024px passait le
   texte du hero en blanc, parce qu'en background cover la photo est
   zoomee et le texte anthracite tombait sur le costume sombre.
   On applique la composition en bandeau, deja utilisee sur le hero
   Uniformes sur mesure et sur les 9 fiches univers : texte
   anthracite en haut sur fond clair, photo pleine largeur en bas.
   Meme image et meme couleur de texte que le bureau.
   ============================================================ */
@media (max-width: 767px) {
  .elementor-element-ace850c:not(.elementor-motion-effects-element-type-background) {
    background-size: 175% auto !important;
    background-position: 65% top !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
  }
  .elementor-element-ace850c {
    justify-content: flex-end !important;
    min-height: 0 !important;
    --padding-top: calc(97.8% + 32px);
    --padding-bottom: 40px;
    padding-top: calc(97.8% + 32px) !important;
    padding-bottom: 40px !important;
  }
  body .elementor-44 .elementor-element.elementor-element-ace850c .elementor-widget-heading .elementor-heading-title,
  body .elementor-44 .elementor-element.elementor-element-ace850c .elementor-widget-text-editor {
    color: rgb(52, 51, 51) !important;
  }
}

/* ---- Lookbook : meme transposition que l'accueil ---- */
@media (max-width: 767px) {
  body .elementor .elementor-element.elementor-element-3071768d:not(.elementor-motion-effects-element-type-background) {
    background-size: 175% auto !important;
    background-position: center bottom !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
  }
  .elementor-element-3071768d {
    justify-content: flex-start !important;
    --padding-top: 40px;
    --padding-bottom: calc(94.5% + 32px);
    padding-top: 40px !important;
    padding-bottom: calc(94.5% + 32px) !important;
  }
  body .elementor .elementor-element.elementor-element-3071768d .elementor-widget-heading .elementor-heading-title,
  body .elementor .elementor-element.elementor-element-3071768d .elementor-widget-text-editor,
  body .elementor .elementor-element.elementor-element-3071768d .elementor-widget-text-editor p {
    color: rgb(52, 51, 51) !important;
  }
}

/* Lookbook : le voile sombre du hero servait a poser le texte sur la
   photo. Le texte est desormais sur fond blanc au-dessus du bandeau :
   le voile n'a plus lieu d'etre en mobile. */
@media (max-width: 767px) {
  body .elementor .elementor-element.elementor-element-3071768d::before {
    background-image: none !important;
    background-color: transparent !important;
  }
}

/* ---- Meme transposition en tablette : la regle qui passait le texte
   des heros en blanc portait sur tout ce qui est sous 1024px. ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .elementor-element.elementor-element-ace850c:not(.elementor-motion-effects-element-type-background),
  body .elementor .elementor-element.elementor-element-3071768d:not(.elementor-motion-effects-element-type-background) {
    background-size: 130% auto !important;
    background-repeat: no-repeat !important;
    background-color: #ffffff !important;
  }
  body .elementor .elementor-element.elementor-element-3071768d:not(.elementor-motion-effects-element-type-background) {
    background-position: center bottom !important;
  }
  /* Accueil : photo en haut, texte dessous. Le Lookbook garde la photo en bas. */
  body .elementor .elementor-element.elementor-element-ace850c:not(.elementor-motion-effects-element-type-background) {
    background-position: 65% top !important;
  }
  .elementor-element-3071768d {
    justify-content: flex-start !important;
    min-height: 0 !important;
    --padding-top: 48px;
    --padding-bottom: calc(70.2% + 40px);
    padding-top: 48px !important;
    padding-bottom: calc(70.2% + 40px) !important;
  }
  .elementor-element-ace850c {
    justify-content: flex-end !important;
    min-height: 0 !important;
    --padding-top: calc(72.6% + 40px);
    --padding-bottom: 48px;
    padding-top: calc(72.6% + 40px) !important;
    padding-bottom: 48px !important;
  }
  body .elementor .elementor-element.elementor-element-3071768d::before {
    background-image: none !important;
    background-color: transparent !important;
  }
  body .elementor-44 .elementor-element.elementor-element-ace850c .elementor-widget-heading .elementor-heading-title,
  body .elementor-44 .elementor-element.elementor-element-ace850c .elementor-widget-text-editor,
  body .elementor .elementor-element.elementor-element-3071768d .elementor-widget-heading .elementor-heading-title,
  body .elementor .elementor-element.elementor-element-3071768d .elementor-widget-text-editor,
  body .elementor .elementor-element.elementor-element-3071768d .elementor-widget-text-editor p {
    color: rgb(52, 51, 51) !important;
  }
}

/* ============================================================
   Menu mobile et tablette : les 9 fiches univers, Notre process
   et RSE n'y figuraient pas (5 entrees contre 24 en bureau).
   Les entrees ont ete ajoutees dans le widget Mega Menu (doc 23).
   La liste .e-n-menu-heading est en flex column + wrap avec une
   hauteur fixe : passe 8 entrees, elle repliait les suivantes en
   colonnes hors ecran. On la passe en nowrap, le panneau defile.
   ============================================================ */
@media (max-width: 1024px) {
  .e-n-menu-wrapper .e-n-menu-heading {
    flex-wrap: nowrap !important;
    height: auto !important;
  }
  .e-n-menu-wrapper { overflow-y: auto !important; }

  /* Les 9 univers sont des sous-entrees de Nos uniformes sur mesure :
     retrait a gauche et corps legerement reduit pour la hierarchie. */
  .e-n-menu-wrapper .e-n-menu-heading > .e-n-menu-item:has(> .e-n-menu-title > a[href*="/uniformes-sur-mesure/"]:not([href$="/uniformes-sur-mesure/"])) .e-n-menu-title {
    padding-left: 24px !important;
  }
}

@media (max-width: 1024px) {
  /* 19 entrees a 89px faisaient 1 655px de menu : lignes resserrees,
     la cible tactile reste a 44px. */
  .e-n-menu-wrapper .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

@media (max-width: 1024px) {
  /* Les 9 univers sont des sous-entrees : pas de numero, il est
     reserve aux entrees de premier niveau. */
  .e-n-menu-wrapper .e-n-menu-heading > .e-n-menu-item:has(> .e-n-menu-title > a[href*="/uniformes-sur-mesure/"]:not([href$="/uniformes-sur-mesure/"])) .e-n-menu-title-container::before {
    content: none !important;
  }
}

/* ============================================================
   Contraste WCAG AA sur le petit texte (08/09/2026)
   Sur-titres taupe #9A8C78 sur blanc : 3,28 pour 4,5 requis.
   Chiffres dores #C9A24B sur blanc : 2,40.
   Les deux couleurs sont posees widget par widget dans Elementor,
   il n y a pas de couleur globale a modifier : on les remappe ici.
   Seules les occurrences sur fond clair sont reprises ; celles sur
   fond sombre passent deja le seuil et ne sont pas touchees.
   ============================================================ */
.elementor-element-ca7e61f .elementor-heading-title,
.elementor-element-ca7e61f p,
.elementor-element-ca7e61f > .elementor-widget-container,
.elementor-element-13feb78 .elementor-heading-title,
.elementor-element-13feb78 p,
.elementor-element-13feb78 > .elementor-widget-container,
.elementor-element-df4351d .elementor-heading-title,
.elementor-element-df4351d p,
.elementor-element-df4351d > .elementor-widget-container,
.elementor-element-666db1b .elementor-heading-title,
.elementor-element-666db1b p,
.elementor-element-666db1b > .elementor-widget-container,
.elementor-element-e5ebe3b .elementor-heading-title,
.elementor-element-e5ebe3b p,
.elementor-element-e5ebe3b > .elementor-widget-container,
.elementor-element-e76448b .elementor-heading-title,
.elementor-element-e76448b p,
.elementor-element-e76448b > .elementor-widget-container,
.elementor-element-2fb5b5c .elementor-heading-title,
.elementor-element-2fb5b5c p,
.elementor-element-2fb5b5c > .elementor-widget-container,
.elementor-element-8b18fc4 .elementor-heading-title,
.elementor-element-8b18fc4 p,
.elementor-element-8b18fc4 > .elementor-widget-container,
.elementor-element-8a3d393 .elementor-heading-title,
.elementor-element-8a3d393 p,
.elementor-element-8a3d393 > .elementor-widget-container,
.elementor-element-cps543h .elementor-heading-title,
.elementor-element-cps543h p,
.elementor-element-cps543h > .elementor-widget-container,
.elementor-element-1f231d8 .elementor-heading-title,
.elementor-element-1f231d8 p,
.elementor-element-1f231d8 > .elementor-widget-container,
.elementor-element-5836683a .elementor-heading-title,
.elementor-element-5836683a p,
.elementor-element-5836683a > .elementor-widget-container,
.elementor-element-542343f .elementor-heading-title,
.elementor-element-542343f p,
.elementor-element-542343f > .elementor-widget-container,
.elementor-element-5olo0c2 .elementor-heading-title,
.elementor-element-5olo0c2 p,
.elementor-element-5olo0c2 > .elementor-widget-container,
.elementor-element-dsqrz0t .elementor-heading-title,
.elementor-element-dsqrz0t p,
.elementor-element-dsqrz0t > .elementor-widget-container,
.elementor-element-1210a35 .elementor-heading-title,
.elementor-element-1210a35 p,
.elementor-element-1210a35 > .elementor-widget-container,
.elementor-element-ab77d17 .elementor-heading-title,
.elementor-element-ab77d17 p,
.elementor-element-ab77d17 > .elementor-widget-container,
.elementor-element-ca97fa4 .elementor-heading-title,
.elementor-element-ca97fa4 p,
.elementor-element-ca97fa4 > .elementor-widget-container,
.elementor-element-3xy82sf .elementor-heading-title,
.elementor-element-3xy82sf p,
.elementor-element-3xy82sf > .elementor-widget-container {
  color: #7A6E5F !important;
}

.elementor-element-63f3842 .elementor-heading-title,
.elementor-element-63f3842 p,
.elementor-element-63f3842 > .elementor-widget-container,
.elementor-element-608b9e3 .elementor-heading-title,
.elementor-element-608b9e3 p,
.elementor-element-608b9e3 > .elementor-widget-container,
.elementor-element-0cf1098 .elementor-heading-title,
.elementor-element-0cf1098 p,
.elementor-element-0cf1098 > .elementor-widget-container,
.elementor-element-7f08357 .elementor-heading-title,
.elementor-element-7f08357 p,
.elementor-element-7f08357 > .elementor-widget-container,
.elementor-element-194d7fa .elementor-heading-title,
.elementor-element-194d7fa p,
.elementor-element-194d7fa > .elementor-widget-container,
.elementor-element-7f5bcc7 .elementor-heading-title,
.elementor-element-7f5bcc7 p,
.elementor-element-7f5bcc7 > .elementor-widget-container,
.elementor-element-828906b .elementor-heading-title,
.elementor-element-828906b p,
.elementor-element-828906b > .elementor-widget-container,
.elementor-element-9e560d4 .elementor-heading-title,
.elementor-element-9e560d4 p,
.elementor-element-9e560d4 > .elementor-widget-container,
.elementor-element-10a3afb .elementor-heading-title,
.elementor-element-10a3afb p,
.elementor-element-10a3afb > .elementor-widget-container,
.elementor-element-7cf7c8f .elementor-heading-title,
.elementor-element-7cf7c8f p,
.elementor-element-7cf7c8f > .elementor-widget-container,
.elementor-element-5e5be9e .elementor-heading-title,
.elementor-element-5e5be9e p,
.elementor-element-5e5be9e > .elementor-widget-container,
.elementor-element-b757fae .elementor-heading-title,
.elementor-element-b757fae p,
.elementor-element-b757fae > .elementor-widget-container,
.elementor-element-172f815 .elementor-heading-title,
.elementor-element-172f815 p,
.elementor-element-172f815 > .elementor-widget-container,
.elementor-element-e280494 .elementor-heading-title,
.elementor-element-e280494 p,
.elementor-element-e280494 > .elementor-widget-container {
  color: #876C32 !important;
}

/* Le meme dore sur le bandeau vert fonce (#41503F) de la page RSE :
   3,58 pour 4,5 requis. Ici il faut eclaircir, pas assombrir. */
.elementor-element-4f94414,
.elementor-element-4f94414 *,
.elementor-element-e12a37f .elementor-heading-title,
.elementor-element-e12a37f p {
  color: #E3B755 !important;
}

/* ============================================================
   Passe mobile 08/09 (2) - grille univers, pied de page, configurateur
   ============================================================ */

/* 1. Accueil : les 8 cartes univers passent a deux par ligne sous 768px,
      comme le Lookbook. Le ratio 4/5 des cartes fait le reste. */
@media (max-width: 767px) {
  .elementor-element-134e0fd > .e-con,
  .elementor-element-9c10c32 > .e-con {
    --width: calc(50% - 8px);
    min-width: 0;
    width: calc(50% - 8px) !important;
  }
  .elementor-element-134e0fd > .e-con .elementor-heading-title,
  .elementor-element-9c10c32 > .e-con .elementor-heading-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }
}

/* 2. Pied de page : le monogramme passe a 120px (regle dans Elementor,
      doc 134). Les 38px de gouttiere entre blocs se lisaient ~60px. */
@media (max-width: 767px) {
  .elementor-element-03701a2 {
    --padding-top: 28px; --padding-bottom: 24px;
    padding-top: 28px !important; padding-bottom: 24px !important;
  }
  .elementor-element-98441b9 { row-gap: 26px !important; }
  .elementor-element-fe40ba4 { margin-top: 18px !important; padding-top: 16px !important; }
}

/* 3. Configurateur : sur mobile la photo est au-dessus, le titre, le
      chapeau et la liste la repoussaient hors ecran des qu on changeait
      de coloris. Masques sous 768px : photo, coloris et CTA se suivent. */
@media (max-width: 767px) {
  .perso-wrap .perso-left > h2,
  .perso-wrap .perso-left > p.sub,
  .perso-wrap .perso-left > ul.perso-feat { display: none !important; }
}

/* Passe mobile 08/09 (3) - finitions */
@media (max-width: 767px) {
  /* pied de page : la marge basse du dernier paragraphe s ajoutait a la
     gouttiere de 26px et faisait lire ~55px entre les blocs. */
  .elementor-element-03701a2 .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; }
  /* configurateur : photo et coloris rapproches (48 -> 28px). */
  .perso-wrap .perso-grid { gap: 28px !important; }
}

/* ============================================================
   Passe mobile 08/09 (4) - images La Marque, bandeau paysage, sous-menu
   ============================================================ */
@media (max-width: 767px) {
  /* Quatre images de La Marque etaient bloquees a 600-620px de haut avec
     object-fit: cover - valeur pensee pour deux colonnes de 600px en bureau.
     A 300px de large cela donnait un cadre 1:2 : la photo paysage (ratio 0,56)
     ne se voyait plus que sur une mince bande verticale.
     Sur mobile les images reprennent leur proportion d origine. */
  .elementor-739 .elementor-element.elementor-element-81dcbbc img,
  .elementor-739 .elementor-element.elementor-element-f71114a img,
  .elementor-739 .elementor-element.elementor-element-74b4e121 img,
  .elementor-739 .elementor-element.elementor-element-6e148122 img {
    height: auto !important;
    max-height: none !important;
  }
  /* Bandeau photo pleine largeur (2560 x 1265) : le min-height de 700px du
     bureau le transformait en cadrage vertical quasi vide. Format paysage. */
  .elementor-element-f478a56 {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    background-position: center center !important;
  }
}

/* Sous-menu univers replie par defaut : 9 entrees a plat, c etait trop long. */
@media (max-width: 1024px) {
  .e-n-menu-wrapper .e-n-menu-heading > .e-n-menu-item.hw-sub { display: none !important; }
  .e-n-menu-wrapper .e-n-menu-heading.hw-sub-open > .e-n-menu-item.hw-sub { display: block !important; }
  .e-n-menu-item.hw-has-sub > .e-n-menu-title { position: relative; }
  .hw-sub-toggle {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; background: none; border: 0; padding: 0;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .hw-sub-toggle i {
    display: block; width: 9px; height: 9px; margin-top: -4px;
    border-right: 1px solid #1C1C1E; border-bottom: 1px solid #1C1C1E;
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .hw-sub-open .hw-sub-toggle i { transform: rotate(-135deg); margin-top: 3px; }
}

/* Passe mobile 08/09 (5) - sur-mesure : savoir-faire masque, fond beige en blanc */
@media (max-width: 767px) {
  /* Section LE GESTE / Un savoir-faire francais masquee sur mobile. */
  .elementor-1433 .elementor-element.elementor-element-8b7a256 { display: none !important; }
}
/* Le bloc NOS ENGAGEMENTS / NOTRE METHODE passe du beige au blanc. */
.elementor-1433 .elementor-element.elementor-element-f33d74d,
.elementor-1433 .elementor-element.elementor-element-afdf644,
.elementor-1433 .elementor-element.elementor-element-d11792f {
  background-color: #FFFFFF !important;
}
@media (max-width: 767px) {
  /* Ces deux conteneurs gardaient un padding lateral de 44px du bureau :
     avec les 30px de la section, la colonne de texte tombait a 227px. */
  .elementor-element-afdf644, .elementor-element-d11792f {
    padding-left: 0 !important; padding-right: 0 !important;
  }
}

/* Passe mobile 08/09 (6) - en-tete mobile et chevron du sous-menu */
@media (max-width: 767px) {
  /* Le logo passe a 175px (reglage Elementor). Les deux icones sont
     rapprochees du bord pour degager la place sans chevauchement. */
  #hw-fav-link { right: 48px !important; }
  #hw-cart-icon { right: 14px !important; }
}
@media (max-width: 1024px) {
  /* le chevron perdait sa largeur face a une regle plus specifique */
  .hw-sub-toggle i { width: 9px !important; height: 9px !important; }
}

/* Passe mobile 08/09 (7) - chevron du sous-menu plus lisible et hors du texte */
@media (max-width: 1024px) {
  .hw-sub-toggle { width: 44px !important; right: -4px !important; }
  .hw-sub-toggle i { width: 10px !important; height: 10px !important;
    border-right-width: 1.5px !important; border-bottom-width: 1.5px !important;
    border-right-color: #1C1C1E !important; border-bottom-color: #1C1C1E !important; }
  .e-n-menu-item.hw-has-sub > .e-n-menu-title > a { padding-right: 4px !important; }
}

/* Passe mobile 08/09 (8) - menu mobile : police du bureau, fond blanc, chevron */
@media (max-width: 1024px) {
  /* Meme police que la navigation bureau : Jost 500, interlettrage 1,6px. */
  .e-n-menu-wrapper .e-n-menu-heading > .e-n-menu-item:not(.hw-sub):not(:last-child):not(:has(> .e-n-menu-title > a[href^="tel:"])):not(:has(> .e-n-menu-title > a[href^="mailto:"])) .e-n-menu-title-text {
    font-family: "Jost", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 1.4px !important;
    color: #000000 !important;
  }
  /* Fond du panneau : blanc au lieu du beige. */
  .e-n-menu-wrapper,
  header .elementor-element-8a346e8 .e-n-menu-wrapper { background-color: #FFFFFF !important; }
  /* Chevron plus franc pour signaler le depliage. */
  .hw-sub-toggle i {
    width: 13px !important; height: 13px !important;
    border-right-width: 2px !important; border-bottom-width: 2px !important;
  }
}

/* Passe mobile 08/09 (9) - chevron du sous-menu en fleche pleine */
@media (max-width: 1024px) {
  .hw-sub-toggle i {
    width: 17px !important; height: 17px !important;
    border: 0 !important; margin: 0 !important;
    transform: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 17px 17px no-repeat !important;
    transition: transform .2s ease !important;
  }
  .hw-sub-open .hw-sub-toggle i { transform: rotate(180deg) !important; }
}

/* ============================================================
   Passe mobile 08/09 (10) - en-tetes de page facon carte blanche (ref. Cultura)
   Le texte etait pose a meme la photo : illisible, et le cadrage
   cover a 460px de haut coupait les personnes. Sur mobile la photo
   devient une bande cadree sur les sujets, le texte passe dans une
   carte blanche posee dessus, avec un interligne resserre.
   ============================================================ */
@media (max-width: 767px) {
  .elementor-element-2095037 {
    min-height: 0 !important;
    --padding-top: 250px; --padding-bottom: 20px;
    --padding-left: 30px; --padding-right: 30px;
    --padding-bottom: 44px;
    padding: 250px 30px 44px !important;
    position: relative;
    row-gap: 8px !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: 72% center !important;
  }
  .elementor-element-2095037::after {
    content: ''; position: absolute; z-index: 0;
    left: 12px; right: 12px; top: 228px; bottom: 20px;
    background: #FFFFFF;
  }
  .elementor-element-2095037 > .elementor-element { position: relative; z-index: 1; }
}

/* Fiches univers : en-tete en beige #F7F5F2 (fond unique du site) - 13/10/2026, retour cliente.
   Remplace le blanc force lors de la passe du 08/09. Les photos ne sont pas touchees. */
.elementor-357 .elementor-element.elementor-element-70acf6ca,
.elementor-357 .elementor-element.elementor-element-feffc4b,
.elementor-357 .elementor-element.elementor-element-bf239c1 { background-color: #F7F5F2 !important; }

/* Passe mobile 08/09 (12) - en-tete de L Atelier : meme carte blanche.
   Structure differente du Process : section ancienne generation,
   la hauteur vient du min-height de .elementor-container et le texte
   est dans la colonne ukxvznx, en blanc sur la photo. */
@media (max-width: 767px) {
  .elementor-element-cxfrd82 {
    background-size: cover !important;
    background-position: 55% 22% !important;
  }
  .elementor-element-cxfrd82 > .elementor-container {
    min-height: 0 !important; height: auto !important;
    padding-top: 250px !important; padding-bottom: 20px !important;
    align-items: flex-end !important;
  }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx {
    background-color: #FFFFFF !important;
    margin: 0 12px !important;
    min-height: 0 !important;
  }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx { padding: 22px 18px 24px !important; }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx > .elementor-widget-wrap { padding: 0 !important; }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx .elementor-widget { margin-bottom: 10px !important; }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx .elementor-widget:last-child { margin-bottom: 0 !important; }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx .elementor-heading-title,
  .elementor-element-cxfrd82 .elementor-element-ukxvznx p,
  .elementor-element-cxfrd82 .elementor-element-ukxvznx .elementor-widget-container {
    color: #343333 !important;
  }
}

/* Passe mobile 08/09 (13) - en-tete RSE : meme carte blanche.
   Le H1 etait enferme dans une colonne de 150px : il se decoupait sur
   331px de haut. Il reprend toute la largeur. */
@media (max-width: 767px) {
  .elementor-element-d64f5e6 {
    min-height: 0 !important; position: relative;
    --padding-top: 250px; --padding-bottom: 44px;
    --padding-left: 30px; --padding-right: 30px;
    padding: 250px 30px 44px !important;
    row-gap: 8px !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: center 45% !important;
  }
  .elementor-element-d64f5e6::after {
    content: ''; position: absolute; z-index: 0;
    left: 12px; right: 12px; top: 228px; bottom: 20px;
    background: #FFFFFF;
  }
  .elementor-element-d64f5e6 > .e-con-inner,
  .elementor-element-d64f5e6 > .elementor-element { position: relative; z-index: 1; }
  .elementor-element-d64f5e6 .elementor-element-eec6267,
  .elementor-element-d64f5e6 .elementor-element-45b2eab {
    width: 100% !important; max-width: 100% !important; flex-basis: auto !important;
  }
  .elementor-element-d64f5e6 .elementor-heading-title,
  .elementor-element-d64f5e6 p { color: #343333 !important; }
}

/* Passe mobile 08/09 (14) - fleche du sous-menu refaite sur ::before.
   Le  se retrouvait a 0 de large malgre width !important ; le
   chevron est desormais porte par le bouton lui-meme, sans data-URI.
   Le panneau deroulant natif d Elementor (vide ici) apparaissait en
   rectangle sombre a cote de l entree : il est neutralise. */
@media (max-width: 1024px) {
  .e-n-menu-wrapper .e-n-menu-content { display: none !important; }
  .hw-sub-toggle { width: 44px !important; height: 44px !important; right: -2px !important; }
  .hw-sub-toggle i { display: none !important; }
  /* Une fleche en caractere : la largeur d une boite CSS se faisait
     ecraser a 0 dans ce bouton flex, un glyphe a sa largeur propre. */
  .hw-sub-toggle::before {
    content: '\25BE' !important; display: block !important;
    font-family: Arial, sans-serif !important;
    font-size: 17px !important; line-height: 1 !important;
    color: #1C1C1E !important; border: 0 !important;
    width: auto !important; height: auto !important;
    transform: none !important;
    transition: transform .2s ease !important;
  }
  .hw-sub-open .hw-sub-toggle::before { transform: rotate(180deg) !important; }
}

/* Passe mobile 08/09 (15) - RSE : chiffres cles allondis pour le telephone */
@media (max-width: 767px) {
  /* Trois indicateurs retires sur mobile : 0 intermediaire,
     +50% matiere recyclee, 4 certifications. */
  .elementor-element-d85f2aa,
  .elementor-element-0bf2a6a,
  .elementor-element-9eb6a3b { display: none !important; }
  /* Les trois chiffres restants passent de 26 a 40px. */
  .elementor-element-f19e472 .elementor-heading-title,
  .elementor-element-f9c8a17 .elementor-heading-title,
  .elementor-element-a728d62 .elementor-heading-title {
    font-size: 40px !important; line-height: 1.1 !important;
  }
  /* Ce libelle etait seul a 16px, les autres a 14px. */
  .elementor-element-b987403 .elementor-heading-title,
  .elementor-element-b987403 p { font-size: 14px !important; }
}

/* Passe mobile 08/09 (16) - RSE : chiffres cles mis en avant (ref. Marcy Paris).
   Chiffre centre en tres grand, libelle centre dessous, filet entre
   chaque bloc. Les trois indicateurs retires plus haut restent caches. */
@media (max-width: 767px) {
  .elementor-element-7623188,
  .elementor-element-c5fb6a3,
  .elementor-element-345fe0e {
    text-align: center !important;
    padding: 30px 0 34px !important;
    align-items: center !important;
  }
  .elementor-element-f19e472 .elementor-heading-title,
  .elementor-element-f9c8a17 .elementor-heading-title,
  .elementor-element-a728d62 .elementor-heading-title {
    font-size: 72px !important; line-height: 1 !important; text-align: center !important;
  }
  .elementor-element-da26dfd .elementor-heading-title, .elementor-element-da26dfd p,
  .elementor-element-14cfaa8 .elementor-heading-title, .elementor-element-14cfaa8 p,
  .elementor-element-b987403 .elementor-heading-title, .elementor-element-b987403 p {
    font-size: 15px !important; text-align: center !important; margin-top: 10px !important;
  }
}

/* Passe mobile 08/09 (17) - le bouton du sous-menu ne peint plus rien.
   Sur iOS le bouton apparaissait en rectangle sombre : les styles natifs
   du navigateur reprenaient la main des que la regle de fond echouait.
   Tout est neutralise (apparence, fond, bordure, ombre) et le glyphe est
   retire. La zone reste tactile de 44px, simplement invisible. */
@media (max-width: 1024px) {
  .hw-sub-toggle {
    -webkit-appearance: none !important; appearance: none !important;
    background: none !important; background-color: transparent !important;
    background-image: none !important;
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; outline: none !important;
    color: transparent !important; font-size: 0 !important;
  }
  .hw-sub-toggle::before, .hw-sub-toggle::after { content: none !important; }
  .hw-sub-toggle i { display: none !important; }
}

/* ============================================================
   Passe mobile 08/09 (18) - carte blanche etendue a l accueil, sur-mesure, Lookbook
   Cadrages releves sur planche-contact : le duo est a droite sur
   l accueil et sur sur-mesure, le mannequin est centre sur le Lookbook.
   ============================================================ */
@media (max-width: 767px) {
  /* Le Process : le voile beige qui delavait la photo n a plus lieu
     d etre, le texte est desormais dans la carte. */
  .elementor-element-2095037::before { background-image: none !important; background-color: transparent !important; }
  .elementor-element-ace850c {
    min-height: 0 !important; position: relative;
    --padding-top: 250px; --padding-bottom: 44px;
    --padding-left: 30px; --padding-right: 30px;
    padding: 250px 30px 44px !important;
    row-gap: 8px !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: 70% center !important;
  }
  .elementor-element-ace850c::after {
    content: '' !important; position: absolute; z-index: 0;
    left: 12px; right: 12px; top: 228px; bottom: 20px;
    background: #FFFFFF;
  }
  .elementor-element-ace850c > .e-con-inner,
  .elementor-element-ace850c > .elementor-element { position: relative; z-index: 1; }
  .elementor-element-3071768d {
    min-height: 0 !important; position: relative;
    --padding-top: 250px; --padding-bottom: 44px;
    --padding-left: 30px; --padding-right: 30px;
    padding: 250px 30px 44px !important;
    row-gap: 8px !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: center center !important;
  }
  .elementor-element-3071768d::after {
    content: '' !important; position: absolute; z-index: 0;
    left: 12px; right: 12px; top: 228px; bottom: 20px;
    background: #FFFFFF;
  }
  .elementor-element-3071768d > .e-con-inner,
  .elementor-element-3071768d > .elementor-element { position: relative; z-index: 1; }
  .elementor-element-d15a2f9 {
    min-height: 0 !important; position: relative;
    --padding-top: 250px; --padding-bottom: 44px;
    --padding-left: 30px; --padding-right: 30px;
    padding: 250px 30px 44px !important;
    row-gap: 8px !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: 75% center !important;
  }
  .elementor-element-d15a2f9::after {
    content: '' !important; position: absolute; z-index: 0;
    left: 12px; right: 12px; top: 228px; bottom: 20px;
    background: #FFFFFF;
  }
  .elementor-element-d15a2f9 > .e-con-inner,
  .elementor-element-d15a2f9 > .elementor-element { position: relative; z-index: 1; }
}

/* Textes courants a gauche sur mobile ; titres centres (demande 08/09). */
@media (max-width: 767px) {
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p,
  .elementor-widget-text-editor li { text-align: left !important; }
  /* Tous les titres centres sur mobile, toutes pages. */
  .elementor-widget-heading .elementor-heading-title { text-align: center !important; }
  /* Exception : les chiffres cles RSE restent centres (modele Marcy). */
  .elementor-element-7623188 .elementor-heading-title,
  .elementor-element-c5fb6a3 .elementor-heading-title,
  .elementor-element-345fe0e .elementor-heading-title,
  .elementor-element-7623188 p,
  .elementor-element-c5fb6a3 p,
  .elementor-element-345fe0e p { text-align: center !important; }

  /* Exception : bloc des 4 atouts de l'accueil, centre comme ses icones. */
  .elementor-element.elementor-element-cc5cb11 .elementor-widget-text-editor,
  .elementor-element.elementor-element-cc5cb11 .elementor-widget-text-editor p { text-align: center !important; }

  /* Exception : titre Ils nous ont fait confiance (accueil + uniformes sur mesure). */
  .elementor-element.elementor-element-e35ae44 .elementor-heading-title,
  .elementor-element.elementor-element-3bad7504 .elementor-heading-title { text-align: center !important; }

  /* Exception : titres des vignettes univers de l'accueil, centres sur la photo. */
  .elementor-element.elementor-element-d54b320 .elementor-widget-heading .elementor-heading-title { text-align: center !important; }
}

/* ============================================================
   Passe mobile 08/09 (19) - en-tetes en deux zones distinctes (demande client)
   La carte blanche posee sur la photo est abandonnee : la photo
   occupe une bande pleine largeur de 250px, le texte suit dessous
   sur fond blanc pleine largeur. Deux blocs nets, pas de carte.
   ============================================================ */
@media (max-width: 767px) {
  .elementor-element-2095037 {
    padding: 250px 30px 40px !important;
    --padding-top: 250px; --padding-bottom: 40px;
  }
  .elementor-element-2095037::after {
    left: 0 !important; right: 0 !important;
    top: 250px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  .elementor-element-d64f5e6 {
    padding: 250px 30px 40px !important;
    --padding-top: 250px; --padding-bottom: 40px;
  }
  .elementor-element-d64f5e6::after {
    left: 0 !important; right: 0 !important;
    top: 250px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  .elementor-element-ace850c {
    padding: 250px 30px 40px !important;
    --padding-top: 250px; --padding-bottom: 40px;
  }
  .elementor-element-ace850c::after {
    left: 0 !important; right: 0 !important;
    top: 250px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  .elementor-element-3071768d {
    padding: 250px 30px 40px !important;
    --padding-top: 250px; --padding-bottom: 40px;
  }
  .elementor-element-3071768d::after {
    left: 0 !important; right: 0 !important;
    top: 250px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  .elementor-element-d15a2f9 {
    padding: 250px 30px 40px !important;
    --padding-top: 250px; --padding-bottom: 40px;
  }
  .elementor-element-d15a2f9::after {
    left: 0 !important; right: 0 !important;
    top: 250px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  /* L Atelier : section ancienne generation, le blanc etait porte par
     la colonne. Elle reprend toute la largeur, sans marge ni carte. */
  .elementor-element-cxfrd82 > .elementor-container {
    padding-top: 250px !important; padding-bottom: 0 !important;
  }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx {
    margin: 0 !important;
    padding: 26px 30px 40px !important;
    width: 100% !important; max-width: 100% !important;
  }
}

/* Passe mobile 08/09 (20) - correctif : sur certains en-tetes les widgets sont dans un
   conteneur intermediaire, ils passaient donc derriere le bloc blanc. */
@media (max-width: 767px) {
  .elementor-element-2095037 > * { position: relative; z-index: 1; }
  .elementor-element-d64f5e6 > * { position: relative; z-index: 1; }
  .elementor-element-ace850c > * { position: relative; z-index: 1; }
  .elementor-element-3071768d > * { position: relative; z-index: 1; }
  .elementor-element-d15a2f9 > * { position: relative; z-index: 1; }
}

/* Passe mobile 08/09 (21) - Lookbook : la barre de filtres sur une seule ligne.
   Huit categories a 12px se repliaient sur trois rangs en escalier.
   Elles defilent maintenant horizontalement, pleine largeur. */
@media (max-width: 767px) {
  .e-filter {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 24px !important;
    width: auto !important;
    margin-left: -30px !important; margin-right: -30px !important;
    padding: 2px 30px 12px !important;
  }
  .e-filter::-webkit-scrollbar { display: none; }
  .e-filter > * { flex: 0 0 auto !important; white-space: nowrap !important; }
}

/* Passe mobile 08/09 (22) - la photo est peinte dans la bande, plus sur toute la section.
   Le fond de section couvrait toute la hauteur : sur le Lookbook, dont la
   section fait 562px, le zoom etait tel que la bande ne montrait que le mur
   blanc au-dessus du mannequin. Le ::before reprend l image (inherit) et la
   cadre sur 250px ; le ::after blanc couvre le reste. */
@media (max-width: 767px) {
  .elementor-element-2095037::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 84% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  .elementor-element-d64f5e6::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  .elementor-element-ace850c::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 86% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  .elementor-element-3071768d::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 91% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  .elementor-element-d15a2f9::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 85% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
}

/* Passe mobile 08/09 (23) - specificite relevee pour la bande photo.
   Une regle du 07/09 en body .elementor .elementor-element...::before
   forcait background-image: none sur le Lookbook et gagnait la cascade. */
@media (max-width: 767px) {
  body .elementor .elementor-element.elementor-element-3071768d::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    width: auto !important; height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 91% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important; display: block !important;
  }
  body .elementor .elementor-element.elementor-element-2095037::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    width: auto !important; height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 84% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important; display: block !important;
  }
  body .elementor .elementor-element.elementor-element-d64f5e6::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    width: auto !important; height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important; display: block !important;
  }
  body .elementor .elementor-element.elementor-element-ace850c::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    width: auto !important; height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 86% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important; display: block !important;
  }
  body .elementor .elementor-element.elementor-element-d15a2f9::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    width: auto !important; height: 250px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 85% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important; display: block !important;
  }
}

/* Passe mobile 08/09 (24) - etiquettes HOMME / FEMME en bas a gauche.
   Elles etaient centrees en bas et tombaient au milieu des mannequins. */
@media (max-width: 767px) {
  .elementor-element-9221114 {
    justify-content: flex-start !important;
    align-items: flex-end !important;
  }
  /* FEMME a droite : on alterne, comme POUR LUI / POUR ELLE chez Marcy. */
  .elementor-element-cd1e013 {
    justify-content: flex-end !important;
    align-items: flex-end !important;
  }
}

/* Passe mobile 08/09 (25) - image avant texte partout.
   Six rangs alternaient [texte | image] en bureau et s empilaient donc
   texte puis image sur mobile, a l inverse des autres. La colonne image
   passe en premier (order: -1). */
@media (max-width: 767px) {
  /* La Marque : Myriame Ponzio, Les matieres, Le showroom */
  .elementor-element-0eca295,
  .elementor-element-ejqisry,
  .elementor-element-14073f4,
  /* L Atelier : Les chaines, Le modelisme, La couleur */
  .elementor-element-cddc525,
  .elementor-element-pzofaap,
  .elementor-element-naxrqwm { order: -1 !important; }
}

/* Passe mobile 08/09 (26) - pied de page mobile sur le modele Marcy Paris :
   monogramme centre, newsletter juste dessous, puis les groupes de
   liens en deux colonnes, chacun en liste verticale. */
@media (max-width: 767px) {
  /* 1. Monogramme centre */
  .elementor-element-b5f41e6 { text-align: center !important; }
  .elementor-element-b5f41e6 .elementor-widget-container { text-align: center !important; }
  .elementor-element-b5f41e6 img { margin-left: auto !important; margin-right: auto !important; }

  /* 2. Grille a deux colonnes */
  .elementor-element-98441b9 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 18px !important;
    row-gap: 30px !important;
  }
  .elementor-element-4a8f296 { order: -2 !important; grid-column: 1 / -1 !important; }
  .elementor-element-3962552 { order: -1 !important; grid-column: 1 / -1 !important; }
  .elementor-element-6ea67a2 { grid-column: 1 !important; }
  .elementor-element-86ac2be { grid-column: 2 !important; }

  /* 3. Les liens des deux groupes passent en liste verticale */
  .elementor-element-5118e95 p a,
  .elementor-element-cadf79c p a {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 9px !important;
  }
}


/* ============================================================
   08/09/2026 (soir) - passe mobile : bouton, en-tetes, hierarchie
   ============================================================ */

/* 1 - Libelle de bouton lisible au survol.
   Les blocs DA Marcy forcent la couleur de TOUS leurs  en #1a1a1a.
   Le libelle d'un bouton Elementor est un  : il restait noir alors que
   le fond du bouton passait au noir au survol. Sur iOS l'etat de survol reste
   colle apres un appui, d'ou un bouton noir sans texte. */
/* Correctif : le libelle du bouton est exclu du forcage ci-dessus
   (voir les :not(.elementor-button-text) ajoutes aux selecteurs DA Marcy). */

@media (max-width:767px){

  /* 2 - Respiration sous la bande photo des en-tetes.
     Bande ::before = 250px et padding haut = 250px : le sur-titre demarrait
     exactement au bord de la photo. RSE etait deja a 278px, valeur de reference. */
  body .elementor .elementor-element.elementor-element-ace850c,
  body .elementor .elementor-element.elementor-element-d15a2f9,
  body .elementor .elementor-element.elementor-element-3071768d,
  body .elementor .elementor-element.elementor-element-2095037{
    padding-top:278px !important;
  }

  /* 3 - Lookbook : chapo d'intro degraisse (widget Titre, heritait du 600)
     et vide avant la barre de filtres ramene de ~80 a ~48px. */
  body .elementor-element-9181c648 .elementor-heading-title{ font-weight:400 !important; }
  body .elementor .elementor-element.elementor-element-03e6a9c > .e-con-inner{ padding-top:8px !important; }

  /* 4 - Hierarchie titre / corps de texte.
     L'Atelier : seul H1 du site en graisse 400, et seul corps de texte chasse
     a 2px - le paragraphe se lisait comme un second titre. */
  body.page-id-693 .elementor-element-o9gnqvc .elementor-heading-title{
    font-weight:600 !important; letter-spacing:normal !important;
  }
  body.page-id-693 .elementor-widget-text-editor p{ letter-spacing:normal !important; }

  /* La Marque : corps en graisse 300 sous un titre en 500, ecart trop faible. */
  body.page-id-739 .elementor-widget-text-editor p{ font-weight:400 !important; }

  /* Accueil : H1 en Jost 400, meme famille et presque meme graisse que le corps. */
  body.page-id-10 .elementor-element-b56f4da .elementor-heading-title{
    font-weight:400 !important; letter-spacing:1px !important; font-size:34px !important;
  }
}

/* Passe mobile 08/09 (27) - fiches metiers (gabarit 357) : photo en tete.
   La photo arrivait apres le bloc de texte, rognee a 285x320 dans une
   colonne de 315. Elle passe en premier, pleine largeur, en 4/5,
   cadrage haut pour garder les visages. Les 9 fiches partagent le
   gabarit : une seule regle les couvre toutes. */
@media (max-width: 767px) {
  .elementor-357 .elementor-element.elementor-element-bb8cb31 {
    order: -1 !important;
    margin-bottom: 30px !important;
    width: 100% !important; max-width: 100% !important;
  }
  .elementor-357 .elementor-element.elementor-element-bb8cb31 > .elementor-widget-container { width: 100% !important; }
  .elementor-357 .elementor-element.elementor-element-bb8cb31 img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    filter: none !important;
  }
  .elementor-357 .elementor-element.elementor-element-bb8cb31,
  .elementor-357 .elementor-element.elementor-element-bb8cb31 > .elementor-widget-container,
  .elementor-357 .elementor-element.elementor-element-bb8cb31 figure,
  .elementor-357 .elementor-element.elementor-element-bb8cb31 .elementor-image {
    box-shadow: none !important; filter: none !important; border-radius: 0 !important;
  }
}

/* ===================================================================== */
/* 08/09/2026 - Fiches univers (modele 357) : ecart photo / texte.        */
/* Les deux sections editoriales laissaient ~200px entre la photo (520px  */
/* fixes) et le texte, la colonne image faisant 668px puis 702px.         */
/* Les colonnes passent en proportionnel : photo 48.35% de la rangee,     */
/* plafonnee a 600px, ecart 80px, le texte prend le reste. A la largeur   */
/* de reference (contenu 1241px) : photo 600x900, ecart 80, texte 561.    */
/* Le bloc "Votre signature" suit le meme gabarit. Rien sous 1025px.      */
@media (min-width:1025px){
  /* Section 1 - "L identite d un lieu se porte aussi." */
  body .elementor-element-6a4a427{gap:80px !important;flex-wrap:nowrap !important;}
  body .elementor-element-0de6d06{width:auto !important;flex:0 1 48.35% !important;max-width:600px !important;min-width:0 !important;--container-widget-width:48.35% !important;}
  body .elementor-element-0de6d06 > .elementor-widget-container{margin:0 !important;}
  body .elementor-element-70e137d{width:auto !important;max-width:none !important;flex:1 1 0 !important;min-width:0 !important;}

  /* Section 2 - "L elegance se revele dans les details." */
  body .elementor-element-1778034 > .e-con-inner{gap:80px !important;flex-wrap:nowrap !important;}
  body .elementor-element-51dc6ed{width:auto !important;flex:0 1 48.35% !important;max-width:600px !important;min-width:0 !important;}
  body .elementor-element-2fef2ef{width:auto !important;max-width:none !important;flex:1 1 0 !important;min-width:0 !important;}

  /* Les photos remplissent leur colonne, format 2:3 conserve. */
  body .elementor-element-3cd7449 .elementor-widget-image img,
  body .elementor-element-1778034 .elementor-widget-image img{width:100% !important;max-width:100% !important;height:auto !important;aspect-ratio:2 / 3 !important;margin-left:0 !important;margin-right:0 !important;}

  /* Bloc "Votre signature" : meme gabarit, photo calee a droite. */
  body .elementor-element-6333eac .perso-grid{gap:80px !important;flex-wrap:nowrap !important;}
  body .elementor-element-6333eac .perso-left{flex:1 1 0 !important;min-width:0 !important;}
  body .elementor-element-6333eac .perso-right{flex:0 1 48.35% !important;max-width:600px !important;min-width:0 !important;}
  body .elementor-element-6333eac .perso-imgbox{width:100% !important;max-width:100% !important;height:auto !important;aspect-ratio:2 / 3 !important;margin-left:auto !important;margin-right:0 !important;}
}


/* ============================================================
   ORDRE MOBILE MARCY - en-tete des 9 fiches univers (modele 357)
   08/09/2026. Sous 880px la colonne s'empile : on veut
   titre > sous-titre > chapeau > photo > 40 ans > boutons,
   comme la page metier de Marcy Paris.
   Cette regle passe apres celle qui remontait la photo en tete.
   ============================================================ */
@media (max-width: 880px) {
  body .elementor-357 .elementor-element.elementor-element-feffc4b { row-gap: 20px !important; align-items: stretch !important; }
  body .elementor-357 .elementor-element.elementor-element-bf239c1 { display: contents !important; }
  body .elementor-357 .elementor-element.elementor-element-649dde4c { order: 1 !important; }
  body .elementor-357 .elementor-element.elementor-element-082ae61  { order: 2 !important; }
  body .elementor-357 .elementor-element.elementor-element-a81db79  { order: 3 !important; }
  body .elementor-357 .elementor-element.elementor-element-bb8cb31  { order: 4 !important; margin-top: 12px !important; margin-bottom: 12px !important; }
  body .elementor-357 .elementor-element.elementor-element-96f0f6f  { order: 5 !important; }
  body .elementor-357 .elementor-element.elementor-element-ec8de54  { order: 6 !important; }
}

/* Cartes "notre accompagnement" des fiches univers : plus d'ombre portee,
   au repos comme au survol. */
body .elementor-357 .elementor-element.elementor-element-52aba86 > .e-con,
body .elementor-357 .elementor-element.elementor-element-52aba86 > .e-con:hover { box-shadow: none !important; }


/* Passe tablette 08/09 - pied de page : entre 768 et 1024 px les 4 colonnes a 47 % plus la
   gouttiere de 44 px depassaient d 1 px la largeur utile : elles s empilaient
   sur une seule demi-colonne, avec pres de 380 px de vide a droite. Et les
   liens des deux listes se collaient (les  sont masques sous 1024 px, les
   liens sont en inline-block sans ecart horizontal depuis la passe du 06/09).
   On reprend ici le modele mobile : monogramme centre, newsletter pleine
   largeur, AIDE pleine largeur, puis les deux groupes de liens cote a cote,
   chacun en liste verticale. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 1. Monogramme centre */
  footer .elementor-element-b5f41e6,
  footer .elementor-element-b5f41e6 .elementor-widget-container { text-align: center !important; }
  footer .elementor-element-b5f41e6 img { margin-left: auto !important; margin-right: auto !important; }

  /* 2. Grille a deux colonnes, largeurs Elementor neutralisees */
  footer .elementor-element-98441b9 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 44px !important;
    row-gap: 40px !important;
  }
  footer .elementor-element-3962552,
  footer .elementor-element-6ea67a2,
  footer .elementor-element-86ac2be,
  footer .elementor-element-4a8f296 { --width: auto !important; width: auto !important; max-width: none !important; }
  footer .elementor-element-4a8f296 { order: -2 !important; grid-column: 1 / -1 !important; }
  footer .elementor-element-3962552 { order: -1 !important; grid-column: 1 / -1 !important; }
  footer .elementor-element-6ea67a2 { grid-column: 1 !important; }
  footer .elementor-element-86ac2be { grid-column: 2 !important; }

  /* Le champ e-mail et le bouton ne s etirent pas sur toute la largeur */
  footer .elementor-element-292f303 { max-width: 460px !important; }
  footer .elementor-element-9d8e3b4 { max-width: 62ch !important; }

  /* 3. Les liens des deux groupes en liste verticale */
  footer .elementor-element-5118e95 p a,
  footer .elementor-element-cadf79c p a {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 9px !important;
  }
}

/* Passe tablette 08/09 (2) - en-tetes photo puis texte : entre 768 et 1024px les en-tetes affichaient le
   texte en haut et la photo dessous (fond de section en cover sur une
   section de 940px). On reprend le motif mobile : bande photo de 420px
   en haut, bloc blanc dessous, texte cale en bas. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .elementor-element.elementor-element-2095037,
  body .elementor .elementor-element.elementor-element-d64f5e6,
  body .elementor .elementor-element.elementor-element-ace850c,
  body .elementor .elementor-element.elementor-element-3071768d,
  body .elementor .elementor-element.elementor-element-d15a2f9 {
    position: relative !important;
    min-height: 0 !important;
    justify-content: flex-end !important;
    row-gap: 10px !important;
    --padding-top: 420px; --padding-bottom: 48px;
    --padding-left: 40px; --padding-right: 40px;
    padding: 420px 40px 48px !important;
    background-size: cover !important;
  }
  /* Le Process */
  body .elementor .elementor-element.elementor-element-2095037::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 420px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 84% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  body .elementor .elementor-element.elementor-element-2095037::after {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 420px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  body .elementor .elementor-element.elementor-element-2095037 > * { position: relative; z-index: 1; }
  /* RSE */
  body .elementor .elementor-element.elementor-element-d64f5e6::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 420px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  body .elementor .elementor-element.elementor-element-d64f5e6::after {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 420px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  body .elementor .elementor-element.elementor-element-d64f5e6 > * { position: relative; z-index: 1; }
  /* Accueil */
  body .elementor .elementor-element.elementor-element-ace850c::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 420px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 86% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  body .elementor .elementor-element.elementor-element-ace850c::after {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 420px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  body .elementor .elementor-element.elementor-element-ace850c > * { position: relative; z-index: 1; }
  /* Lookbook */
  body .elementor .elementor-element.elementor-element-3071768d::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 420px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 91% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  body .elementor .elementor-element.elementor-element-3071768d::after {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 420px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  body .elementor .elementor-element.elementor-element-3071768d > * { position: relative; z-index: 1; }
  /* Uniformes sur mesure */
  body .elementor .elementor-element.elementor-element-d15a2f9::before {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
    height: 420px !important;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: 85% center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
  body .elementor .elementor-element.elementor-element-d15a2f9::after {
    content: '' !important;
    position: absolute !important; z-index: 0 !important;
    left: 0 !important; right: 0 !important; top: 420px !important; bottom: 0 !important;
    background: #FFFFFF !important;
  }
  body .elementor .elementor-element.elementor-element-d15a2f9 > * { position: relative; z-index: 1; }
}

/* Passe tablette 08/09 (3) - configurateur Votre signature : le texte revient
   a cote de la photo, comme en bureau. Sous 1025px la grille passait en
   colonne (photo en order -1), ce qui laissait une demi-largeur vide. */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor .perso-wrap .perso-grid {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 32px !important;
  }
  body .elementor .perso-wrap .perso-left { order: 0 !important; flex: 1 1 0 !important; min-width: 0 !important; }
  body .elementor .perso-wrap .perso-right { order: 0 !important; flex: 0 1 44% !important; min-width: 0 !important; max-width: 44% !important; }
}

/* Passe tablette 08/09 (4) - en-tete de L Atelier : meme motif que les cinq autres en-tetes, mais
   section ancienne generation (la hauteur vient du min-height de
   .elementor-container et le texte est dans la colonne ukxvznx). */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-cxfrd82 {
    background-size: cover !important;
    background-position: 55% 22% !important;
  }
  .elementor-element-cxfrd82 > .elementor-container {
    min-height: 0 !important; height: auto !important;
    padding-top: 420px !important; padding-bottom: 0 !important;
    align-items: flex-end !important;
  }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx {
    background-color: #FFFFFF !important;
    margin: 0 !important;
    padding: 32px 40px 48px !important;
    width: 100% !important;
    min-height: 0 !important;
  }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx > .elementor-widget-wrap { padding: 0 !important; }
  .elementor-element-cxfrd82 .elementor-element-ukxvznx .elementor-heading-title,
  .elementor-element-cxfrd82 .elementor-element-ukxvznx p,
  .elementor-element-cxfrd82 .elementor-element-ukxvznx .elementor-widget-container {
    color: #343333 !important;
  }
}

/* Passe tablette 08/09 (5) - finitions des en-tetes */
@media (min-width: 768px) and (max-width: 1024px) {
  /* RSE : le texte du hero etait blanc, il etait pose sur la photo.
     Depuis qu il est sur le bloc blanc, il etait invisible. */
  .elementor-element-d64f5e6 .elementor-heading-title,
  .elementor-element-d64f5e6 p { color: #343333 !important; }
  /* L Atelier : texte cale a gauche comme les cinq autres en-tetes */
  .elementor-element-cxfrd82 .elementor-element-ukxvznx,
  .elementor-element-cxfrd82 .elementor-element-ukxvznx .elementor-heading-title,
  .elementor-element-cxfrd82 .elementor-element-ukxvznx p { text-align: left !important; }
}

/* Passe tablette 08/09 (6) - boutons alignes sur uniformes-sur-mesure : les deux blocs Nos engagements / Notre methode ont des
   textes de longueurs differentes (5 lignes contre 6 sous 1024px), les deux
   boutons En savoir plus se retrouvaient decales de 28px. Les colonnes font
   deja la meme hauteur : le bouton est simplement pousse en bas de colonne. */
@media (max-width: 1024px) {
  .elementor-element-afdf644,
  .elementor-element-d11792f { display: flex !important; flex-direction: column !important; }
  .elementor-element-3e29201,
  .elementor-element-ea6e3e2 { margin-top: auto !important; }
}


/* Passe mobile 08/09 (28) - Accueil mobile : la photo passe devant.
   Le H1 sort de l affichage (sr-only : il reste dans le code pour l indexation
   mobile-first mais n occupe plus l ecran), la bande photo monte de 250px a
   ~64vh pour que le couple soit ce que l on voit en arrivant, et les textes du
   hero et de la section Une expertise sont centres. */
@media (max-width: 767px) {
  .elementor-44 .elementor-element.elementor-element-ace850c {
    --hw-hero-band: clamp(400px, 64vh, 560px);
    padding-top: var(--hw-hero-band) !important;
  }
  body .elementor .elementor-44 .elementor-element.elementor-element-ace850c::before {
    height: var(--hw-hero-band) !important;
    background-position: 86% center !important;
  }
  .elementor-44 .elementor-element.elementor-element-ace850c::after {
    top: var(--hw-hero-band) !important;
  }
  .elementor-44 .elementor-element.elementor-element-b56f4da {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .elementor-44 .elementor-element.elementor-element-747c569,
  .elementor-44 .elementor-element.elementor-element-4bdeda6,
  .elementor-44 .elementor-element.elementor-element-4bdeda6 .elementor-widget-container,
  .elementor-44 .elementor-element.elementor-element-4bdeda6 p,
  .elementor-44 .elementor-element.elementor-element-0417a32,
  .elementor-44 .elementor-element.elementor-element-df66b03,
  .elementor-44 .elementor-element.elementor-element-df66b03 .elementor-widget-container,
  .elementor-44 .elementor-element.elementor-element-7b9bb14,
  .elementor-44 .elementor-element.elementor-element-d2241da,
  .elementor-44 .elementor-element.elementor-element-e0f4edf,
  .elementor-44 .elementor-element.elementor-element-e0f4edf .elementor-heading-title,
  .elementor-44 .elementor-element.elementor-element-976e781,
  .elementor-44 .elementor-element.elementor-element-976e781 .elementor-widget-container,
  .elementor-44 .elementor-element.elementor-element-976e781 p {
    text-align: center !important;
  }
  .elementor-44 .elementor-element.elementor-element-0417a32 {
    justify-content: center !important;
  }
}


/* ===== 08/09/2026 (nuit) - Logo mobile distinct du logo bureau =====
   Sous 768 px : nouveau logo deux lignes, widget ce83d1c (le widget 21d34d36, logo
   d'origine sur une ligne, est masque). Au-dessus de 767 px : rien ne change.
   Ces regles rejouent pour le widget mobile ce que le CSS existant fait deja pour
   le widget bureau (boite de 76 px, recadrage, logo blanc sur le hero d'accueil).
   Le fichier du logo deux lignes porte 108 px de vide en haut pour 24 en bas :
   d'ou le calc() qui remonte le lettrage sur l'axe de l'en-tete. */
@media (max-width: 767px){
header .elementor-element-ce83d1c img{ height:76px !important; max-height:76px !important; object-fit:contain !important; object-position:center calc(50% - 5px) !important; transition:filter .3s cubic-bezier(.215,.61,.355,1); }
.home.hw-header-top header .elementor-element-ce83d1c img{ filter:brightness(0) invert(1) !important; }
}

/* ===== 08/09/2026 (nuit) - Fleche du sous-menu remise en place =====
   La passe (17) neutralisait le bouton en entier pour supprimer le rectangle sombre
   d'iOS ; le glyphe est parti avec. On garde la neutralisation et on repeint la seule
   fleche, avec sa couleur et sa taille propres, pour qu'elle echappe au
   color:transparent et au font-size:0 du bouton. */
@media (max-width: 1024px){
header .hw-sub-toggle::before{ content:'\25BE' !important; display:block !important; font-family:Arial,Helvetica,sans-serif !important; font-size:18px !important; line-height:1 !important; margin-top:-2px !important; color:#1C1C1E !important; -webkit-text-fill-color:#1C1C1E !important; transition:transform .2s ease; }
header .hw-sub-open .hw-sub-toggle::before,
header .hw-sub-toggle[aria-expanded="true"]::before{ transform:rotate(180deg) !important; }
}


/* Passe mobile 08/09 (29) - correctif de la passe (28) : la bande photo de l accueil.
   En (28) les regles etaient ecrites en .elementor-element-ace850c seul et en
   body .elementor .elementor-44 ... : la premiere ne reprenait pas le retrait du
   conteneur (Elementor l applique via padding-block-start: var(--padding-top)),
   la seconde ne matchait jamais car .elementor et .elementor-44 sont portes par
   le meme noeud. D ou une bande restee a 250px. */
@media (max-width: 767px) {
  html body .elementor-44 .elementor-element.elementor-element-ace850c {
    --hw-hero-band: clamp(400px, 64vh, 560px);
    --padding-top: var(--hw-hero-band) !important;
    padding-top: var(--hw-hero-band) !important;
  }
  html body .elementor-44 .elementor-element.elementor-element-ace850c::before {
    height: var(--hw-hero-band) !important;
    background-position: 86% center !important;
  }
  html body .elementor-44 .elementor-element.elementor-element-ace850c::after {
    top: var(--hw-hero-band) !important;
  }
}


/* ===== 08/09/2026 (nuit) - Bascule des deux logos =====
   Le masquage responsive natif d'Elementor ecrit une classe elementor-hidden SANS
   suffixe de terminal sur ce site : il masque a toutes les largeurs (piege deja
   rencontre le 25/08 sur les deux zones de navigation de l'en-tete). La bascule se
   fait donc ici : logo une ligne au-dessus de 767 px, logo deux lignes en dessous. */
@media (max-width: 767px){ header .elementor-element-21d34d36{ display:none !important; } }
@media (min-width: 768px){ header .elementor-element-ce83d1c{ display:none !important; } }

/* Passe 08/09 (7) - icones des blocs Nos engagements / Notre methode :
   deux widgets Image natifs ajoutes en tete des colonnes afdf644 et d11792f
   (picto RSE et picto co-design de la section icones de l accueil).
   Les traits du PNG sont deja en noir pur, mais le fond du fichier est
   blanc opaque : mix-blend-mode le fond dans la page au lieu de laisser
   un carre. (filter: brightness(0) noircissait tout le carre.) */
.elementor-element-85ef131 img,
.elementor-element-3941237 img { mix-blend-mode: multiply; }


/* Passe mobile 08/09 (30) - hauteur des bandes photo d en-tete.
   Demande de Maxence (capture annotee, reference Marcy Paris ou la photo
   d en-tete est un carre) : la bande passe de 250px a min(115vw, 500px).
   Le ::after blanc et le padding-top de section suivent, en gardant les
   28px de respiration de la passe (24). L accueil (ace850c) n est pas
   concerne : sa photo fait deja 540px depuis la passe (28)/(29). */
@media (max-width: 767px) {
  body .elementor .elementor-element.elementor-element-d15a2f9::before,
  body .elementor .elementor-element.elementor-element-3071768d::before,
  body .elementor .elementor-element.elementor-element-2095037::before,
  body .elementor .elementor-element.elementor-element-d64f5e6::before {
    height: min(115vw, 500px) !important;
  }
  body .elementor .elementor-element.elementor-element-d15a2f9::after,
  body .elementor .elementor-element.elementor-element-3071768d::after,
  body .elementor .elementor-element.elementor-element-2095037::after,
  body .elementor .elementor-element.elementor-element-d64f5e6::after {
    top: min(115vw, 500px) !important;
  }
  body .elementor .elementor-element.elementor-element-d15a2f9,
  body .elementor .elementor-element.elementor-element-3071768d,
  body .elementor .elementor-element.elementor-element-2095037,
  body .elementor .elementor-element.elementor-element-d64f5e6 {
    padding-top: calc(min(115vw, 500px) + 28px) !important;
  }
  body .elementor .elementor-element.elementor-element-cxfrd82 > .elementor-container {
    padding-top: min(115vw, 500px) !important;
  }
  /* bande carree : le sommet du crane du mannequin sortait a 8% */
  body .elementor .elementor-element.elementor-element-3071768d::before {
    background-position: 91% center !important;
  }
}

/* Passe tablette 08/09 (8) - rangees image + texte empilees :
   entre 768 et 1024px, six rangees a deux colonnes devenaient illisibles —
   soit la colonne de texte tombait a 225/275px (les dirigeantes de La Marque),
   soit la photo, en paysage, ne faisait que 228px de haut face a 580px de
   texte, laissant un trou de 350px. On les empile : photo pleine largeur
   d abord, texte ensuite — la photo passe de 342 a 588px de large, soit la
   taille qu elle a en bureau. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* La Marque - Sylvie Pinet */
  .elementor-element-b29ad93 > .elementor-container,
  .elementor-element-b29ad93 > .e-con-inner {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .elementor-element-09e3b46,
  .elementor-element-68e94e9 { width: 100% !important; max-width: none !important; }
  .elementor-element-09e3b46 { order: -1 !important; }
  /* La Marque - Myriame Ponzio */
  .elementor-element-bdeebf1 > .elementor-container,
  .elementor-element-bdeebf1 > .e-con-inner {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .elementor-element-0eca295,
  .elementor-element-1e9648a { width: 100% !important; max-width: none !important; }
  .elementor-element-0eca295 { order: -1 !important; }
  /* La Marque - Les matieres */
  .elementor-element-etqe75c > .elementor-container,
  .elementor-element-etqe75c > .e-con-inner {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .elementor-element-ejqisry,
  .elementor-element-yq6cn8l { width: 100% !important; max-width: none !important; }
  .elementor-element-ejqisry { order: -1 !important; }
  /* La Marque - Le confort */
  .elementor-element-rulyhm9 > .elementor-container,
  .elementor-element-rulyhm9 > .e-con-inner {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .elementor-element-ux1vroc,
  .elementor-element-oy5m5nd { width: 100% !important; max-width: none !important; }
  .elementor-element-ux1vroc { order: -1 !important; }
  /* La Marque - Le showroom */
  .elementor-element-e9cc22c > .elementor-container,
  .elementor-element-e9cc22c > .e-con-inner {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .elementor-element-14073f4,
  .elementor-element-db45122 { width: 100% !important; max-width: none !important; }
  .elementor-element-14073f4 { order: -1 !important; }
  /* Accueil - bloc image + texte (conteneur e-con-full : la rangee flex est
     l element lui-meme, il n a pas de .e-con-inner) */
  .elementor-element-f462562,
  .elementor-element-f462562 > .elementor-container,
  .elementor-element-f462562 > .e-con-inner {
    flex-direction: column !important;
    gap: 28px !important;
    align-items: stretch !important;
  }
  .elementor-element-2f61135,
  .elementor-element-99d4db5 { width: 100% !important; max-width: none !important; }
  .elementor-element-2f61135 { order: -1 !important; }
  /* Les gouttieres laterales des colonnes (jusqu a 46px, prevues pour le vis-a-vis
     en bureau) desalignaient la photo et le texte une fois empiles. */
  .elementor-element-09e3b46 > .elementor-widget-wrap,
  .elementor-element-68e94e9 > .elementor-widget-wrap,
  .elementor-element-0eca295 > .elementor-widget-wrap,
  .elementor-element-1e9648a > .elementor-widget-wrap {
    padding-left: 0 !important; padding-right: 0 !important;
  }
  /* Le portrait garde sa hauteur de 620px (regle de widget en !important a 3
     classes, inutile de lutter) : il occupe simplement toute la largeur. */
  .elementor-element-09e3b46 .elementor-widget-image,
  .elementor-element-0eca295 .elementor-widget-image { width: 100% !important; }
  /* Bloc carre de l accueil : bandeau de 420px */
  .elementor-element-2f61135 img { width: 100% !important; height: 420px !important; object-fit: cover !important; }
  /* Photos paysage : pleine largeur, hauteur libre */
  .elementor-element-ejqisry img,
  .elementor-element-ux1vroc img,
  .elementor-element-14073f4 img { width: 100% !important; height: auto !important; }
}


/* Passe mobile 08/09 (31) - accueil aligne sur les cinq autres en-tetes.
   Maxence : "la meme hauteur partout". La bande de l accueil valait
   clamp(400px, 64vh, 560px) depuis la passe (28) ; elle prend la valeur
   commune min(115vw, 500px). Tout le hero consomme la variable
   --hw-hero-band, il suffit donc de la redefinir, plus les 28px de
   respiration sous la photo comme sur les cinq autres. */
@media (max-width: 767px) {
  .elementor-44 .elementor-element.elementor-element-ace850c {
    --hw-hero-band: min(115vw, 500px) !important;
    padding-top: calc(min(115vw, 500px) + 28px) !important;
  }
}


/* Passe mobile 08/09 (32) - correctif de la (31) : les 28px de respiration.
   La passe (29) ecrit padding-top: var(--hw-hero-band) en html body ... !important,
   plus specifique que la (31) : le texte revenait coller la photo (0px).
   Meme selecteur ici, et le padding se calcule a partir de la bande. */
@media (max-width: 767px) {
  html body .elementor-44 .elementor-element.elementor-element-ace850c {
    --padding-top: calc(var(--hw-hero-band) + 28px) !important;
    padding-top: calc(var(--hw-hero-band) + 28px) !important;
  }
}


/* ===== Passe mobile 08/09 (33) - retour vocal de Lina (audit telephone du 08/09 au soir).
   Trois demandes repetees page par page dans l enregistrement :
   1. « il faut vraiment centrer les textes, partout centres ». Les titres l etaient deja
      depuis la passe precedente, mais pas les paragraphes ni les sur-titres : Uniformes
      sur mesure, L Atelier, La Marque, RSE et les fiches univers restaient a gauche.
   2. « grossir les logos » du bloc Ils nous ont fait confiance (56px, trop discrets).
   3. « du beige, pas du dore, c est illisible » : les trois chiffres des engagements RSE
      etaient en #876C32 sur fond vert (contraste ~1,5:1) et les libelles de la carte
      monde en #E3B755.
   Perimetre borne au contenu des pages : ni l en-tete, ni le menu, ni le pied de page,
   ni les champs de formulaire ne sont touches. ===== */

@media (max-width: 767px) {

  /* 1. Textes courants et sur-titres centres, au meme titre que les titres */
  :is([data-elementor-type="wp-page"], .elementor-location-single) :is(.elementor-widget-text-editor, .elementor-widget-heading),
  :is([data-elementor-type="wp-page"], .elementor-location-single) :is(.elementor-widget-text-editor, .elementor-widget-heading) :is(p, h1, h2, h3, h4, h5, h6, .elementor-heading-title) {
    text-align: center !important;
  }

  /* Les listes a puces restent lisibles : le bloc est centre, les lignes restent a gauche */
  :is([data-elementor-type="wp-page"], .elementor-location-single) .elementor-widget-text-editor :is(ul, ol) {
    display: inline-block;
    text-align: left;
  }

  /* Exception : reponses de FAQ et accordeons, toujours alignees a gauche */
  :is(.elementor-widget-accordion, .elementor-widget-toggle, .e-n-accordion) :is(.elementor-widget-text-editor, .elementor-widget-text-editor p, li) {
    text-align: left !important;
  }

  /* 2. Logos clients (bloc Ils nous ont fait confiance) : 56px -> 76px.
     Selecteur long a dessein : la regle d origine gagnait en specificite, et le bloc
     porte un identifiant different sur chaque page (cc93187, 3b2f129a, 4d916e3, ...). */
  html body .elementor .elementor-widget.elementor-widget-image-carousel .swiper-slide-inner img.swiper-slide-image {
    height: 76px !important;
    max-height: 76px !important;
    width: auto !important;
  }
  /* La Marque, L Atelier et les fiches univers : une passe anterieure y fixait 56px
     avec une specificite plus forte, d ou ce selecteur volontairement tres long. */
  html body .elementor .elementor-element.elementor-element-495ed226.elementor-widget.elementor-widget-image-carousel .elementor-image-carousel-wrapper .elementor-image-carousel.swiper-wrapper .swiper-slide .swiper-slide-inner img.swiper-slide-image,
  html body .elementor .elementor-element.elementor-element-4d916e3.elementor-widget.elementor-widget-image-carousel .elementor-image-carousel-wrapper .elementor-image-carousel.swiper-wrapper .swiper-slide .swiper-slide-inner img.swiper-slide-image,
  html body .elementor .elementor-element.elementor-element-51743402.elementor-widget.elementor-widget-image-carousel .elementor-image-carousel-wrapper .elementor-image-carousel.swiper-wrapper .swiper-slide .swiper-slide-inner img.swiper-slide-image {
    height: 76px !important;
    max-height: 76px !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* 3. RSE : le dore illisible passe en beige */
  .elementor-element-7f08357 .elementor-heading-title,
  .elementor-element-194d7fa .elementor-heading-title,
  .elementor-element-7f5bcc7 .elementor-heading-title {
    color: #E4D9C6 !important;
  }
  .elementor-element-4f94414 :is(span, p, div) {
    color: #EFE7D9 !important;
  }
}


/* ===== Passe mobile 08/09 (34) - complement de la (33).
   Centrer le texte ne suffisait pas : dans plusieurs conteneurs (en-tete Uniformes sur
   mesure, etapes de Notre process, sections des fiches univers) les widgets sont en
   largeur de contenu et colles a gauche du conteneur. Le texte etait bien centre DANS
   un bloc lui-meme a gauche. On centre donc aussi le bloc.
   Exceptions : les etiquettes HOMME / FEMME de l accueil, posees volontairement en bas
   a gauche de leur visuel par la passe (24). ===== */
@media (max-width: 767px) {
  :is([data-elementor-type="wp-page"], .elementor-location-single) .e-con.e-flex > .elementor-widget:is(.elementor-widget-heading, .elementor-widget-text-editor, .elementor-widget-button):not(.elementor-element-6c92afb):not(.elementor-element-4fe1daa) {
    align-self: center !important;
  }
}


/* ===== Passe mobile 08/09 (35) - suite du retour de Lina, points structurels.
   1. Fiches univers : la photo d en-tete repasse en premier (elle etait calculee
      order:4, donc titre et paragraphe avant la photo - reste ouvert de la passe 27),
      en pleine largeur et a la meme hauteur que les six autres en-tetes.
      object-fit: contain sur fond creme : les visuels univers sont des detoures
      studio, et en cover les pieds etaient coupes (remarque de Lina a 06:02).
   2. Fiches univers : les six cartes Pourquoi Hawaii Uniformes Paris passent sur
      deux colonnes - il ne faut pas les mettre a la suite, ca prend trop de place
      (06:22). Hauteur du bloc : 1658px -> 1056px.
   3. Uniformes sur mesure : la citation L uniforme est la premiere signature d une
      maison recoit son bandeau creme pleine largeur. Elle etait collee a Donnons vie
      a votre uniforme, d ou le on a l impression que c est ensemble, c est un peu
      fouillis (04:49).
   4. RSE : les libelles de la carte monde se chevauchaient sur telephone (22px pour une
      carte de 315px de large). Ramenes a 12px. Constat de la passe, pas une demande.
   5. Lookbook : titre d en-tete reduit (07:13). ===== */

@media (max-width: 767px) {

  /* 1. Fiches univers : photo d abord, pleine largeur, pieds non coupes */
  html body .elementor .elementor-element.elementor-element-feffc4b > .elementor-element.elementor-element-bb8cb31 {
    order: -1 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-bottom: 28px !important;
  }
  html body .elementor .elementor-element.elementor-element-bb8cb31 img {
    width: 100% !important;
    height: min(115vw, 500px) !important;
    max-height: min(115vw, 500px) !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    background: #F7F5F2 !important;
  }

  /* 2. Fiches univers : les six atouts sur deux colonnes */
  html body .elementor .elementor-element.elementor-element-52aba86 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
  }
  html body .elementor .elementor-element.elementor-element-52aba86 > .elementor-element {
    padding: 16px 10px !important;
  }
  html body .elementor .elementor-element.elementor-element-52aba86 .elementor-widget-text-editor,
  html body .elementor .elementor-element.elementor-element-52aba86 .elementor-widget-text-editor p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  html body .elementor .elementor-element.elementor-element-52aba86 .elementor-widget-heading .elementor-heading-title {
    font-size: 12px !important;
    letter-spacing: .06em !important;
  }

  /* 3. Uniformes sur mesure : la citation prend son bandeau */
  html body .elementor .elementor-element.elementor-element-b0765ea {
    background: #F7F5F2 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 8px !important;
    margin-bottom: 40px !important;
    padding: 34px 26px !important;
  }

  /* 4. RSE : libelles de la carte monde, plus de chevauchement */
  html body .elementor .elementor-element.elementor-element-4f94414 div[style*="position:absolute"] > span[style*="position:absolute"] {
    display: none !important;
  }

  /* 5. Lookbook : titre d en-tete moins imposant */
  html body .elementor .elementor-1178 .elementor-widget-heading h1.elementor-heading-title {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
}


/* ===== Passe mobile 08/09 (36) - menu mobile : les neuf univers sur deux colonnes.
   Demande de Lina a 05:13 : "les mettre cote a cote pour prendre moins de place, le menu
   est trop long", en reference au sous-menu deplie de marcy.paris.
   Les sous-entrees sont des  freres des entrees de premier niveau dans la meme liste :
   flex-wrap ne marche pas (le conteneur est en colonne, il aurait fait deux colonnes de
   menu entier). On passe donc la liste ouverte en grille deux colonnes, les entrees de
   premier niveau occupent toute la largeur, les sous-entrees une cellule.
   La derniere sous-entree (Proprete, 9e sur 9) reprend toute la largeur pour que son filet
   de separation ne s arrete pas au milieu.
   La grille ne s applique qu a l etat ouvert (.hw-sub-open), le menu replie est inchange.
   Resultat : les sept entrees du menu tiennent dans un seul ecran, sous-menu deplie. ===== */
@media (max-width: 767px) {
  .e-n-menu-wrapper .e-n-menu-heading.hw-sub-open {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
  }
  .e-n-menu-wrapper .e-n-menu-heading.hw-sub-open > .e-n-menu-item {
    grid-column: 1 / -1 !important;
  }
  .e-n-menu-wrapper .e-n-menu-heading.hw-sub-open > .e-n-menu-item.hw-sub {
    grid-column: auto !important;
  }
  .e-n-menu-wrapper .e-n-menu-heading.hw-sub-open > .e-n-menu-item.hw-sub:has(+ .e-n-menu-item:not(.hw-sub)) {
    grid-column: 1 / -1 !important;
  }
}


/* ===== Passe mobile 08/09 (37) - taille unique pour les H1, sur toutes les pages.
   Demande de Lina a 10:28 : "faire attention que les titres soient tous de la meme taille
   dans toutes les pages". Releve du 09/09 sur telephone : trois tailles coexistaient -
   34px (accueil, Uniformes sur mesure), 36px (fiches univers, L Atelier, Le Process),
   32px (La Marque, RSE, Lookbook). Tout passe a 32px.
   Corrige au passage la regle Lookbook de la passe 35, qui ne s appliquait pas : elle
   ciblait ".elementor .elementor-1178" (descendant) alors que les deux classes sont
   portees par le meme element. ===== */
@media (max-width: 767px) {
  html body .elementor h1.elementor-heading-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
  }
}


/* ===== Passe mobile 08/09 (38) - RSE : les photos des trois pays redeviennent visibles.
   Lina, 10:28 : "on ne voit pas les photos en dessous des images". Les onglets
   France / Tunisie / Turquie posent une carte blanche PAR-DESSUS la photo du pays.
   Sur un ecran de 315px la carte (275px) couvrait la quasi-totalite de l image : il ne
   restait qu un liseret. On arrete la superposition sur telephone : la photo devient une
   bande de 210px en tete du panneau, la carte se pose dessous, pleine largeur.
   Le comportement bureau et tablette est inchange (superposition conservee).
   Note : la demande initiale etait un carrousel. La bande + carte donne le meme resultat
   (voir la photo, lire le texte) sans toucher a la structure du widget onglets. ===== */
@media (max-width: 767px) {
  html body .elementor-1176 .e-n-tabs-content > .e-con {
    min-height: 0 !important;
    padding: 210px 0 0 0 !important;
    background-position: center center !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
  }
  html body .elementor-1176 .e-n-tabs-content > .e-con > .e-con {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }
}


/* ===== Passe mobile 08/09 (39) - deux retours de Maxence.

   1. "Un gros espace entre les coloris du passepoil et Nos engagements" (page Uniformes
      sur mesure). Cause : le configurateur .perso-grid passe en flex-direction column sur
      telephone, or ses deux colonnes portent flex: 1 1 380px / 1 1 420px. En colonne, la
      flex-basis devient une HAUTEUR : .perso-left etait bloquee a 380px alors que son
      contenu n en fait que ~197. D ou 183px de vide sous le bouton, plus 100px de padding
      de conteneur. Les deux colonnes passent en flex: 0 0 auto (elles se dimensionnent sur
      leur contenu) et le padding tombe a 24px. Ecart mesure : 467px -> 208px.

   2. "Il faudrait que les logos soient centres" - il s agit des pictogrammes de section
      (le globe de Nos engagements, etc.), et c est vrai sur toutes les pages : leur
      conteneur est en text-align: start et l image est en inline-block, donc collee a
      gauche. Les widgets Image et Icone du contenu de page sont centres.
      A noter : ces widgets ne portent pas la classe .elementor-widget-image, d ou le
      ciblage par attribut data-widget_type. ===== */
@media (max-width: 767px) {
  html body .perso-grid > .perso-left,
  html body .perso-grid > .perso-right {
    flex: 0 0 auto !important;
    height: auto !important;
  }
  html body .elementor .elementor-element.elementor-element-3638140 {
    padding-bottom: 24px !important;
  }
  html body .elementor .elementor-element[data-widget_type^="image"] > .elementor-widget-container,
  html body .elementor .elementor-element[data-widget_type^="icon"] > .elementor-widget-container,
  html body .elementor .elementor-element[data-widget_type^="image"] .elementor-image,
  html body .elementor .elementor-element[data-widget_type^="icon"] .elementor-icon-wrapper {
    text-align: center !important;
  }
}


/* ===== Passe mobile 09/09 (40) - respiration entre une photo et le texte qui la suit.
   Retour de Maxence sur la legende "LE SAVOIR-FAIRE HAWAII UNIFORMES PARIS" de l accueil,
   collee sous sa photo. Releve a 390px sur tout le site : l ecart photo -> texte allait de
   0 a 48px selon les blocs. Le pire est L Atelier, ou les SEPT photos de section (408 a
   470px de haut) ont un ecart de 0px : le sur-titre touche le bas de l image.
   Les blocs sous 32px passent a ~28px de marge sous la photo. Ceux deja a 40-48px
   (La Marque, en-tetes des fiches univers) ne sont pas touches : ils sont bons.
   Les pictogrammes (80px de haut, du type LE SUR-MESURE ou NOS ENGAGEMENTS) sont
   volontairement exclus : leur libelle doit rester colle a l icone, un essai a 28px les
   detachait visuellement. D ou une liste explicite plutot qu une regle generale. ===== */
@media (max-width: 767px) {
  html body .elementor .elementor-element.elementor-element-af08ffe,
  html body .elementor .elementor-element.elementor-element-74b4e121,
  html body .elementor .elementor-element.elementor-element-6e148122,
  html body .elementor .elementor-element.elementor-element-ae39b4e,
  html body .elementor .elementor-element.elementor-element-f337717,
  html body .elementor .elementor-element.elementor-element-aae5191,
  html body .elementor .elementor-element.elementor-element-1a1c589,
  html body .elementor .elementor-element.elementor-element-3bb1f83,
  html body .elementor .elementor-element.elementor-element-3oj62na,
  html body .elementor .elementor-element.elementor-element-nk66w4n,
  html body .elementor .elementor-element.elementor-element-zn72c7t,
  html body .elementor .elementor-element.elementor-element-moc836j {
    margin-bottom: 28px !important;
  }
}


/* ==========================================================================
   Passe mobile 09/09 (41) - retour Lina du 09/09 (captures Instagram)
   1. Photos d'en-tete : valeurs de background-position reecrites EN PLACE
      dans les blocs ::before existants (aucun nouveau bloc), recadrage
      calcule pour centrer le sujet et non le fichier.
   2. Menu mobile : sous-rubriques allegees pour les distinguer des rubriques.
   3. Accueil : accroche du hero en gras.
   4. Lookbook : filtres resserres.
   5. Pied de page : densite resserree et titres de colonnes alignes
      sur les liens qu'ils coiffent (reference marcy.paris).
   ========================================================================== */
@media (max-width: 767px) {

  /* 2. Menu mobile : les sous-rubriques (Hotellerie, Restauration...) avaient
     exactement la meme graisse et la meme taille que les rubriques de premier
     niveau, elles se confondaient avec elles. */
  html body .e-n-menu-item.hw-sub,
  html body .e-n-menu-item.hw-sub *,
  html body .e-n-menu .e-n-menu-wrapper .e-n-menu-heading .e-n-menu-item.hw-sub .e-n-menu-title .e-n-menu-title-container .e-n-menu-title-text {
    font-weight: 300 !important;
    font-size: 14px !important;
    letter-spacing: 0.6px !important;
    color: #6E6E6E !important;
  }

  /* 3. Accueil : accroche sous le hero mise en gras pour la detacher. */
  html body .elementor .elementor-element.elementor-element-4bdeda6 p,
  html body .elementor .elementor-element.elementor-element-4bdeda6 span,
  html body .elementor .elementor-element.elementor-element-4bdeda6 strong {
    font-weight: 600 !important;
  }

  /* 4. Lookbook : les 4 filtres occupaient toute la largeur, ecartes les uns
     des autres. On les resserre et on les centre. */
  html body .elementor .elementor-element.elementor-element-1b722a1 .e-filter {
    gap: 4px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  html body .elementor .elementor-element.elementor-element-1b722a1 .e-filter .e-filter-item {
    padding: 6px 6px !important;
    letter-spacing: 1px !important;
  }

  /* 5a. Pied de page : 47px de pas entre deux liens, soit le double de la
     reference. On redescend a ~34px sans passer sous une cible tactile
     raisonnable. */
  html body .elementor-location-footer .elementor-widget-text-editor a {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }

  /* 5b. Titres de colonnes : ils etaient centres au-dessus de listes alignees
     a gauche, ce qui donnait l'impression d'un bloc casse. */
  html body .elementor-location-footer .elementor-widget-heading .elementor-heading-title {
    text-align: left !important;
  }

  /* 5c. Respirations verticales resserrees. */
  html body .elementor-location-footer .elementor-element-98441b9 {
    row-gap: 18px !important;
  }
  html body .elementor-location-footer .elementor-element-8660e45,
  html body .elementor-location-footer .elementor-element-d38244d,
  html body .elementor-location-footer .elementor-element-36d4fdf {
    margin-bottom: 2px !important;
  }
  html body .elementor-location-footer .elementor-element-0f0a5a5 p {
    margin-bottom: 8px !important;
  }
}


/* Passe mobile 09/09 (42) - RSE, volets Nos ateliers.
   Les trois photos (1600x893) etaient posees en cover sur un panneau de
   315x604 : on n'en voyait plus que 29% de la largeur, soit une tranche
   verticale de mur et de plafond. On repasse sur une bande paysage calee en
   haut, de la hauteur exacte de la zone visible (le padding-top du panneau). */
@media (max-width: 767px) {
  html body .elementor-1176 .e-n-tabs-content > .e-con {
    background-size: auto 210px !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
  }
}


/* Passe mobile 10/09 (44) - retour Lina.
   1. Bandes photo d'en-tete plus hautes en mobile : min(100vw,430px) est passe
      a min(115vw,500px) partout (soit 449px sur un ecran de 390px). Les
      background-position des cinq en-tetes ont ete recalculees en consequence,
      un cadrage en cover se resserre quand la bande grandit.
   2. Accueil : le bloc "Le savoir-faire se mesure a la precision de chaque
      choix" est masque en mobile (demande de Lina, video du 08/09 a 01:44).
      Il reste visible sur tablette et sur bureau. */
@media (max-width: 767px) {
  html body .elementor .elementor-element.elementor-element-cc8280d { display: none !important; }
}


/* Passe 45 (10/09) - carrousel des univers : barre de progression et fleches.
   La barre affichait un pave gris de 44px de haut : une passe precedente avait
   transforme la pagination en zone tactile de 44px (bien) mais laisse le fond
   gris sur cette zone (moins bien). On garde la zone tactile, on ne dessine
   plus qu'un filet de 2px en son centre, aligne sur le centre des fleches.
   Fleches : plus de bloc plein, un filet a 22% d'opacite qui se remplit en
   noir au survol. */
html body .elementor .elementor-widget-loop-carousel .swiper-pagination-progressbar {
  top: auto !important;
  bottom: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
html body .elementor .elementor-widget-loop-carousel .swiper-pagination-progressbar::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(50% - 1px) !important;
  height: 2px !important;
  background: rgba(26, 26, 26, .15) !important;
}
html body .elementor .elementor-widget-loop-carousel .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  top: calc(50% - 1px) !important;
  height: 2px !important;
  background: #1A1A1A !important;
  border-radius: 0 !important;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1) !important;
}
html body .elementor .elementor-widget-loop-carousel .elementor-swiper-button {
  width: 46px !important;
  height: 46px !important;
  background: transparent !important;
  border: 1px solid rgba(26, 26, 26, .22) !important;
  border-radius: 0 !important;
  color: #1A1A1A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
html body .elementor .elementor-widget-loop-carousel .elementor-swiper-button svg {
  width: 13px !important;
  height: 13px !important;
  fill: currentColor !important;
}
html body .elementor .elementor-widget-loop-carousel .elementor-swiper-button:hover,
html body .elementor .elementor-widget-loop-carousel .elementor-swiper-button:focus-visible {
  background: #1A1A1A !important;
  border-color: #1A1A1A !important;
  color: #FFFFFF !important;
}
html body .elementor .elementor-widget-loop-carousel .elementor-swiper-button.swiper-button-disabled {
  opacity: .25 !important;
}


/* Univers 357 - recentrage horizontal des photos (tablette + mobile) */
@media (max-width: 1024px) {
  body .elementor-357 .elementor-widget-image .elementor-widget-container > img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   Blog / Actualités - 16/09/2026 (Linko)
   Widget « Infos de publication » : masquer les icônes par défaut
   (catégorie et date) — le widget n'offre pas d'option pour les
   retirer, la valeur vide retombe sur l'icône par défaut.
   ============================================================ */
body .elementor .elementor-element-8a5e3c3 .elementor-icon-list-icon,
body .elementor .elementor-element-2eb56b4 .elementor-icon-list-icon,
body .elementor .e-loop-item .elementor-post-info .elementor-icon-list-icon {
  display: none !important;
}
body .elementor .elementor-element-8a5e3c3 .elementor-icon-list-item,
body .elementor .elementor-element-2eb56b4 .elementor-icon-list-item,
body .elementor .e-loop-item .elementor-post-info .elementor-icon-list-item {
  gap: 0;
}

/* Article : corps en deux colonnes, sommaire qui suit le scroll.
   Le conteneur du sommaire doit épouser la hauteur de son contenu,
   sinon il occupe toute la colonne et le sticky n'a rien à faire. */
@media (min-width: 1025px) {
  body .elementor .elementor-element-92a8fbe {
    flex-direction: row;
    align-items: flex-start;
  }
  body .elementor .elementor-element-4684a22 {
    align-self: flex-start;
    height: auto;
  }
}

/* Article : fil d'ariane Rank Math (widget code court 29f4afc) */
body .elementor .elementor-element-29f4afc .rank-math-breadcrumb,
body .elementor .elementor-element-29f4afc .rank-math-breadcrumb p {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .4px;
  color: #5E5E58;
  margin: 0;
}
body .elementor .elementor-element-29f4afc .rank-math-breadcrumb a {
  color: #5E5E58;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
body .elementor .elementor-element-29f4afc .rank-math-breadcrumb a:hover,
body .elementor .elementor-element-29f4afc .rank-math-breadcrumb a:focus-visible {
  color: #7D6A46;
  border-bottom-color: #7D6A46;
}
body .elementor .elementor-element-29f4afc .rank-math-breadcrumb .separator {
  margin: 0 6px;
  color: #A9A49B;
}

/* Cartes d'actualités : toute la carte cliquable.
   Même méthode que les cartes univers de l'accueil (10/09) — le champ
   « Lien » d'un conteneur n'est pas rendu par Elementor 4.2.4 / Pro 4.2.3,
   donc on étire la zone cliquable du lien porté par le widget Titre. */
body .elementor .e-loop-item .elementor-element-5586670 { position: relative; }
body .elementor .e-loop-item .elementor-element-5586670 > *,
body .elementor .e-loop-item .elementor-element-e5be381,
body .elementor .e-loop-item .elementor-element-e5be381 > *,
body .elementor .e-loop-item .elementor-element-ae26278 { position: static; z-index: 1; }
body .elementor .e-loop-item .elementor-element-ae26278 .elementor-heading-title a::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
}
body .elementor .e-loop-item .elementor-element-5586670:hover { border-color: #C9A24B; }
body .elementor .e-loop-item .elementor-element-5586670 { transition: border-color .25s ease; }
/* Photo de carte : recadrage en couverture (le réglage du widget ne s'applique pas) */
body .elementor .e-loop-item .elementor-element-60b980b img {
  width: 100%; height: 220px; object-fit: cover; display: block;
}

/* ============================================================
   Article : rythme de lecture et états d'interaction
   16/09/2026 (Linko) — passe UX/UI
   ============================================================ */

/* Mesure de lecture : ~68 caractères, au-delà l'œil perd la ligne */
body .elementor .elementor-element-bbe111d,
body .elementor .elementor-element-bbe111d > .elementor-widget-container { max-width: 680px !important; }

/* Rythme vertical du corps d'article */
body .elementor .elementor-element-bbe111d h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 34px;
  line-height: 1.2;
  color: #1A1A1A;
  margin: 2.4em 0 .6em;
  text-wrap: balance;
}
body .elementor .elementor-element-bbe111d h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .3px;
  color: #1A1A1A;
  margin: 1.8em 0 .5em;
  text-wrap: balance;
}
body .elementor .elementor-element-bbe111d > *:first-child { margin-top: 0; }
body .elementor .elementor-element-bbe111d p { margin: 0 0 1.35em; text-wrap: pretty; }
body .elementor .elementor-element-bbe111d p:last-child { margin-bottom: 0; }

/* L'ancre du sommaire ne doit pas passer sous l'en-tête fixe */
body .elementor .elementor-element-bbe111d :is(h2, h3) { scroll-margin-block-start: 112px; }

/* Titre d'article : pas de mot orphelin */
body .elementor .elementor-element-d4d772a .elementor-heading-title { text-wrap: balance; }

/* Liens dans le corps : lisibles, soulignés, focus visible */
body .elementor .elementor-element-bbe111d a {
  color: #1A1A1A;
  text-decoration: underline;
  text-decoration-color: #C9A24B;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
body .elementor .elementor-element-bbe111d a:hover { color: #7D6A46; }
body .elementor :is(.elementor-element-bbe111d, .elementor-element-2b6dbce, .elementor-element-29f4afc) a:focus-visible {
  outline: 2px solid #7D6A46;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sommaire : lien courant et cible tactile confortable */
body .elementor .elementor-element-2b6dbce .elementor-toc__list-item-text {
  display: block;
  padding: 5px 0;
  transition: color .2s ease;
}
body .elementor .elementor-element-2b6dbce .elementor-toc__list-item.elementor-item-active > .elementor-toc__list-item-text-wrapper {
  font-weight: 500;
}

@media (max-width: 1024px) {
  body .elementor .elementor-element-bbe111d,
  body .elementor .elementor-element-bbe111d > .elementor-widget-container { max-width: none !important; }
  body .elementor .elementor-element-bbe111d h2 { font-size: 28px; margin-top: 1.9em; }
}

@media (prefers-reduced-motion: reduce) {
  body .elementor .elementor-element-bbe111d a,
  body .elementor .elementor-element-2b6dbce .elementor-toc__list-item-text { transition: none; }
}

/* Sommaire : l'ancien gabarit laissait le titre en blanc sur fond clair */
body .elementor .elementor-element-2b6dbce .elementor-toc__header {
  background-color: transparent;
  border-bottom: 1px solid #E5E0D8;
  padding-bottom: 12px;
  margin-bottom: 6px;
}
body .elementor .elementor-element-2b6dbce .elementor-toc__header-title {
  color: #1A1A1A !important;
}
body .elementor .elementor-element-2b6dbce .elementor-toc__toggle-button svg,
body .elementor .elementor-element-2b6dbce .elementor-toc__toggle-button i {
  fill: #7D6A46; color: #7D6A46;
}
body .elementor .elementor-element-2b6dbce .elementor-toc__list-item-text {
  color: #5E5E58;
}
body .elementor .elementor-element-2b6dbce .elementor-toc__list-item-text:hover {
  color: #7D6A46;
}
/* le sommaire ne doit jamais dépasser la hauteur d'écran */
body .elementor .elementor-element-2b6dbce .elementor-toc__body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* « À lire également » : la section s'efface tant qu'il n'y a pas
   d'autre article à proposer, plutôt qu'un titre suivi de vide. */
body .elementor .elementor-element-f3f7262:not(:has(article)) { display: none; }

/* Cartes d'articles liés : filet fin, pas d'ombre, badge discret */
body .elementor .elementor-element-bca7aba .elementor-post__card {
  box-shadow: none;
  border: 1px solid #E5E0D8;
  border-radius: 2px;
  transition: border-color .25s ease;
}
body .elementor .elementor-element-bca7aba .elementor-post__card:hover { border-color: #C9A24B; }
body .elementor .elementor-element-bca7aba .elementor-post__badge {
  border: 1px solid #E5E0D8;
  padding: 5px 10px;
  font-size: 11px;
}
body .elementor .elementor-element-bca7aba .elementor-post__read-more {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #1A1A1A;
  border-bottom: 1px solid #C9A24B;
  padding-bottom: 2px;
}
body .elementor .elementor-element-bca7aba a:focus-visible {
  outline: 2px solid #7D6A46;
  outline-offset: 3px;
}

/* ============================================================
   Article — format éditorial (réf. Eskimoz), 17/09/2026 (Linko)
   ============================================================ */

/* Image mise en avant : dans la colonne, ratio maîtrisé */
body .elementor .elementor-element-6d17323 img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}
@media (max-width: 1024px) { body .elementor .elementor-element-6d17323 img { height: 320px; } }
@media (max-width: 767px)  { body .elementor .elementor-element-6d17323 img { height: 220px; } }

/* Ligne méta : catégorie · date, séparées par un point médian */
body .elementor .elementor-element-4956444 > .elementor-element + .elementor-element::before {
  content: "·";
  color: #A9A49B;
  margin-right: 12px;
}
body .elementor .elementor-element-4956444 { flex-wrap: wrap; }

/* Boîte auteur : avatar rond, texte aéré */
body .elementor .elementor-element-a0a801c .elementor-author-box__avatar img {
  border-radius: 50%;
}
body .elementor .elementor-element-a0a801c .elementor-author-box__name {
  margin-bottom: 4px;
}

/* CTA de fin : le bouton doit rester une cible confortable */
body .elementor .elementor-element-a81119d .elementor-button { min-height: 48px; }
body .elementor .elementor-element-a81119d .elementor-button:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 3px;
}

/* ================================================================
   Lookbook - boutons Collections sous les filtres (page 1178)
   Le site force font-size et padding sur .elementor-button en
   !important : il en faut aussi ici.
   ================================================================ */
body .elementor #hw-collections .elementor-widget-heading .elementor-heading-title {
  font-size: 24px;
  line-height: 1.25;
  margin: 0;
}
body .elementor #hw-collections .elementor-button {
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  line-height: 1.3 !important;
  padding: 10px 12px !important;
  min-height: 0 !important;
}
@media (max-width: 767px) {
  /* Le site force align-self: center !important sur tout widget enfant
     d'un conteneur flex en mobile : les boutons se reduisaient a leur texte
     (291 / 282 px en alternance). On rend la pile pleine largeur. */
  body .elementor #hw-collections > .elementor-widget-button {
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body .elementor #hw-collections .elementor-button {
    font-size: 12px !important;
    padding: 13px 12px !important;
    width: 100% !important;
    min-height: 44px !important;
  }
}

/* Simulateur passepoil (accueil) : centrage du bloc coloris et du bouton en mobile */
@media (max-width: 767px){
  .perso-wrap .perso-left{text-align:center !important;}
  .perso-wrap .perso-left .perso-swatches{justify-content:center !important;}
}

/* Carrousel des univers (modele de boucle 1435 : fiches univers + /uniformes-sur-mesure/) : la photo est cliquable.
   Le lien est regle dans le widget Image (Lien > URL de la publication). Lien en bloc pour ne pas creer
   l espace de 7 px qu un lien en ligne laisse sous l image. */
.elementor-element.elementor-element-ae39b4e a { display: block; }

/* =========================================================
   LOOKBOOK - libelle sous chaque photo (12/10/2026)
   Le libelle = le titre du look, saisi dans l admin (Lookbook > modifier > titre).
   Les looks pas encore nommes (titre vide ou "Lookbook") recoivent la classe
   hw-lb-sans-nom (snippet 55 "Lookbook - nom des tenues") : on leur affiche "Look N".
   Remplace le CSS "Look N" qui etait pose dans les grilles 2ef8d6ed (page 1178) et 8b42357 (modele 2314).
   ========================================================= */
.elementor-element-2ef8d6ed .elementor-loop-container,
.elementor-element-8b42357 .elementor-loop-container { counter-reset: lookcount 0; }
body .elementor-1231.e-loop-item { counter-increment: lookcount 1; }
body .elementor-1231.e-loop-item .elementor-heading-title { font-size: 14px !important; letter-spacing: .02em; }
body .elementor-1231.e-loop-item.hw-lb-sans-nom .elementor-heading-title { font-size: 0 !important; }
body .elementor-1231.e-loop-item.hw-lb-sans-nom .elementor-heading-title::after { content: "Look " counter(lookcount); font-size: 14px; letter-spacing: .02em; }

/* 26/10/2026 — H1 des 9 fiches univers (modele 357, widget 649dde4c) : titres longs « Uniformes ... sur mesure ». Lignes equilibrees ; tablette : pleine largeur de colonne ; petits telephones (380px et moins) : 29px pour rester sur 3 lignes. */
body .elementor-357 .elementor-element.elementor-element-649dde4c .elementor-heading-title { text-wrap: balance; }
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor-357 .elementor-element.elementor-element-649dde4c { --container-widget-width: 100% !important; width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 380px) {
  body .elementor-357 .elementor-element.elementor-element-649dde4c .elementor-heading-title { font-size: 29px !important; }
}