.elementor-kit-5{--e-global-color-secondary:#432818;--e-global-color-text:#BB9457;--e-global-color-accent:#0F0A0A;--e-global-color-primary:#99582A;--e-global-color-c4cf5be:#FFE6A7;--e-global-color-2e6a7fd:#F7F7F7;--e-global-color-75234c1:#7A4622;--e-global-typography-primary-font-family:"Bodoni Moda";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Jost";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Jost";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Jost";--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-primary );color:var( --e-global-color-2e6a7fd );}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-75234c1 );color:var( --e-global-color-2e6a7fd );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-5 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-5 h2{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-kit-5 h3{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================
   V&A DESIGN : CSS personnalisé pour Elementor
   À coller dans Elementor > Réglages du site > CSS personnalisé.
   Chaque bloc s'active en ajoutant sa classe va-* au conteneur ou au
   widget (panneau Style > Classes). Toutes les classes commencent par
   va- pour éviter les conflits avec le thème.
   Les tailles de titres (H1, H2, H3) sont définies ici, au bloc 3b.
   Les couleurs et polices par défaut se règlent dans Système de design.
   ===================================================================== */

/* 1. Variables ------------------------------------------------------- */
:root{
  --va-sel:#F7F7F7; --va-noir:#0F0A0A; --va-bistre:#432818; --va-lion:#BB9457; --va-brun:#99582A; --va-peche:#FFE6A7;
  --va-voile:#FAF1DB; --va-peche-doux:#FCEDC7; --va-sable:#EDE3CF; --va-nuit:#2A190F;
  --va-serif:'Bodoni Moda','Didot','Bodoni 72',Georgia,serif;
  --va-sans:'Jost','Futura','Century Gothic',Arial,sans-serif;
  --va-gut:clamp(20px,5vw,72px);
  --va-navh:102px;
}

/* 1b. Polices de secours pour les widgets atomiques --------------------
   :where() garde une spécificité nulle : va-label, va-lead, etc. gardent
   la priorité. Les tailles se règlent dans le Système de design.        */
:where(.va-band) :where(h1,h2,h3){font-family:var(--va-serif);font-weight:400}
:where(.va-band) :where(p,a,li){font-family:var(--va-sans);font-weight:300}

/* 2. Fonds de section ------------------------------------------------
   Classes : va-light | va-tint | va-deep | va-gold
   À poser sur le conteneur de section (largeur pleine).               */
.va-band{padding-block:clamp(96px,13vw,190px)!important;padding-inline:max(var(--va-gut),calc((100vw - 1240px)/2))!important;position:relative}
.va-light{background:var(--va-sel);--fg:var(--va-noir);--mut:#6B5646;--line:rgba(67,40,24,.2);--acc:var(--va-brun);--em:var(--va-brun)}
.va-tint{background:var(--va-voile);--fg:var(--va-noir);--mut:#6B5646;--line:rgba(67,40,24,.22);--acc:var(--va-brun);--em:var(--va-brun)}
.va-deep{background:var(--va-bistre);--fg:var(--va-sel);--mut:rgba(247,247,247,.74);--line:rgba(247,247,247,.24);--acc:var(--va-peche);--em:var(--va-peche);color:var(--fg)}
.va-gold{background:linear-gradient(112deg,var(--va-lion) 0%,#dcbb7b 45%,var(--va-peche) 100%);--fg:var(--va-noir);--mut:var(--va-bistre);--line:rgba(67,40,24,.3);--acc:var(--va-bistre);--em:var(--va-bistre);color:var(--va-noir)}
.va-band h1,.va-band h2,.va-band h3{color:var(--fg,var(--va-noir))}
.va-band em,.va-band .elementor-heading-title em,.va-band h1 i,.va-band h2 i{font-style:italic;color:var(--em)}

/* 2b. Section à deux colonnes -------------------------------------------
   va-split : à poser sur le conteneur qui contient les deux colonnes.
   Force la ligne ; colonne sous 1024 px.
   Contact : les colonnes sont repérées par leur contenu (va-form,
   va-coord), donc indépendamment des éléments ajoutés par l'éditeur.     */
.va-split,.va-intro{display:flex;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start;gap:clamp(32px,6vw,104px)}
.va-split>*,.va-intro>*{min-width:0}
.va-split>:nth-child(1),.va-intro>:nth-child(1){flex:1.1 1 0!important;width:auto!important}
.va-split>:nth-child(2),.va-intro>:nth-child(2){flex:.9 1 0!important;width:auto!important}
.va-split.va-split>:has(.va-form){flex:1.1 1 0!important;width:auto!important}
.va-split.va-split>:has(.va-coord),.va-split.va-split>.va-coord{flex:.9 1 0!important;width:auto!important}
/* colonnes repérées par leur classe : va-colA (gauche), va-colB (droite) ;
   va-mid : centre les colonnes verticalement */
.va-split.va-split>.va-colA{flex:1.1 1 0!important;width:auto!important}
.va-split.va-split>.va-colB{flex:.9 1 0!important;width:auto!important}
.va-split.va-mid{align-items:center!important}
@media(max-width:1024px){
.va-split,.va-intro{flex-direction:column!important}
.va-split.va-split.va-split>*,.va-intro.va-intro.va-intro>*{flex:none!important;width:100%!important}
}

/* 3. Textes -----------------------------------------------------------
   va-label : petite étiquette en capitales
   va-lead  : texte d'introduction
   va-mut   : texte secondaire (couleur adoucie)
   va-note  : note en italique                                           */
.va-label,.va-label .elementor-heading-title{font:500 12px/1.4 var(--va-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--acc,var(--va-brun))}
.va-lead{font-size:clamp(1.08rem,1.5vw,1.3rem);color:var(--mut,#6B5646);max-width:54ch;line-height:1.6}
.va-mut{color:var(--mut,#6B5646)}
.va-note{font:italic 400 15.5px/1.6 var(--va-serif);color:var(--mut,#6B5646);max-width:56ch}

/* 3b. Titres : mêmes tailles que la maquette ------------------------------
   H2 et H3 des sections (va-band) ; H1 des pages intérieures (va-vpage).
   va-tools : phrase d'outils en italique (bande Bistre du studio).        */
.va-band h2,.va-band h2.elementor-heading-title{font-size:clamp(2.1rem,4.2vw,3.6rem);line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
.va-band h3{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.15;letter-spacing:-.015em}
.va-vpage h1{font-size:clamp(2.5rem,4.9vw,4.4rem);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
.va-tools,.va-tools p{font:italic 400 clamp(1.3rem,2.2vw,1.8rem)/1.5 var(--va-serif)!important;color:var(--fg)!important;max-width:34ch;margin:0}

/* 4. Liens et boutons ---------------------------------------------------
   va-link : lien souligné avec flèche (widget Bouton)
   va-btn  : bouton plein ; va-btn-ghost : bouton contour                */
.va-link,.va-link .elementor-button{font:500 13px/1 var(--va-sans)!important;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--fg,var(--va-noir))!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--va-lion)!important;border-radius:0;padding:0 0 8px!important;display:inline-flex;gap:12px;align-items:center;transition:gap .4s,border-color .4s}
.va-link{align-self:flex-start;width:fit-content!important;max-width:max-content}
.va-link::after{content:'→';letter-spacing:0}
.va-link:hover{gap:18px;border-color:var(--fg,var(--va-noir))!important}
.va-btn .elementor-button,.va-btn a.elementor-button,a.va-btn,.va-btn.e-button-base,.va-btn .e-button-base{font:500 13px/1 var(--va-sans)!important;letter-spacing:.18em!important;text-transform:uppercase!important;padding:18px 30px!important;background:var(--va-bistre)!important;color:var(--va-sel)!important;border:1px solid var(--va-bistre)!important;border-radius:0!important;box-shadow:none!important;transition:background .4s,color .4s,border-color .4s}
.va-btn .elementor-button:hover,a.va-btn:hover,.va-btn.e-button-base:hover,.va-btn .e-button-base:hover{background:var(--va-lion)!important;border-color:var(--va-lion)!important;color:var(--va-noir)!important}
.va-btn-ghost .elementor-button,a.va-btn-ghost,.va-btn-ghost.e-button-base{background:transparent!important;color:var(--va-bistre)!important}
.va-btn-ghost .elementor-button:hover,a.va-btn-ghost:hover,.va-btn-ghost.e-button-base:hover{background:var(--va-bistre)!important;color:var(--va-sel)!important;border-color:var(--va-bistre)!important}
.va-deep .va-btn .elementor-button,.va-deep a.va-btn,.va-deep .va-btn.e-button-base,.va-deep .va-btn .e-button-base{background:var(--va-peche)!important;border-color:var(--va-peche)!important;color:var(--va-bistre)!important}
.va-deep .va-btn .elementor-button:hover,.va-deep a.va-btn:hover,.va-deep .va-btn.e-button-base:hover,.va-deep .va-btn .e-button-base:hover{background:var(--va-sel)!important;border-color:var(--va-sel)!important}

/* 5. Hero accueil et duotone -------------------------------------------
   va-vhero : classe du conteneur HERO.
   Dans HERO : le widget HTML (filtres SVG), puis le widget « Vidéo
   d'arrière-plan ». Dans sa Zone de contenu (classe va-vcap), un
   paragraphe avec la classe va-label (sans gras).
   Aucune classe sur le widget vidéo : le CSS le retrouve avec :has(video).
   Images à teinter : poser la classe va-duo sur le widget Image.         */

/* Thème : filtre actif (par défaut : océan) */
:root{--va-duo:url(#va-duotone);--va-duo-x:rgb(83,52,0);--va-duo-lo:#2A190F;--va-duo-con:1.339;--va-duo-bri:.766}
/* Thème Octobre rose : ajouter la classe va-rose au body pour l'activer */
body.va-rose{--va-duo:url(#va-duotone-rose);--va-duo-x:rgb(67,0,25);--va-duo-lo:#2B0A1A;--va-duo-con:1.401;--va-duo-bri:.781;--va-nuit:#2B0A1A;--va-bistre:#5A1535;--va-lion:#D77FA1;--va-brun:#A63D6E;--va-peche:#FFE3EC;--va-voile:#FFF1F5;--va-peche-doux:#FFE9F0;--va-sable:#F6DDE6}
/* images et vidéo en duotone */
.va-duo,.va-duo img,.va-vhero video{filter:contrast(1.1) brightness(.92) var(--va-duo)}

.va-vhero{position:relative;overflow:hidden;height:100vh;height:100svh;min-height:520px;background:#2A190F}
/* le widget vidéo remplit tout le hero */
.va-vhero>:has(video){position:absolute;inset:0;width:100%;height:100%}
.va-vhero video{width:100%;height:100%;object-fit:cover;display:block}
/* dégradé sombre en bas, pour la lisibilité de la légende */
.va-vhero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(67,40,24,0) 40%,rgba(67,40,24,.55) 100%);mix-blend-mode:multiply;pointer-events:none}
/* Zone de contenu du hero : marges latérales et bas (priorité sur l'éditeur) */
.va-vhero .va-vcap{padding-left:max(var(--va-gut),calc((100vw - 1240px)/2))!important;padding-right:max(var(--va-gut),calc((100vw - 1240px)/2))!important;padding-bottom:clamp(20px,4vw,44px)!important;box-sizing:border-box}
/* la légende, au-dessus du dégradé sombre */
.va-vhero .va-label{position:relative;z-index:3;margin:0!important;color:#FAF1DB!important;font-weight:500}
.va-vhero .va-label strong,.va-vhero .va-label b{font-weight:500;color:inherit}
/* Introduction : 75vh minimum, contenu centré verticalement (colonnes : voir 2b) */
.va-intro{min-height:75vh;min-height:75svh;padding-block:clamp(40px,5vw,72px)!important;align-items:center;box-sizing:border-box}
/* photo portrait : recadrée en 4:5 (à combiner avec va-duo) */
.va-portrait,.va-portrait img{display:block;width:100%;max-width:100%}
.va-portrait img{aspect-ratio:4/5;object-fit:cover;height:auto}

/* 6. En-tête ---------------------------------------------------------------
   va-header : conteneur Flexbox de l'en-tête (Theme Builder), contenant le
   logo (widget SVG, classe va-mark) et le Menu de navigation.
   Il est fixe. Transparent tant qu'on n'a pas défilé, texte clair sur
   l'accueil ; la classe va-scrolled est ajoutée par un petit script
   (Code personnalisé) dès qu'on a défilé de 40 px.                          */
.va-header{position:fixed!important;top:0;left:0;right:0;width:100%;z-index:50;box-sizing:border-box;
  display:flex;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center;justify-content:space-between;gap:24px;
  padding-block:22px!important;
  padding-inline:max(var(--va-gut),calc((100vw - 1240px)/2))!important;
  transition:background .4s,box-shadow .4s}
.admin-bar .va-header{top:32px}
/* logo : sans fond, il garde ses couleurs dorées (taille réglable ici) */
.va-mark,a.va-mark{display:block;flex:none;width:84px!important;height:55px!important;padding:0!important;background:none!important;box-sizing:border-box}
.va-mark svg{display:block;width:100%!important;height:100%!important}
/* menu */
.va-header>*{align-self:center;margin:0}
.va-header .elementor-nav-menu--main .elementor-item{font:400 13px/1 var(--va-sans)!important;letter-spacing:.18em!important;text-transform:uppercase!important;
  color:var(--va-noir)!important;padding:8px 0!important;margin:0!important;position:relative;background:none!important}
.va-header .elementor-nav-menu--main .elementor-item::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--va-brun);transition:width .45s cubic-bezier(.19,1,.22,1)}
.va-header .elementor-nav-menu--main .elementor-item:hover::after,
.va-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after{width:100%}
.va-header .elementor-nav-menu--main .elementor-item:before{display:none}
.va-header .elementor-nav-menu--main>ul{gap:38px}
/* accueil, avant le défilement : fond transparent, texte clair */
body.home .va-header:not(.va-scrolled){background:transparent!important;box-shadow:none}
body.home .va-header:not(.va-scrolled) .elementor-nav-menu--main .elementor-item{color:var(--va-voile)!important}
body.home .va-header:not(.va-scrolled) .elementor-nav-menu--main .elementor-item::after{background:var(--va-peche)}
body.home .va-header:not(.va-scrolled) .elementor-menu-toggle{color:var(--va-voile)}
/* après défilement : verre dépoli Seasalt, fine ligne Lion en dessous */
.va-header.va-scrolled{background:rgba(247,247,247,.68)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:0 1px 0 rgba(187,148,87,.6),0 10px 30px -18px rgba(67,40,24,.28)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.va-header.va-scrolled{background:rgba(247,247,247,.94)!important}}
/* mobile : menu déroulant plein écran, titres en Bodoni */
.va-header .elementor-nav-menu--dropdown{background:var(--va-sel)}
.va-header .elementor-nav-menu--dropdown .elementor-item{font:400 clamp(2rem,9vw,2.8rem)/1.1 var(--va-serif)!important;letter-spacing:-.01em!important;
  text-transform:none!important;color:var(--va-noir)!important;padding:12px var(--va-gut)!important}

/* 7. Témoignages --------------------------------------------------------
   va-tem : conteneur (avec va-band va-deep). L'image se règle dans
   Arrière-plan > Superposition (couverture, centre, sans répétition) ;
   ne mettez pas de couleur de fond dans l'éditeur.
   La teinte vient de background-color + background-blend-mode.
   background-color seul (jamais le raccourci background:), sinon l'image
   serait effacée.                                                         */
.va-tem{position:relative!important;overflow:hidden;isolation:isolate;
  flex-direction:column!important;gap:clamp(24px,3vw,40px);
  background-color:var(--va-tem-tint,#9a7a52)!important;
  background-blend-mode:luminosity}
/* voile qui rend l'image discrète : baisser les valeurs pour la montrer plus */
.va-tem::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(67,40,24,.62) 0%,rgba(67,40,24,.5) 50%,rgba(67,40,24,.66) 100%)}
body.va-rose .va-tem{--va-tem-tint:#d77fa1}
.va-tem h2{max-width:20ch}
.va-tem .va-label,.va-tem .va-label .elementor-heading-title{color:var(--va-peche)!important}
.va-tem .va-link{align-self:flex-end;margin-top:clamp(20px,3vw,44px)}
.va-tem .va-link,.va-tem .va-link .elementor-button{color:var(--va-sel)!important}
/* bande finale : bouton + téléphone + lien de rendez-vous sur une ligne */
.va-tem .va-row{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;gap:clamp(24px,4vw,56px)!important}
.va-tem .va-row .va-link{align-self:center!important;margin-top:0!important}

/* 7a. Avis : Carrousel de témoignages Elementor Pro (classe va-quotes sur le widget) */
.va-quotes .elementor-testimonial{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--line);padding-top:24px;text-align:left}
.va-quotes .elementor-testimonial__content{margin:0;padding:0;background:none}
.va-quotes .elementor-testimonial__text{margin:0;font:italic 400 1.3rem/1.5 var(--va-serif);color:var(--fg,#fff)!important}
.va-quotes .elementor-testimonial__footer{margin:0;padding:0}
.va-quotes .elementor-testimonial__cite{margin:0}
.va-quotes .elementor-testimonial__name{font:400 .78rem/1.4 var(--va-sans)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--va-peche)!important}
.va-quotes .elementor-testimonial__image{display:none}
.va-quotes .elementor-testimonial__cite{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.va-quotes .elementor-testimonial__title{display:inline!important;font:400 .78rem/1.4 var(--va-sans)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--va-peche)!important;opacity:.75}
.va-quotes .elementor-testimonial__title::before{content:"·";margin-right:10px}
.va-quotes .swiper-slide{height:auto;padding-inline:0}
.va-quotes .swiper-pagination{position:static;margin-top:clamp(24px,3vw,40px);text-align:left}
.va-quotes .swiper-pagination-bullet{background:var(--va-peche);opacity:.4;width:8px;height:8px}
.va-quotes .swiper-pagination-bullet-active{opacity:1}

/* 7b. Avis : trois blocs fixes (alternative au carrousel).
   Conteneur va-qgrid contenant 3 conteneurs va-quote, chacun avec
   un paragraphe va-q (l'avis) et un paragraphe va-who (le client).       */
.va-qgrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px);align-items:start}
.va-quote{display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--line);padding-top:24px!important}
.va-quote .va-q{margin:0;font:italic 400 1.3rem/1.5 var(--va-serif);color:var(--fg,#fff)}
.va-quote .va-who{margin:0;font:400 .78rem/1.4 var(--va-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--va-peche)}
@media(max-width:900px){.va-qgrid{grid-template-columns:1fr!important}}

/* 8. Listes et blocs de l'offre -------------------------------------------
   va-tiles / va-tile : grille de familles ou de missions
   va-rea : carte de réalisation (Loop Item), image 16/9
   va-faq : accordéon (balises details/summary d'Elementor)
   va-princ : grille de principes 2 colonnes
   va-steps : liste numérotée   va-list : liste à filets                  */
.va-tiles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,4vw,60px) clamp(20px,2.4vw,36px)}
.va-fam{grid-column:1/-1;font:500 13px/1.3 var(--va-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--va-brun);border-bottom:1px solid var(--va-lion);padding-bottom:10px}
.va-tiles>.va-fam{margin-top:14px}
.va-tiles>.va-fam:first-child{margin-top:0}
.va-tile{display:flex!important;flex-direction:column!important;gap:14px;text-decoration:none;color:var(--fg,var(--va-noir));min-width:0}
.va-tile img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.va-tile .va-pr{margin-top:auto;font:500 15px/1.3 var(--va-sans);display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:14px}
@media(max-width:700px){.va-tiles{grid-template-columns:1fr!important}}
.va-rea{display:flex!important;flex-direction:column!important;gap:12px;text-decoration:none;color:var(--fg,var(--va-noir));min-width:0}
.va-rea img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.va-rea:hover img{transform:scale(1.03)}
.va-rea .va-imgw{overflow:hidden}
.va-rea h3{margin:0;font:400 clamp(1.4rem,2vw,1.75rem)/1.15 var(--va-serif);letter-spacing:-.015em;color:var(--fg,var(--va-noir))}
.va-rea .va-mut{font-size:15px}
.va-band.va-tight{padding-top:clamp(56px,7vw,96px)!important}
.va-faq details,.va-faq .elementor-accordion-item,.va-faq .elementor-toggle-item{border:0!important;border-bottom:1px solid var(--line)!important;background:none!important}
.va-faq details:first-of-type{border-top:1px solid var(--line)!important}
.va-faq summary,.va-faq .elementor-tab-title{display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;list-style:none;padding:24px 0!important;font:400 clamp(1.3rem,2.2vw,1.8rem)/1.2 var(--va-serif)!important;color:var(--fg)!important;background:none!important}
.va-faq summary::-webkit-details-marker{display:none}
.va-faq summary *{font:inherit;color:inherit}
.va-faq summary svg,.va-faq summary i{flex:none;width:.7em;height:.7em;color:var(--acc);fill:currentColor}
.va-faq summary:hover{color:var(--acc)!important}
.va-faq details>:not(summary),.va-faq .elementor-tab-content{color:var(--mut);padding:0 0 24px!important;border:0!important;background:none!important}
.va-faq details>:not(summary) *{color:var(--mut)}
.va-princ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.va-princ>*{padding:38px 36px 38px 0;border-bottom:1px solid var(--line)}
.va-princ>*:nth-child(even){padding-left:36px;padding-right:0;border-left:1px solid var(--line)}
@media(max-width:700px){.va-princ{grid-template-columns:1fr}.va-princ>*:nth-child(even){padding-left:0;border-left:0}}
.va-steps{counter-reset:s;list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.va-steps li{counter-increment:s;display:grid;grid-template-columns:60px minmax(0,1fr);padding:18px 0;border-bottom:1px solid var(--line);font-size:17px}
.va-steps li::before{content:counter(s,decimal-leading-zero);font:italic 400 1.6rem/1 var(--va-serif);color:var(--acc)}
.va-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.va-list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}

/* 8a. Trois blocs en colonnes (va-three) : conteneur parent des trois blocs */
.va-gold h2{max-width:22ch}
.va-three{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:100%;border-top:1px solid var(--line);margin-top:clamp(32px,5vw,60px)}
.va-three>*{display:flex!important;flex-direction:column!important;gap:12px;min-width:0;padding:38px 32px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.va-three>:first-child{padding-left:0;border-left:0}
.va-three>:last-child{padding-right:0}
.va-three h3{font:400 clamp(1.25rem,1.8vw,1.5rem)/1.2 var(--va-serif)!important;color:var(--fg,var(--va-noir))!important;margin:0}
.va-three p{font-size:17px;line-height:1.6;color:var(--mut)!important;margin:0}
.va-three a{color:inherit!important;text-decoration:none;border-bottom:1px solid currentColor}
.va-three.va-num{counter-reset:n}
.va-three.va-num>:has(h3){counter-increment:n}
.va-three.va-num h3::before{content:counter(n,decimal-leading-zero);display:block;font:italic 400 1.1rem/1 var(--va-serif);color:var(--acc);margin-bottom:14px}
@media(max-width:1024px){
.va-three{grid-template-columns:1fr!important}
.va-three>*{padding:28px 0!important;border-left:0!important}
}

/* 8b. Sous-menu des missions (pages de l'offre) -------------------------------
   va-subnav : classe du conteneur pleine largeur qui contient le widget Menu
   WordPress (menu « Missions », disposition horizontale, pointeur Aucun,
   menu déroulant : Aucun). La page en cours se souligne toute seule.        */
.va-subnav{border-top:1px solid rgba(67,40,24,.22);border-bottom:1px solid rgba(67,40,24,.22);
  padding-block:0!important;padding-inline:max(var(--va-gut),calc((100vw - 1240px)/2))!important;box-sizing:border-box}
.va-subnav .elementor-nav-menu{display:flex;flex-wrap:nowrap;gap:clamp(20px,3vw,40px);overflow-x:auto;scrollbar-width:none}
.va-subnav .elementor-nav-menu::-webkit-scrollbar{display:none}
.va-subnav .elementor-nav-menu--main .elementor-item{font:400 12px/1 var(--va-sans)!important;letter-spacing:.16em!important;text-transform:uppercase!important;
  color:var(--va-bistre)!important;padding:20px 0!important;margin:0!important;white-space:nowrap;position:relative;background:none!important}
.va-subnav .elementor-nav-menu--main .elementor-item::before{display:none!important}
.va-subnav .elementor-nav-menu--main .elementor-item::after{content:'';position:absolute;left:0;bottom:14px;height:1px;width:0;
  background:var(--va-brun);transition:width .45s cubic-bezier(.19,1,.22,1)}
.va-subnav .elementor-nav-menu--main .elementor-item:hover::after,
.va-subnav .elementor-nav-menu--main .elementor-item.elementor-item-active::after{width:100%}
.va-subnav .elementor-nav-menu--main .elementor-item:hover,
.va-subnav .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var(--va-brun)!important}

/* 8c. Sous-menu des missions : une seule ligne qui défile, jamais de retour à la ligne
   (réglage widget : Menu déroulant mobile > Seuil = Aucun)                     */
.va-subnav .elementor-nav-menu--main .elementor-nav-menu{
  flex-wrap:nowrap!important;
  gap:clamp(18px,2vw,32px)!important;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.va-subnav .elementor-nav-menu--main .elementor-nav-menu>li{flex:0 0 auto!important}
.va-subnav .elementor-nav-menu--main .elementor-item{letter-spacing:.11em!important}
@media (max-width:767px){
  .va-subnav .elementor-nav-menu--main .elementor-item{padding:16px 0!important}
}

/* 9. Réalisations (Loop Grid) -----------------------------------------------
   va-pgrid : à poser sur le widget Loop Grid (ou son conteneur)
   va-filters : rangée de filtres (Loop Filter ou boutons)                 */
.va-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(28px,4vw,48px)}
.va-filters button,.va-filters a{font:500 14px/1 var(--va-sans);letter-spacing:.04em;padding:11px 18px;border:1px solid var(--va-lion);background:transparent;color:var(--fg,var(--va-noir));cursor:pointer;text-decoration:none}
.va-filters .on,.va-filters [aria-pressed="true"],.va-filters .e-filter-item[aria-pressed="true"]{background:var(--va-noir);color:var(--va-sel);border-color:var(--va-noir)}
.va-pgrid{gap:clamp(24px,3vw,44px)}
.va-pcard .va-tg{font:500 13px/1.4 var(--va-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--va-brun)}
.va-pcard .va-mo{display:inline-block;font:500 12.5px/1 var(--va-sans);padding:5px 9px;background:var(--va-peche-doux);color:var(--va-bistre)}
.va-pcard .va-q{font:italic 400 1rem/1.5 var(--va-serif);color:var(--mut)}
.va-pcard img{transition:transform 1.6s cubic-bezier(.19,1,.22,1)}
.va-pcard:hover img{transform:scale(1.03)}
.va-pcard .elementor-widget-image{overflow:hidden}

/* 10. Pied de page ------------------------------------------------------------
   va-footer : conteneur du pied de page, en grille de 3 colonnes (fond Seasalt,
   filet aligné). Ses enfants : 3 colonnes, puis va-base (ligne du bas).
   Colonne 1 : logo (va-flogo), texte (va-fdesc), réseaux (HTML, va-fsoc),
   horaires (va-fhours). Colonnes 2 et 3 : titre (va-fh) + widget Menu
   WordPress (classe va-flist).                                              */
.va-footer{display:grid!important;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.7fr));
  column-gap:40px;row-gap:0;align-items:start;box-sizing:border-box;position:relative;
  background:var(--va-sel);color:var(--va-noir);
  padding-top:clamp(56px,7vw,96px)!important;padding-bottom:40px!important;
  padding-inline:max(var(--va-gut),calc((100vw - 1240px)/2))!important}
.va-footer::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1240px,calc(100% - 2*var(--va-gut)));height:1px;background:rgba(67,40,24,.22)}
.va-footer>*{min-width:0}
.va-footer>:not(.va-base){display:flex;flex-direction:column!important;align-items:flex-start}
.va-footer>.va-base{grid-column:1/-1}
@media(max-width:767px){.va-footer{grid-template-columns:1fr!important;row-gap:64px!important}}
.va-flogo,a.va-flogo{display:block;flex:none;width:110px!important;height:72px!important;padding:0!important;background:none!important}
.va-flogo svg{display:block;width:100%!important;height:100%!important}
.va-fdesc{margin:22px 0 0;color:var(--va-bistre)!important;max-width:38ch;font-size:16.5px;line-height:1.6}
.va-fhours{margin:18px 0 0;font:400 13px/1.5 var(--va-sans);letter-spacing:.06em;color:var(--mut,#6B5646)!important}
.va-footer h4,.va-footer .va-fh{margin:0 0 20px;font:500 12px/1 var(--va-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--va-brun)}
.va-footer a{color:var(--va-noir);text-decoration:none}
.va-footer a:hover{color:var(--va-brun)}
/* listes de liens : widget Menu WordPress en vertical, classe va-flist */
.va-flist .elementor-nav-menu{display:grid!important;gap:14px}
.va-flist .elementor-nav-menu--main .elementor-item{font:300 17px/1.4 var(--va-sans)!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--va-noir)!important;padding:0!important;margin:0!important;background:none!important}
.va-flist .elementor-nav-menu--main .elementor-item:hover{color:var(--va-brun)!important}
.va-flist .elementor-nav-menu--main .elementor-item::after,.va-flist .elementor-nav-menu--main .elementor-item::before{display:none!important}
/* entrée du menu portant la classe va-all (ex. « Toutes les missions ») : masquée dans le footer */
.va-flist .va-all{display:none!important}
/* ligne du bas */
.va-footer .va-base{display:flex;flex-direction:row!important;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  margin-top:56px;padding-top:22px!important;border-top:1px solid rgba(67,40,24,.22);
  color:rgba(15,10,10,.68);font:400 12px/1.5 var(--va-sans);letter-spacing:.14em;text-transform:uppercase}
.va-base p{margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit!important}
.va-base a{color:inherit!important;text-decoration:none}
.va-base a:hover{color:var(--va-brun)!important}
/* icônes de réseaux (widget HTML) */
.va-fsoc{display:flex;gap:12px;margin-top:26px}
.va-fsoc a{width:38px;height:38px;border:1px solid rgba(67,40,24,.32);border-radius:50%;display:grid;place-items:center;color:var(--va-bistre);transition:background .3s,border-color .3s,color .3s}
.va-fsoc a:hover{background:var(--va-peche);border-color:var(--va-lion);color:var(--va-noir)}

/* 11. PAGES INTÉRIEURES : ouverture vidéo à 75 % (.va-vhero + .va-vpage) ------- */
.va-vhero.va-vpage{height:75vh!important;height:75svh!important;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end}
.va-vpage::before{background:linear-gradient(180deg,rgba(15,10,10,.5) 0,rgba(15,10,10,.08) 30%,rgba(15,10,10,.2) 52%,rgba(15,10,10,.78) 100%);mix-blend-mode:normal}
.va-vpage .e-background-video__content{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;gap:18px!important;height:100%;box-sizing:border-box;position:relative;z-index:3;padding-bottom:clamp(28px,5vw,64px)!important}
.va-vhero>:has(video),.va-vhero .va-vcap{filter:none!important}
.va-vpage .va-label,.va-vpage .va-label .elementor-heading-title{color:var(--va-sel)!important}
.va-vpage h1,.va-vpage h1.elementor-heading-title,.va-vpage .elementor-heading-title{color:var(--va-sel)!important;max-width:18ch;margin:0;text-shadow:0 2px 24px rgba(15,10,10,.35)}
.va-vpage h1 em,.va-vpage .elementor-heading-title em{color:var(--va-sel)!important}
.va-vpage .va-lead,.va-vpage .va-lead p{color:var(--va-sel)!important;max-width:52ch;margin:0}
/* bouton du hero des pages intérieures : pêche, aligné à gauche, largeur du texte */
.va-vpage .va-btn,.va-vpage a.va-btn,.va-vpage .va-btn.e-button-base{align-self:flex-start!important;width:auto!important;flex:0 0 auto!important}
.va-vpage .va-btn .elementor-button,.va-vpage a.va-btn,.va-vpage .va-btn.e-button-base,.va-vpage .va-btn .e-button-base{background:var(--va-peche)!important;border-color:var(--va-peche)!important;color:var(--va-bistre)!important}
.va-vpage .va-btn .elementor-button:hover,.va-vpage a.va-btn:hover,.va-vpage .va-btn.e-button-base:hover,.va-vpage .va-btn .e-button-base:hover{background:var(--va-sel)!important;border-color:var(--va-sel)!important;color:var(--va-bistre)!important}
/* en-tête transparent et texte clair sur toute page qui s'ouvre par une vidéo */
body:not(.home) .va-header:not(.va-scrolled){background:transparent!important;box-shadow:none}
body:not(.home) .va-header:not(.va-scrolled) .elementor-nav-menu--main .elementor-item{color:var(--va-voile)!important}
body:not(.home) .va-header:not(.va-scrolled) .elementor-nav-menu--main .elementor-item::after{background:var(--va-peche)}
body:not(.home) .va-header:not(.va-scrolled) .elementor-menu-toggle{color:var(--va-voile)}

/* 12. CONTACT : coordonnées (.va-coord, paragraphes à plat) ------------------- */
.va-coord{display:flex!important;flex-direction:column!important;gap:6px!important;width:100%;box-sizing:border-box}
.va-coord>.va-label{border-top:1px solid var(--line,rgba(67,40,24,.3));padding-top:18px;margin-top:24px!important}
.va-coord>.va-label:first-child{margin-top:0!important;border-top:0;padding-top:0}
.va-v,.va-v p,.va-v .elementor-heading-title{font:400 1.5rem/1.2 var(--va-serif)!important;color:var(--va-noir)!important;margin:0}
.va-v a{color:inherit!important;text-decoration:none;border-bottom:1px solid rgba(67,40,24,.3)}
.va-v a:hover{border-bottom-color:var(--va-brun)}
.va-coord .va-note,.va-coord .va-note p{font:italic 400 16px/1.6 var(--va-serif);color:var(--va-bistre);margin:0;max-width:none}
@media(max-width:1024px){
.va-coord{padding-top:clamp(32px,6vw,64px)!important;gap:8px!important}
.va-coord>.va-label{margin-top:36px!important;padding-top:24px}
.va-coord>.va-label:first-child{margin-top:0!important;padding-top:0}
.va-v,.va-v p,.va-v .elementor-heading-title{font-size:1.65rem!important}
.va-coord .va-note,.va-coord .va-note p{margin-top:4px}
}
@media(max-width:767px){.va-v,.va-v p,.va-v .elementor-heading-title{font-size:1.35rem!important}}

/* 12b. CONTACT : formulaire Elementor Pro atomique (.va-form, sélecteurs d'éléments) */
.va-form form{display:flex;flex-direction:column;gap:22px}
.va-form label{font:500 12px/1 var(--va-sans)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--va-bistre)!important}
.va-form input:not([type=checkbox]):not([type=radio]):not([type=submit]),.va-form select,.va-form textarea{font:300 18px/1.5 var(--va-sans)!important;color:var(--va-noir)!important;background:transparent!important;border:0!important;border-bottom:1px solid rgba(67,40,24,.3)!important;border-radius:0!important;padding:12px 0!important;box-shadow:none!important;width:100%}
.va-form input:focus,.va-form select:focus,.va-form textarea:focus{border-bottom-color:var(--va-brun)!important;outline:0}
.va-form ::placeholder{color:rgba(67,40,24,.55)}
.va-form textarea{min-height:130px}
.va-form button,.va-form [type=submit]{font:500 13px/1 var(--va-sans)!important;letter-spacing:.18em;text-transform:uppercase;padding:18px 30px!important;background:var(--va-bistre)!important;color:var(--va-sel)!important;border:1px solid var(--va-bistre)!important;border-radius:0!important;cursor:pointer}
.va-form button:hover,.va-form [type=submit]:hover{background:var(--va-noir)!important;border-color:var(--va-noir)!important}

/* 13. Mouvement réduit --------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- Mur de logos : "Ils nous ont aussi fait confiance" ----------
   Classe va-logos : à poser sur le widget "Galerie d'images" (Avancé > Classes CSS).
   Logos = images carrées (marge incluse). 4 colonnes / 3 tablette / 2 mobile.
   La dernière ligne, si elle est incomplète, est centrée. */
.va-logos{--n:4;--g:clamp(12px,2vw,32px);width:100%}
.va-logos .gallery{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--g)!important;margin:0!important}
.va-logos .gallery-item{flex:0 0 calc((100% - (var(--n) - 1) * var(--g)) / var(--n))!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important;float:none!important;display:flex;justify-content:center}
.va-logos .gallery-icon{display:flex;justify-content:center;align-items:center;width:100%}
.va-logos img{display:block;width:100%!important;max-width:180px;height:auto!important;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
@media(max-width:1024px){.va-logos{--n:3}}
@media(max-width:767px){.va-logos{--n:2}.va-logos img{max-width:140px}}

/* ---------- Réalisations : grille, filtre et cartes (Loop Grid classique) ---------- */
.va-band .elementor-widget-loop-grid,.va-band .elementor-widget-taxonomy-filter{width:100%}
.va-band .elementor-widget-loop-grid .elementor-loop-container{column-gap:clamp(24px,3vw,40px)!important;row-gap:clamp(36px,4.5vw,64px)!important}
.va-band .elementor-widget-taxonomy-filter{margin-bottom:clamp(28px,4vw,48px)}

/* Filtre par type de mission */
.va-band .e-filter{display:flex!important;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.va-band .e-filter-item{font:500 14px/1 var(--va-sans)!important;letter-spacing:.04em;text-transform:none;padding:11px 18px!important;border:1px solid var(--va-lion)!important;border-radius:0!important;background:transparent!important;color:var(--fg,var(--va-noir))!important;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.va-band .e-filter-item[data-filter="__all"]{order:-1}
.va-band .e-filter-item:hover{border-color:var(--va-noir)!important}
.va-band .e-filter-item[aria-pressed="true"]{background:var(--va-noir)!important;border-color:var(--va-noir)!important;color:var(--va-sel)!important}
.va-band .e-filter-item:focus-visible{outline:2px solid var(--va-brun);outline-offset:2px}

/* Carte : le zoom de l'image reste dans la carte */
.va-rea{overflow:hidden}
/* Titre : écrase le style global d'Elementor sur le widget Titre de la publication */
.va-rea .elementor-widget-theme-post-title{margin:0}
.va-rea .elementor-heading-title{margin:0!important;font:400 clamp(1.4rem,2vw,1.75rem)/1.15 var(--va-serif)!important;letter-spacing:-.015em;color:var(--fg,var(--va-noir))!important}
/* Types de mission : séparateur « · » à la place du « - » généré par Elementor */
.va-rea .va-mut{margin:0;font-size:0!important}
.va-rea .va-mut span{font-size:15px;line-height:1.5}
.va-rea .va-mut span+span::before{content:"\00b7";margin:0 .7em}

/* Carte sans lien (collaboration sans site) : pas de zoom ni de curseur main */
.va-rea:not([href]){cursor:default}
.va-rea:not([href]):hover img{transform:none}

/* Le terme "Collaborations" a sa propre section : on masque son bouton dans le filtre des projets */
.va-band .e-filter-item[data-filter="collaborations"]{display:none!important}

/* 13. PAGES JURIDIQUES : texte courant -------------------------------------------
   va-legal : classe du widget « Éditeur de texte » qui contient le texte,
   dans un conteneur « va-band va-light va-tight ».                              */
.va-band .va-legal{max-width:760px}
.va-band .va-legal h2{font:400 clamp(1.35rem,1.9vw,1.65rem)/1.2 var(--va-serif);letter-spacing:-.01em;margin:2.2em 0 .6em;max-width:none}
.va-band .va-legal h2:first-child{margin-top:0}
.va-band .va-legal p,.va-band .va-legal li{font-size:17px;line-height:1.7;color:var(--mut)}
.va-band .va-legal p{margin:0 0 1em}
.va-band .va-legal ul{margin:.6em 0 1em;padding-left:1.2em}
.va-band .va-legal li{margin-bottom:.4em}
.va-band .va-legal a{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* 14. Menu principal mobile (widget Menu de l'en-tête, classe va-mainnav)
   Réglages widget : Pleine largeur = Oui, bouton Hamburger.                    */
.va-mainnav .elementor-menu-toggle{
  background:transparent!important;color:#f4ece0!important;
  border:0!important;box-shadow:none!important}
.va-mainnav .elementor-menu-toggle svg,
.va-mainnav .elementor-menu-toggle i{fill:#f4ece0!important;color:#f4ece0!important}
.va-mainnav .elementor-nav-menu--dropdown{
  background:var(--va-bistre)!important;
  border-top:1px solid rgba(255,255,255,.12)}
.va-mainnav .elementor-nav-menu--dropdown .elementor-item{
  font:400 1.6rem/1.2 var(--va-serif)!important;
  letter-spacing:0!important;text-transform:none!important;
  color:#f4ece0!important;
  padding:20px var(--va-gut)!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
  background:none!important}
.va-mainnav .elementor-nav-menu--dropdown .elementor-item:hover,
.va-mainnav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
  color:#fee3a3!important}

/* 15. Menu plein écran (fenêtre modale mobile, classe va-popmenu sur le widget Menu) */
.va-popmenu .elementor-nav-menu--main .elementor-item{
  font:400 clamp(2rem,9vw,2.6rem)/1.15 var(--va-serif)!important;
  letter-spacing:0!important;text-transform:none!important;
  color:#f4ece0!important;padding:16px 0!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;background:none!important}
.va-popmenu .elementor-nav-menu--main .elementor-item:hover,
.va-popmenu .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#fee3a3!important}

/* 16. Bouton du menu plein écran (classe va-popbtn sur le widget Bouton de la fenêtre) */
.va-popbtn .elementor-button,.va-popbtn a.elementor-button,
a.va-popbtn,button.va-popbtn,.va-popbtn.e-button-base,.va-popbtn .e-button-base,.va-popbtn a{
  display:inline-block;background:#FFE6A7!important;color:#432818!important;border:0!important;border-radius:0!important;
  padding:18px 28px!important;font:500 12px/1 var(--va-sans)!important;
  letter-spacing:.16em!important;text-transform:uppercase!important;text-decoration:none!important}

/* 17. Hamburger de l'en-tête (classe va-burger sur le widget SVG) : aucun fond, quel que soit l'état */
.va-burger,.va-burger:hover,.va-burger:focus,.va-burger:active,
.va-burger a,.va-burger a:hover,.va-burger a:focus,.va-burger a:active{
  background:transparent!important;box-shadow:none!important;border:0!important}
.va-burger:focus-visible,.va-burger a:focus-visible{outline:1px solid rgba(244,236,224,.6)!important;outline-offset:4px}

/* 18. Hamburger de l'en-tête, ciblé par son ID (champ ID du widget SVG = va-burger) */
#va-burger,#va-burger *{
  background:transparent!important;background-color:transparent!important;
  box-shadow:none!important;border:0!important}
#va-burger:focus-visible,#va-burger a:focus-visible{outline:1px solid rgba(244,236,224,.6)!important;outline-offset:4px}

/* 20. Hamburger : seules les barres changent de couleur (crème en haut de page, bistre dès que l'on défile), jamais de fond */
#va-burger svg{background:none!important;fill:none!important}
#va-burger svg path{fill:none!important;stroke:#f4ece0}
@keyframes va-burger-scroll{from{stroke:#f4ece0}to{stroke:#432818}}
@supports (animation-timeline:scroll()){
  #va-burger svg path{
    animation:va-burger-scroll linear both;
    animation-timeline:scroll(root);
    animation-range:0 120px}
}

/* 23. Taille du hamburger de l'en-tête (zone tactile 48 px) */
#va-burger{width:48px!important;height:48px!important;flex:0 0 auto}
#va-burger svg{width:100%;height:100%}

/* 24. Pied de page sur tablette : la colonne marque en pleine largeur, Offres et Studio côte à côte
   (.va-footer est une grille ; sur mobile, la règle de la section 10 empile déjà les colonnes) */
@media (min-width:768px) and (max-width:1024px){
  .va-footer{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:clamp(32px,6vw,64px);row-gap:80px!important}
  .va-footer>.va-fbrand,.va-footer>:first-child{grid-column:1/-1}
}

/* 26. Bureau uniquement : en-tête et pied de page plus larges */
@media(min-width:1025px){
  :root{--va-edge:clamp(32px,3.6vw,64px)}
  .va-header{padding-inline:var(--va-edge)!important}
  .va-footer{padding-inline:var(--va-edge)!important}
  .va-footer::before{width:calc(100% - 2*var(--va-edge))}
}

/* 27. Mobile : l'image de l'introduction ne dépasse plus de son bloc */
@media(max-width:767px){
  .va-intro>*{max-width:100%!important;min-width:0!important;box-sizing:border-box}
  .va-intro img{max-width:100%!important}
}

/* 28. iPhone / iPad : le filtre SVG n'est pas appliqué aux vidéos par Safari.
   Remplacement par un duotone en CSS pur, calé sur les couleurs du duotone
   d'origine (vidéo en gris, teinte par fusion « color », plancher « lighten »).
   Ne concerne que les appareils Apple tactiles ; le bureau garde le filtre SVG. */
@supports (-webkit-touch-callout:none){
  .va-vhero video{filter:grayscale(1) contrast(var(--va-duo-con)) brightness(var(--va-duo-bri))!important}
  .va-vhero>:has(video){isolation:isolate}
  .va-vhero>:has(video)::before,.va-vhero>:has(video)::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
  .va-vhero>:has(video)::before{background:var(--va-duo-x);mix-blend-mode:color}
  .va-vhero>:has(video)::after{background:var(--va-duo-lo);mix-blend-mode:lighten}
}

/* 29. Duotone light (photos de personnes) : classe va-duo-light à la place de va-duo.
   Mélange 45 % photo d'origine / 55 % duotone (filtres va-duotone-light dans le widget HTML). */
:root{--va-duo-light:url(#va-duotone-light)}
body.va-rose{--va-duo-light:url(#va-duotone-light-rose)}
.va-duo-light,.va-duo-light img{filter:contrast(1.05) brightness(.96) var(--va-duo-light)}/* End custom CSS */