/* ========================================================================= QDK — ADAPTATION ELEMENTOR Reproduit le design du thème sur la structure Elementor (section > container > column > widget-wrap > widget). Chargé après style.css. Les jetons de charte viennent de style.css (--ink, --bronze, --stone…). ========================================================================= */ /* ---- Socle structurel : la grille tient même sans CSS Elementor régénéré ---- */ .elementor-section > .elementor-container{ display:flex;flex-wrap:wrap;align-items:stretch;margin:0 auto;width:100%; max-width:var(--maxw); padding-left:calc(var(--gutter) - 20px);padding-right:calc(var(--gutter) - 20px); } .elementor-section > .elementor-container > .elementor-column{display:flex;position:relative;min-height:1px;min-width:0} .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap{ display:flex;flex-wrap:wrap;align-content:flex-start;width:100%;padding:0 20px; } .elementor-section.elementor-section-content-middle > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center} .elementor-widget{width:100%} .elementor-widget-wrap > .elementor-element.el-btn{width:auto;margin-right:12px;margin-bottom:12px} .el-hidden{display:none!important} .el-c25{width:25%}.el-c33{width:33.333%}.el-c38{width:38%}.el-c40{width:40%}.el-c42{width:42%} .el-c45{width:45%}.el-c50{width:50%}.el-c55{width:55%}.el-c60{width:60%}.el-c62{width:62%} .el-c66{width:66.666%}.el-c75{width:75%}.el-c100{width:100%} @media(max-width:1024px){ .el-c25{width:50%} } @media(max-width:880px){ .el-c25,.el-c33,.el-c38,.el-c40,.el-c42,.el-c45,.el-c50,.el-c55,.el-c60,.el-c62,.el-c66,.el-c75{width:100%} /* Quand ces colonnes s'empilent (photo puis titre, cartes, dalles), leur contenu se retrouvait presque collé à la colonne suivante — un titre juste sous une photo devenait illisible, collé au bord de l'image. */ .elementor-column.el-c25:not(:last-child), .elementor-column.el-c33:not(:last-child), .elementor-column.el-c38:not(:last-child), .elementor-column.el-c40:not(:last-child), .elementor-column.el-c42:not(:last-child), .elementor-column.el-c45:not(:last-child), .elementor-column.el-c50:not(:last-child){ margin-bottom:32px!important; } /* Sécurité supplémentaire : un titre qui suit directement une photo (colonne image empilée juste au-dessus) gagne un peu d'air en plus, quelle que soit la marge déjà posée sur la colonne elle-même. */ .elementor-column:has(> .elementor-widget-wrap > .ph-el) + .elementor-column .el-h2:first-child, .elementor-column:has(> .elementor-widget-wrap > .ph-el) + .elementor-column .el-h3:first-child, .elementor-column:has(.ph-el) + .elementor-column .eyebrow:first-child{ margin-top:12px; } } /* Garde-fou mobile : la gouttière est imposée quoi qu'il arrive */ @media(max-width:1024px){ .elementor-section > .elementor-container{padding-left:calc(var(--gutter) - 20px)!important;padding-right:calc(var(--gutter) - 20px)!important} .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap{padding-left:20px!important;padding-right:20px!important} } /* ---- Tons de section (les classes .sec, .sec-ink… viennent de style.css) ---- */ .elementor-section.sec-tight{padding:clamp(20px,3vw,36px) 0} .elementor-section.sec-ink,.elementor-section.el-strip,.elementor-section.el-domaines{color:var(--muted-on-ink)!important} .sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4,.el-hero h1,.el-phero h1,.el-banner h2,.el-domaines h3, .sec-ink .el-h2 .elementor-heading-title,.sec-ink .el-h3 .elementor-heading-title,.el-banner .el-h2 .elementor-heading-title,.el-banner .el-h3 .elementor-heading-title,.el-domaines .el-h3 .elementor-heading-title,.dom-plate-el .el-h3 .elementor-heading-title{color:#fff!important} .sec-ink p,.el-banner p{color:var(--muted-on-ink)!important} .sec-ink .eyebrow,.el-hero .eyebrow,.el-banner .eyebrow,.el-phero .eyebrow{color:var(--bronze-soft)!important} /* ---- Typographie ---- */ .el-h1 .elementor-heading-title{font-size:clamp(34px,5.4vw,64px);line-height:1.05;letter-spacing:-.02em;font-weight:800;max-width:17ch;color:#fff!important} .el-h1-page .elementor-heading-title{font-size:clamp(32px,4.4vw,54px);max-width:18ch} .el-h1 em{font-style:normal;color:var(--bronze-soft)!important} .el-h2 .elementor-heading-title{font-size:clamp(26px,3.4vw,42px);line-height:1.12;letter-spacing:-.015em;font-weight:800;max-width:22ch;color:var(--ink)!important} .el-h3 .elementor-heading-title{font-size:clamp(18px,1.9vw,22px);line-height:1.25;font-weight:700;color:var(--ink)!important} .el-center .elementor-heading-title,.el-center{margin-left:auto;margin-right:auto;text-align:center} .el-measure{max-width:62ch} .el-narrow{max-width:48ch} .eyebrow .elementor-heading-title{ font-family:'Archivo',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.26em; text-transform:uppercase;color:var(--bronze-d)!important;display:flex;align-items:center;gap:14px; } .eyebrow .elementor-heading-title::before{content:'';width:26px;height:1px;background:currentColor!important;opacity:.6} .eyebrow.on-ink .elementor-heading-title,.sec-ink .eyebrow .elementor-heading-title,.el-hero .eyebrow .elementor-heading-title,.el-banner .eyebrow .elementor-heading-title,.el-phero .eyebrow .elementor-heading-title{color:var(--bronze-soft)!important} .el-center .eyebrow .elementor-heading-title{justify-content:center} .el-center .eyebrow .elementor-heading-title::before{display:none} .lead p{font-size:clamp(16.5px,1.5vw,19px);line-height:1.65;color:var(--muted)!important} .sec-ink .lead p,.el-banner .lead p{color:var(--muted-on-ink)!important} .el-text p{color:var(--muted)!important} .sec-ink .el-text p{color:var(--muted-on-ink)!important} .el-small p{font-size:14.5px;color:var(--muted)!important;line-height:1.6} .sub p{font-size:clamp(16px,1.4vw,18.5px);line-height:1.7;color:rgba(255,255,255,.86)!important} .el-manifesto .manifesto-p{ font-family:'Archivo',sans-serif;font-size:clamp(19px,2.2vw,27px);line-height:1.45;color:var(--ink)!important;margin:0 0 20px; } .el-manifesto .manifesto-p .hl{color:var(--bronze-d)!important} .sig-name{font-family:'Archivo',sans-serif;font-weight:700;color:var(--ink)!important;margin:0} .sig-role{font-size:13.5px;color:var(--muted)!important;margin:2px 0 0} .el-num .elementor-heading-title{ font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--bronze-d)!important;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line); } .sec-ink .el-num .elementor-heading-title{color:var(--bronze-soft)!important;border-bottom-color:var(--line-on-ink)!important} .dotrule .elementor-divider-separator{border-top:1px solid var(--line)!important} /* ---- Boutons (styles .btn* de style.css réappliqués sur le widget) ---- */ .elementor-button{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.045em; padding:16px 30px;border-radius:var(--radius);border:1px solid transparent;transition:background .3s,color .3s,border-color .3s; } .btn-primary .elementor-button{background:var(--bronze-d)!important;color:#fff!important;border-color:var(--bronze-d)!important} .btn-primary .elementor-button:hover{background:#7b6950!important;color:#fff!important} .btn-dark .elementor-button{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important} .btn-dark .elementor-button:hover{background:var(--ink-deep)!important;color:#fff!important} .btn-ghost .elementor-button{background:transparent!important;color:var(--ink)!important;border-color:var(--line-strong,rgba(39,52,66,.28))!important} .btn-ghost .elementor-button:hover{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important} .sec-ink .btn-ghost .elementor-button,.el-hero .btn-ghost .elementor-button,.el-banner .btn-ghost .elementor-button{ color:#fff!important;border-color:rgba(255,255,255,.42)!important; } .sec-ink .btn-ghost .elementor-button:hover,.el-hero .btn-ghost .elementor-button:hover{background:#fff!important;color:var(--ink)!important;border-color:#fff!important} .sec-ink .btn-dark .elementor-button{background:#fff!important;color:var(--ink)!important} .txtlink a{font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink)!important;border-bottom:1px solid var(--bronze);padding-bottom:3px} .txtlink a:hover{color:var(--bronze-d)!important} .txtlink.on-ink a,.sec-ink .txtlink a{color:#fff!important;border-color:var(--bronze-soft)!important} /* style.css définit aussi ".txtlink{border-bottom:...}" pour le thème classique, où cette classe est posée directement sur le . Ici, elle est posée sur le conteneur du widget HTML qui ENVELOPPE le : les deux traits (un sur le conteneur, un sur le lien) apparaissaient l'un sous l'autre, donnant l'impression d'un texte barré. Un seul suffit. */ .elementor-widget.txtlink{border-bottom:0!important;padding-bottom:0!important} /* ---- HERO plein écran ---- */ .elementor-section.el-hero{ background-color:var(--ink-deep)!important;min-height:clamp(600px,86vh,820px); padding:clamp(56px,8vw,110px) 0 clamp(64px,8vw,96px);position:relative; } .elementor-section.el-hero > .elementor-background-overlay{ background: linear-gradient(100deg,rgba(20,28,36,.90) 0 26%,rgba(20,28,36,.66) 58%,rgba(20,28,36,.42) 100%), linear-gradient(to bottom,rgba(27,37,47,0) 55%,rgba(27,37,47,.75) 88%,var(--ink) 100%)!important; opacity:1!important; } /* Repli si le calque Elementor n'est pas généré */ .elementor-section.el-hero::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(100deg,rgba(20,28,36,.88) 0 28%,rgba(20,28,36,.55) 60%,rgba(20,28,36,.35) 100%)!important; } .elementor-section.el-hero > .elementor-background-overlay ~ .elementor-container{position:relative;z-index:1} .elementor-section.el-hero > .elementor-container{position:relative;z-index:1} .hero-meta-el{ text-align:right;font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.55)!important;align-self:flex-end;margin-top:auto; } .hero-meta-el b{display:block;color:var(--bronze-soft)!important;margin-top:6px} .el-hero .el-c38 > .elementor-widget-wrap{align-content:flex-end;justify-content:flex-end;height:100%} .el-hero .el-c38{align-self:stretch} @media(max-width:880px){ .hero-meta-el{display:none} .elementor-section.el-hero{min-height:auto} } /* ---- Bande de réassurance ---- */ .elementor-section.el-strip{background:var(--ink)!important;padding:0;border-top:1px solid var(--line-on-ink)} .el-strip > .elementor-container > .elementor-column > .elementor-widget-wrap{padding-top:22px;padding-bottom:22px} .el-strip > .elementor-container > .elementor-column + .elementor-column{border-left:1px solid var(--line-on-ink)} .el-strip-item .elementor-heading-title{font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;color:#fff!important;line-height:1.4} @media(max-width:880px){ .el-strip > .elementor-container > .elementor-column + .elementor-column{border-left:0;border-top:1px solid var(--line-on-ink)} .el-strip > .elementor-container > .elementor-column > .elementor-widget-wrap{padding-top:14px;padding-bottom:14px} } /* ---- Bandeaux de page intérieure ---- */ .elementor-section.el-phero{ background:linear-gradient(108deg,rgba(27,37,47,.98) 0 45%,rgba(27,37,47,.70) 100%), radial-gradient(80% 80% at 88% 10%,rgba(167,148,124,.18),transparent 60%),var(--ink)!important; padding:clamp(72px,9vw,128px) 0 clamp(48px,6vw,76px); } .crumb{font-family:'Archivo',sans-serif;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-soft)!important} .crumb a{color:var(--bronze-soft)!important;opacity:.75} /* ---- Dalles domaines ---- */ .elementor-section.el-dom-head{padding-bottom:0} .elementor-section.el-domaines{background:var(--ink)!important;padding:36px 0 0} .el-domaines > .elementor-container{max-width:none;padding:0!important;gap:0} .el-domaines > .elementor-container > .elementor-column.dom-plate-el{ min-height:clamp(380px,42vw,560px);position:relative;background-color:var(--ink-deep)!important; background-size:cover;background-position:center;overflow:hidden; } .el-domaines > .elementor-container > .elementor-column.dom-plate-el > .elementor-background-overlay{ background:linear-gradient(to top,rgba(27,37,47,.94) 0 32%,rgba(27,37,47,.35) 65%,rgba(27,37,47,.10) 100%)!important;opacity:1!important; } .el-domaines > .elementor-container > .elementor-column.dom-plate-el::before{ content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(27,37,47,.92) 0 30%,rgba(27,37,47,.30) 62%,rgba(27,37,47,.08) 100%)!important; } .el-domaines > .elementor-container > .elementor-column.dom-plate-el > .elementor-widget-wrap{ position:relative;z-index:1;align-content:flex-end;padding:clamp(24px,3vw,40px)!important; } .dom-plate-el .dn .elementor-heading-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.22em;color:var(--bronze-soft)!important;margin-bottom:10px} .dom-plate-el .el-h3 .elementor-heading-title{color:#fff!important;font-size:clamp(20px,2vw,24px)} .dom-plate-el p{color:rgba(255,255,255,.78)!important;font-size:14.5px;max-width:34ch} .dom-plate-el .elementor-widget{margin-bottom:8px} @media(max-width:880px){ .el-domaines > .elementor-container > .elementor-column.dom-plate-el{min-height:340px} } /* ---- Cadres photo (ratio forcé, indépendant de .elementor-widget-container) ---- */ .ph-el{position:relative;display:block;overflow:hidden;background:var(--stone)!important;border:1px solid var(--line);border-radius:var(--radius)} .ph-el::before{content:'';display:block} .ph-el > .elementor-widget-container,.ph-el > figure,.ph-el > a,.ph-el > .elementor-widget-container > figure,.ph-el > .elementor-widget-container > a{ position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0; } .ph-el img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover} .r-43::before{padding-top:75%}.r-45::before{padding-top:125%}.r-56::before{padding-top:120%}.r-169::before{padding-top:56.25%} .sec-ink .ph-el{border-color:var(--line-on-ink)!important;background:var(--ink-deep)!important} /* ---- Bandeau immersif ---- */ .elementor-section.el-banner{background-color:var(--ink-deep)!important;padding:clamp(84px,11vw,150px) 0;position:relative} .elementor-section.el-banner > .elementor-background-overlay{ background:linear-gradient(100deg,rgba(20,28,36,.92) 0 40%,rgba(20,28,36,.62) 100%)!important;opacity:1!important; } .elementor-section.el-banner::after{ content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(100deg,rgba(20,28,36,.90) 0 40%,rgba(20,28,36,.58) 100%)!important; } .elementor-section.el-banner > .elementor-container{position:relative;z-index:1} /* ---- Cartes ---- */ .el-card > .elementor-widget-wrap{ background:var(--paper)!important;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,2.4vw,32px)!important;height:100%;transition:border-color .3s; } .el-card:hover > .elementor-widget-wrap{border-color:var(--bronze-soft)!important} .el-card{align-self:stretch} .sec-ink .el-card > .elementor-widget-wrap,.el-card.on-ink > .elementor-widget-wrap{background:rgba(255,255,255,.04)!important;border-color:var(--line-on-ink)!important} .el-card .el-h3 .elementor-heading-title,.el-card .el-h2 .elementor-heading-title{max-width:100%} .el-card p{font-size:14.5px;color:var(--muted)!important} .sec-ink .el-card p,.el-card.on-ink p{color:var(--muted-on-ink)!important} .sec-stone .el-card-feature > .elementor-widget-wrap,.sec-paper .el-card-feature > .elementor-widget-wrap,.el-card-feature > .elementor-widget-wrap{ background:var(--ink)!important;border-color:var(--ink)!important; } .el-card-feature h3,.el-card-feature .el-h3 .elementor-heading-title,.el-card-feature .el-h2 .elementor-heading-title{color:#fff!important} .el-card-feature p,.el-card-feature .elementor-icon-list-text{color:var(--muted-on-ink)!important} .el-card-feature .elementor-button{background:#fff!important;color:var(--ink)!important} /* ---- Listes à puces cochées ---- */ .elementor-icon-list-items{list-style:none;margin:0;padding:0} .elementor-icon-list-item{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)} .elementor-icon-list-item:last-child{border-bottom:0} .sec-ink .elementor-icon-list-item,.el-card-feature .elementor-icon-list-item{border-bottom-color:var(--line-on-ink)!important} .elementor-icon-list-icon{flex:none;margin-top:5px;line-height:0} .elementor-icon-list-icon i,.elementor-icon-list-icon svg{font-size:12px;width:13px;height:13px;color:var(--bronze-d)!important;fill:var(--bronze-d)!important} .sec-ink .elementor-icon-list-icon i,.sec-ink .elementor-icon-list-icon svg,.el-card-feature .elementor-icon-list-icon i{color:var(--bronze-soft)!important;fill:var(--bronze-soft)!important} .elementor-icon-list-text{color:var(--muted)!important;font-size:15px;line-height:1.55} .sec-ink .elementor-icon-list-text{color:var(--muted-on-ink)!important} .elementor-icon-list-text b{display:block;font-family:'Archivo',sans-serif;font-weight:700;color:var(--ink)!important;margin-bottom:2px} .sec-ink .elementor-icon-list-text b,.el-card-feature .elementor-icon-list-text b{color:#fff!important} /* ---- Réassurance ---- */ .elementor-section.el-assure{background:var(--ink)!important;padding:clamp(30px,4vw,48px) 0;border-top:1px solid var(--line-on-ink)} .el-assure-t .elementor-heading-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:#fff!important;margin-bottom:6px} .el-assure p{font-size:13.5px;color:var(--muted-on-ink)!important} /* ---- Accordéon (couleurs forcées) ---- */ .elementor-accordion{border-top:1px solid var(--line)} .elementor-accordion .elementor-accordion-item{border:0;border-bottom:1px solid var(--line)} .elementor-accordion .elementor-tab-title{padding:22px 40px 22px 0;position:relative;cursor:pointer;background:none!important;border:0} .elementor-accordion .elementor-accordion-title{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(16px,1.6vw,18px);color:var(--ink)!important} .elementor-accordion .elementor-accordion-icon,.elementor-accordion .elementor-accordion-icon i,.elementor-accordion .elementor-accordion-icon svg{color:var(--bronze-d)!important;fill:var(--bronze-d)!important} .elementor-accordion .elementor-accordion-icon{position:absolute;right:0;top:24px} .elementor-accordion .elementor-tab-content{padding:0 40px 22px 0;border:0;color:var(--muted)!important;font-size:15.5px} .elementor-accordion .elementor-tab-content p{color:var(--muted)!important} /* ---- Sections plugins / carte / contact ---- */ .elementor-section.el-plugin{padding:0} .el-plugin-section{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vw,100px) 0} .el-plugin-section h2{margin:12px 0 28px;font-size:clamp(26px,3.2vw,40px)} .el-map iframe{width:100%;height:420px;border:0;border-radius:var(--radius);display:block} .elementor-section.el-contact{background:var(--ink)!important} .el-contact .cta-phone{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(24px,2.6vw,32px);color:#fff!important} .el-contact .qdk-form-group label{color:#fff!important} .el-contact .qdk-form input[type="text"],.el-contact .qdk-form input[type="email"],.el-contact .qdk-form input[type="tel"], .el-contact .qdk-form select,.el-contact .qdk-form textarea{background:rgba(255,255,255,.06)!important;border-color:var(--line-on-ink)!important;color:#fff!important} .el-contact .field-help,.el-contact .qdk-check,.el-contact .form-notice{color:var(--muted-on-ink)!important} .el-contact .form-alert{color:#fff!important;background:rgba(255,255,255,.08)!important} /* ---- Slider horizontal sur mobile ---- */ @media(max-width:880px){ .el-slider > .elementor-container{ display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden; scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scroll-padding-right:var(--gutter); -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:16px; } .el-slider > .elementor-container::-webkit-scrollbar{display:none} .el-slider > .elementor-container > .elementor-column{flex:0 0 82%!important;width:82%!important;scroll-snap-align:start} .rgrid-hint{display:block;font-family:'Archivo',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)!important} } @media(min-width:881px){ .rgrid-hint{display:none} } /* ---- En-tête Elementor (comportement scroll + burger dans main.js) ---- */ .elementor-section.el-topbar{background:var(--ink-deep)!important;padding:0} /* Elementor applique par défaut un espacement ("gap large") à chaque colonne, y compris dans cette fine barre utilitaire, ce qui peut la faire paraître beaucoup plus haute que prévu selon la version d'Elementor installée. On neutralise cet espacement ici spécifiquement. */ .elementor-section.el-topbar > .elementor-container{min-height:0!important} .elementor-section.el-topbar > .elementor-container > .elementor-column > .elementor-widget-wrap{ padding-top:0!important;padding-bottom:0!important;min-height:0!important; } .elementor-section.el-topbar .elementor-widget{margin-bottom:0!important} .el-topbar p{font-size:12.5px;color:var(--muted-on-ink)!important;line-height:40px;margin:0;font-family:'Archivo',sans-serif;letter-spacing:.04em} .el-topbar a{color:var(--muted-on-ink)!important} .el-topbar a:hover{color:#fff!important} @media(max-width:1080px){ .elementor-section.el-topbar{display:none} } .elementor-section.el-hdr{background:rgba(247,245,241,.97)!important;position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line);padding:0;transition:box-shadow .3s} /* Léger relief au défilement, pour détacher l'en-tête du contenu — sans bascule de couleur (source connue de sautillement visuel sur Safari iOS, déjà corrigée sur le gabarit PHP classique ; l'en-tête Elementor n'avait jamais eu cet effet de profondeur du tout, faute d'identifiant HTML). */ .elementor-section.el-hdr.scrolled{box-shadow:0 10px 30px -26px rgba(27,37,47,.55)!important} .el-hdr > .elementor-container{min-height:82px;max-height:none;align-items:center;flex-wrap:nowrap} .el-hdr > .elementor-container > .elementor-column > .elementor-widget-wrap{padding-top:0!important;padding-bottom:0!important} .el-hdr .elementor-widget{margin-bottom:0!important} /* Les colonnes de l'en-tête utilisaient des largeurs fixes en pourcentage (logo 33 %, menu seulement 42 %) : sur une fenêtre de taille courante, ça écrasait « À propos » et « Nos métiers » sur deux lignes, cassant l'alignement de tout le menu. Le logo et le bouton se réduisent maintenant à la taille de leur contenu, et le menu prend tout l'espace restant — exactement le comportement du gabarit PHP classique. */ .el-hdr > .elementor-container > .elementor-column{min-width:0;width:auto!important;flex:0 0 auto} .el-hdr > .elementor-container > .elementor-column:nth-child(2){flex:1 1 auto;min-width:0} .el-logo{width:auto!important;max-width:160px;flex:none} .el-logo img{height:46px!important;width:auto!important;max-width:160px!important;max-height:46px!important} .el-logo .elementor-widget-container{width:auto!important;display:inline-block!important} .el-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;justify-content:center;align-items:center;flex-wrap:nowrap} .el-nav a{font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink)!important;position:relative;padding:8px 0;display:inline-block;white-space:nowrap} .el-nav a::after{content:'';position:absolute;left:0;bottom:2px;height:1px;width:0;background:var(--bronze)!important;transition:width .3s} .el-nav a:hover::after,.el-nav .current-menu-item > a::after,.el-nav .current_page_item > a::after{width:100%} /* Sous-menu (« Nos métiers » sous « Services »), desktop. Ciblé à la fois par la classe .sub-menu ET par la structure elle-même (tout