/* ========================================================================== LM MAQUINARIA , Feuille de styles -------------------------------------------------------------------------- STRUCTURE : celle de lahita.es (bandeau « headline », areas en .row/.col, centerline, point-connector, grille d'icônes circulaires, equal-height, portfolio + lightbox, flipbox, encart latéral sombre, pied de page avec carte). IDENTITÉ : celle de LM MAQUINARIA , logo, navy #001136, or #F8AA01, polices Outfit / Inter, boutons pilule. ========================================================================== */ :root{ /* Couleurs , identité LM MAQUINARIA (logo ambre / navy / noir) */ --gold:#F8AA01; --gold-lt:#FFC350; --gold-dk:#C9860A; --navy:#001136; --deep:#070B14; --ink:#0E1B38; --slate:#596E95; /* bleu ardoise secondaire (sur-titres) */ --grey:#5C6A85; --grey-lt:#8A94A6; --line:#E4E8F0; --line-2:#EEF1F6; --soft:#F5F7FB; --soft-2:#FAFBFD; --white:#fff; /* Typographie */ --disp:'Outfit','Inter','Segoe UI',system-ui,sans-serif; --body:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* Rythme */ --pad:clamp(20px,5vw,52px); --maxw:1240px; /* gabarit lahita : max-1170 */ --maxw-wide:1440px; --section:clamp(64px,7.5vw,108px); --head-h:128px; --ease:cubic-bezier(.22,.61,.36,1); --shadow:0 18px 44px rgba(0,17,54,.13); --shadow-sm:0 6px 22px rgba(0,17,54,.09); --radius:8px; } *,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--white);color:var(--grey); font-family:var(--body);font-size:16px;line-height:1.72;font-weight:400; -webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:0;background:none} ul,ol{margin:0;padding:0;list-style:none} ::selection{background:var(--gold);color:var(--navy)} /* -------------------------------------------------------------------------- 1. Typographie , hiérarchie « headline-title / headline-subtitle » lahita -------------------------------------------------------------------------- */ h1,h2,h3,h4,h5{ font-family:var(--disp);color:var(--navy); font-weight:300;line-height:1.1;letter-spacing:-.022em;margin:0; } h1 b,h2 b,h3 b,h4 b,h1 em,h2 em,h3 em,h4 em{font-weight:700;font-style:normal} h1{font-size:clamp(36px,5.6vw,64px)} h2{font-size:clamp(29px,3.8vw,46px)} h3{font-size:clamp(19px,1.8vw,23px);line-height:1.22} p{margin:0 0 1.05em;color:var(--grey)} .lead{font-size:clamp(16.5px,1.4vw,18.5px);max-width:64ch;line-height:1.76;color:var(--grey)} strong,b{font-weight:600;color:var(--ink)} /* Classes de composition lahita */ .t-upper{text-transform:uppercase} .t-extra-light{font-weight:200} .t-light{font-weight:300} .t-bold{font-weight:700} .t-tight{letter-spacing:-.035em} .t-gold{color:var(--gold)} .t-navy{color:var(--navy)} .t-slate{color:var(--slate)} .t-white{color:#fff} .t-right{text-align:right} .t-center{text-align:center} .t-quote{font-size:clamp(19px,2.1vw,25px);line-height:1.5;font-weight:300;color:var(--navy); border-left:3px solid var(--gold);padding-left:clamp(18px,2.2vw,28px);max-width:34ch} .t-list{display:grid;gap:.85rem;margin:0 0 1.6rem} .t-list li{position:relative;padding-left:1.6rem;color:var(--grey)} .t-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px; border-radius:50%;background:var(--gold)} .t-list b{color:var(--navy);font-weight:600} /* Sur-titre de section (lahita : .headline-element-title) */ .eyebrow{ font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.26em; text-transform:uppercase;color:var(--gold);display:block;margin-bottom:20px;line-height:1.4; } .eyebrow.slate{color:var(--slate)} .eyebrow.navy{color:var(--navy)} /* -------------------------------------------------------------------------- 2. Gabarit , .wrap, .area, .row / .col-* (système lahita) -------------------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)} .wrap.wide{max-width:var(--maxw-wide)} .area{position:relative;padding-block:var(--section)} .area.tight{padding-block:clamp(44px,5vw,72px)} .area.soft{background:var(--soft)} .area.deep{background:var(--deep);color:rgba(255,255,255,.7)} .area.deep h1,.area.deep h2,.area.deep h3,.area.deep h4{color:#fff} .area.deep .eyebrow{color:var(--gold-lt)} .area.deep .lead,.area.deep p{color:rgba(255,255,255,.72)} .row{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,38px);align-items:start} .row.center{align-items:center} .row.end{align-items:end} .col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5} .col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8} .col-9{grid-column:span 9}.col-10{grid-column:span 10}.col-12{grid-column:span 12} .offset-1{margin-left:8.3333%}.offset-2{margin-left:16.6666%}.push-1{margin-right:8.3333%} @media(max-width:1000px){ .row{grid-template-columns:repeat(6,1fr)} .col-3,.col-4,.col-5{grid-column:span 3} .col-6,.col-7,.col-8,.col-9,.col-10{grid-column:span 6} .offset-1,.offset-2,.push-1{margin:0} } @media(max-width:680px){ .row{grid-template-columns:1fr} .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-12{grid-column:span 1} } .spacer{height:clamp(30px,4vw,56px)} /* Séparateur à titre centré (lahita : vc_separator has-text) */ .sep-title{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px); margin-block:clamp(34px,4.5vw,62px);text-align:center} .sep-title::before,.sep-title::after{content:"";height:1px;flex:1;max-width:190px;background:var(--line)} .sep-title span{font-family:var(--disp);font-size:clamp(19px,2.4vw,28px);font-weight:300; color:var(--navy);letter-spacing:-.02em;line-height:1.2} .sep-title.gold span{color:var(--gold)} /* En-tête de section (lahita : .sec-head) */ .sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(34px,4.5vw,58px)} .sec-head .lead{margin:0} .sec-head.tight{margin-bottom:clamp(24px,3vw,38px)} @media(max-width:900px){.sec-head{grid-template-columns:1fr;align-items:start;gap:16px}} /* -------------------------------------------------------------------------- 3. Boutons , pilule or, identité LM -------------------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:15px 30px;font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:.015em; border:1.5px solid transparent;border-radius:999px;cursor:pointer; transition:background-color .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s; text-align:center;line-height:1.35;white-space:nowrap; } .btn svg{width:16px;height:16px;flex:none;transition:transform .22s var(--ease)} .btn:hover{transform:translateY(-2px)} .btn:hover svg{transform:translateX(3px)} .btn-b,.btn-o,.btn-d{background:var(--gold);color:var(--navy)} .btn-b:hover,.btn-o:hover,.btn-d:hover{background:var(--navy);color:#fff} .btn-g,.btn-accent{background:var(--navy);color:#fff} .btn-g:hover,.btn-accent:hover{background:var(--gold);color:var(--navy)} .btn-w{background:#fff;color:var(--navy);border-color:var(--line)} .btn-w:hover{border-color:var(--gold);color:var(--gold)} .btn-n{background:var(--navy);color:#fff} .btn-n:hover{background:var(--gold);color:var(--navy)} .btn.btn-xl{padding:18px 40px;font-size:16px;box-shadow:0 14px 32px rgba(0,17,54,.2)} .btn.btn-xl:hover{transform:translateY(-3px)} .btn.btn-sm{padding:10px 22px;font-size:14px} .btn.link{padding:0;background:none;border:0;color:var(--navy);border-bottom:1.5px solid var(--gold); border-radius:0;font-weight:500} .btn.link:hover{color:var(--gold);transform:none} /* Contour clair : réservé aux surfaces sombres */ .deep .btn-w,.cta .btn-w{border-color:rgba(255,255,255,.55);color:#fff;background:transparent} .deep .btn-w:hover,.cta .btn-w:hover{background:#fff;color:var(--navy);border-color:#fff} .btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem} .btn-row .btn{justify-content:center} /* -------------------------------------------------------------------------- 4. En-tête : logo + méga-menu à deux niveaux (lahita / slicknav) -------------------------------------------------------------------------- */ /* En-tête blanc permanent (lahita) : très grand logo + navigation à droite. Rétrécissement au scroll : .solid réduit la hauteur, le logo et l'ombre. */ .head{position:fixed;inset:0 0 auto;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(8px); border-bottom:1px solid var(--line); transition:box-shadow .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease)} .head.solid{background:#fff;box-shadow:0 10px 30px rgba(0,17,54,.11)} .head-in{display:flex;align-items:center;gap:clamp(12px,2vw,30px);height:var(--head-h); max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--pad); transition:height .35s var(--ease)} .head.solid .head-in{height:88px} .brand{display:flex;align-items:center;flex:none} .brand img{height:clamp(76px,10vh,96px);width:auto;transition:height .35s var(--ease)} .head.solid .brand img{height:52px} @media(max-width:480px){.head-in{height:74px}.head.solid .head-in{height:64px}.brand img{height:42px}} /* Préférence « mouvement réduit » : le rétrécissement reste, sans animation */ .no-motion .head,.no-motion .head-in,.no-motion .brand img{transition:none} /* Navigation (lahita) */ .nav{margin-left:auto} .nav ul.menu{display:flex;align-items:center;gap:clamp(4px,.6vw,12px)} .nav a{font-family:var(--disp);font-size:15.5px;font-weight:400;color:var(--navy); padding:.5rem .55rem;display:inline-flex;align-items:center;gap:.35rem; white-space:nowrap;position:relative;transition:color .22s,background-color .22s} .nav a .car,.mnav a .car{display:block;width:9px;height:9px;flex:none; opacity:.6;transition:transform .25s var(--ease)} .mnav a .car{width:12px;height:12px} .nav li:hover>a .car,.nav li.open>a .car{transform:rotate(180deg)} .nav a::after{content:"";position:absolute;left:.55rem;right:.55rem;bottom:-1px;height:2px;width:0; background:var(--gold);border-radius:2px;transition:width .26s var(--ease)} .nav a:hover,.nav a.on{color:var(--gold)} .nav a:hover::after,.nav a.on::after{width:calc(100% - 1.1rem)} .nav > ul > li{position:relative} .nav > ul > li > a{display:flex} .nav li.has-sub{position:relative} /* Sous-menu (niveau 2) , panneau sombre commun aux deux niveaux */ .nav ul.sub{ --sub-inset:9px; /* filet doré 3px + marge intérieure 6px */ position:absolute;top:100%;left:0;min-width:250px;z-index:95; background:var(--navy);padding:6px 0;border-top:3px solid var(--gold); border-radius:0 0 14px 14px; opacity:0;visibility:hidden; transform:translateY(10px);transition:opacity .24s,transform .24s var(--ease),visibility .24s; box-shadow:0 18px 38px -10px rgba(0,17,54,.38),0 30px 64px -14px rgba(0,0,0,.32); } .nav li.has-sub:hover>ul.sub,.nav li.has-sub.open>ul.sub{opacity:1;visibility:visible;transform:translateY(0)} .nav ul.sub li{position:relative} /* display:flex indispensable : c'est lui qui donne son contexte au .car, sans quoi le chevron retombe sur 300x150px et étire la hauteur du panneau */ .nav ul.sub a{ display:flex;align-items:center;gap:.4rem; padding:.7rem 1.15rem;font-size:14.5px;color:rgba(255,255,255,.82); border-bottom:1px solid rgba(255,255,255,.07); transition:background-color .2s,color .2s; } .nav ul.sub a::after{display:none} /* Survol/actif : fond + liseré inset limités à la boîte du lien lui-même, les items voisins ne bougent pas */ .nav ul.sub a:hover,.nav ul.sub a:focus-visible,.nav ul.sub a.on{ color:#fff;background:rgba(248,170,1,.14); box-shadow:inset 3px 0 0 var(--gold); } .nav ul.sub li:last-child>a{border-bottom:0} /* Lien de téléchargement : petite icône flèche, poussée à droite du libellé. Dimensionné aussi pour .mnav : sans display, un inline ignore width/height et le retombe sur 300x150px. */ .dl-ico,.nav ul.sub .dl-ico,.mnav a .dl-ico{display:block;width:14px;height:14px; flex:none;margin-left:auto;opacity:.55; transition:opacity .2s,transform .2s var(--ease)} .mnav a .dl-ico{width:15px;height:15px} .nav ul.sub a:hover .dl-ico{opacity:1;transform:translateY(1px)} .nav ul.sub a:hover .dl-ico path{stroke:var(--gold)} /* Niveau 3 : aligné sur le bord haut du panneau parent (pas sur le
  • , qui est décalé du filet doré + de la marge intérieure) */ .nav ul.sub ul.sub{top:calc(-1 * var(--sub-inset));left:100%;min-width:220px; padding:6px 0;border-radius:14px} .nav li.has-sub:hover>ul.sub>li.has-sub>ul.sub{transform:translateY(0)} /* En-tête non solvent : sous-menus en panneau plein largeur */ .nav ul.sub.wide{min-width:305px} .head-cta{display:flex;align-items:center;gap:.7rem;flex:none} /* Contact téléphone : icône 20px + numéro, alignés sur une même ligne */ .head-tel{display:inline-flex;align-items:center;gap:8px;flex:none;white-space:nowrap; font-family:var(--disp);font-size:15px;font-weight:500;color:var(--navy);line-height:1; transition:color .22s} .head-tel:hover{color:var(--gold)} .head-tel svg{width:20px;height:20px;flex:none} @media(max-width:560px){.head-tel span{display:none}.head-tel svg{width:22px;height:22px}} /* Bouton contour (lahita : AREA CLIENTES) */ .head .btn{padding:11px 26px;font-size:14px;line-height:1;background:#fff;color:var(--navy); border:2px solid #CBDEE4;border-radius:999px;font-weight:500} .head .btn:hover{background:#fff;border-color:var(--gold);color:var(--gold)} @media(max-width:1140px){ .nav{display:none} .head-cta .btn{display:none} /* En-tête mobile : logo à gauche, groupe téléphone + burger plaqué à droite. .nav passe en display:none, donc son margin-left:auto ne joue plus et le groupe retombait vers le centre. head-cta devient le dernier enfant flex visible de .head-in et récupère la poussée. */ .head-in{justify-content:space-between} .head-cta{margin-left:auto;gap:1rem} } /* Menu mobile : même arborescence que le desktop */ .burger{display:none;width:44px;height:44px;cursor:pointer;position:relative;margin-left:auto} .burger span{position:absolute;left:10px;width:24px;height:1.5px;background:var(--navy);border-radius:2px;transition:.3s var(--ease)} .burger span:nth-child(1){top:14px} .burger span:nth-child(2){top:20px} .burger span:nth-child(3){top:26px} .burger.x span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media(max-width:1140px){.burger{display:block}} .mnav{position:fixed;inset:0;z-index:88;background:var(--navy);color:#fff; padding:calc(var(--head-h) + 18px) var(--pad) 34px;overflow-y:auto; transform:translateY(-100%);display:flex;flex-direction:column; transition:transform .4s var(--ease),padding-top .35s var(--ease)} .mnav.open{transform:translateY(0)} /* Le menu mobile suit la hauteur de l'en-tête, réduit au scroll */ .head.solid ~ .mnav{padding-top:calc(88px + 18px)} @media(max-width:1024px){.head.solid ~ .mnav{padding-top:calc(84px + 18px)}} @media(max-width:480px){.head.solid ~ .mnav{padding-top:calc(64px + 18px)}} .mnav-head{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.24em; text-transform:uppercase;color:var(--gold);padding:1.6rem 0 .5rem;border-bottom:1px solid rgba(255,255,255,.12)} .mnav-head:first-child{padding-top:0} .mnav a{font-family:var(--disp);font-size:1.08rem;font-weight:400;color:rgba(255,255,255,.92); padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex; justify-content:space-between;align-items:center;gap:1rem;letter-spacing:-.01em} .mnav a:hover{color:var(--gold)} .mnav a .sub-n{font-size:.7rem;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.35)} .mnav ul.sub{position:static;opacity:1;visibility:visible;transform:none;background:none; padding:0 0 .4rem .9rem;box-shadow:none;display:none} /* Accordéon : le panneau est piloté par .open (voir main.js). display:none ne s'anime pas, on révèle donc par une animation d'apparition , le mouvement « réduit » global neutralise celle-ci. */ .mnav li.has-sub.open>ul.sub{display:block;animation:mnav-sub .28s var(--ease)} .mnav li.has-sub.open>a .car{transform:rotate(180deg)} @keyframes mnav-sub{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .mnav ul.sub a{font-size:.95rem;font-weight:400;color:rgba(255,255,255,.66); padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.06)} .mnav ul.sub ul.sub{padding-left:.8rem} .mnav-foot{margin-top:auto;padding-top:2rem;display:grid;gap:.4rem} .mnav-foot a{font-family:var(--body);font-size:.94rem;border:0;padding:.15rem 0;color:rgba(255,255,255,.72)} .mnav .btn{margin-top:1.4rem;width:100%;background:var(--gold);color:var(--navy);font-size:15px;padding:15px 24px} .mnav .btn svg{width:16px;height:16px} /* -------------------------------------------------------------------------- 5. Bandeau « headline » (signature lahita) , image de fond + titre -------------------------------------------------------------------------- */ .headline{position:relative;overflow:hidden;background:var(--soft); padding-block:calc(var(--head-h) + clamp(46px,6vw,86px)) clamp(46px,5.5vw,80px);color:#fff} .headline-bg{position:absolute;inset:0;background-size:cover;background-position:center 50px; background-repeat:no-repeat;background-attachment:fixed;transform:scale(1.04)} .headline-mask{position:absolute;inset:0; background:linear-gradient(105deg,rgba(0,17,54,.9) 0%,rgba(0,17,54,.68) 48%,rgba(0,17,54,.44) 100%)} .headline .wrap{position:relative;z-index:2} .headline .crumb{font-family:var(--disp);font-size:12px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:18px} .headline .crumb a{color:rgba(255,255,255,.92);transition:color .2s} .headline .crumb a:hover{color:var(--gold)} .headline .crumb i{font-style:normal;opacity:.45;padding-inline:.45rem} .headline-title{font-family:var(--disp);font-weight:300;font-size:clamp(34px,5vw,58px); line-height:1.06;letter-spacing:-.028em;color:#fff;max-width:20ch;margin:0} .headline-title b,.headline-title em{font-weight:700;font-style:normal;color:#fff} .headline-subtitle{font-family:var(--disp);font-weight:300;font-size:clamp(17px,1.9vw,25px); line-height:1.4;color:rgba(255,255,255,.9);max-width:52ch;margin:1.1rem 0 0} .headline-element{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.26em; text-transform:uppercase;color:var(--gold);display:block;margin-bottom:18px} .headline-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem} @media(max-width:600px){.headline-actions{flex-direction:column;width:100%}} @media(max-width:600px){.headline-actions .btn{width:100%;justify-content:center}} /* Variante claire (sans image) */ .headline.plain{background:var(--soft);color:var(--navy)} .headline.plain .headline-mask{background:linear-gradient(120deg,var(--soft) 0%,#EDF1F7 100%)} .headline.plain .headline-title{color:var(--navy)} .headline.plain .headline-subtitle{color:var(--grey)} .headline.plain .crumb{color:var(--grey)} .headline.plain .crumb a{color:var(--navy)} /* Héro d'accueil (lahita) : image plein écran ancrée (parallaxe) et voile sombre. AUCUN texte par-dessus : le titre + téléphone arrive plus bas, dans la section .hero-after ------------------------------------------- */ .hero{position:relative;display:block; height:100vh;height:100svh;min-height:600px;background:var(--deep);overflow:hidden; color:#fff;padding:calc(var(--head-h) + 24px) var(--pad) clamp(28px,4vh,44px)} .hero-media{position:absolute;inset:0;background:var(--deep)} .hero-media .slide{position:absolute;inset:0;background-size:cover;background-position:center top; background-attachment:fixed;opacity:0;transition:opacity 1.1s ease; background-image:url(../img/hero-1456.jpg)} .hero-media .slide.on{opacity:1} /* Échelle responsive : la source ne fait que 1456px de large, on sert donc une version plus légère au lieu de faire télécharger le gros fichier. */ @media(max-width:1024px){.hero-media .slide{background-image:url(../img/hero-1024.jpg)}} @media(max-width:768px){.hero-media .slide{background-image:url(../img/hero-768.jpg)}} @media(max-width:560px){.hero-media .slide{background-image:url(../img/hero-560.jpg)}} .hero-media::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(0,17,54,.4) 0%,rgba(0,17,54,.28) 45%,rgba(0,17,54,.5) 100%)} /* Mobile : le hero se contracte sur la photo, sans hauteur forcée. La photo est un paysage ≈1,35 (hero-*.jpg : 560x415, 768x570, 1024x760). On supprime toute hauteur en vh et tout plancher, puis on donne au cadre la proportion de la photo : la hauteur devient width/4/3 et suit la largeur, il n'y a donc plus ni espace vide ni bande de couleur. Pourquoi 4/3 et pas 16/9 : 16/9 (1,78) est plus large que la photo (1,35), « cover » rognerait alors 24% de la hauteur , 17px perdus en haut et en bas, sur la grue. Avec 4/3 (1,33) le rognage résiduel est de 1,2%, soit ~2px par côté : invisible. On garde « cover » plutôt que « contain » justement pour ne laisser aucune bande. Les trois !important sont nécessaires : le .hero de base impose height:100svh ET min-height:600px. Sans neutraliser min-height, la boîte resterait à 600px de haut et l'image serait à nouveau rognée sur les côtés. */ @media(max-width:768px){ .hero{ height:auto !important; min-height:0 !important; padding:0 !important; aspect-ratio:4/3 !important; background:var(--deep) !important; /* Le header est en position:fixed. Comme .hero-media est en inset:0, le hero démarrait à y=0 et la barre blanche recouvrait le haut de la photo : le cabin et le début du boom se trouvent vers y≈11% de l'image, donc entièrement sous la barre. 84px = hauteur réelle de .head-in ici (--head-h:84px sous 1024px). La marge sert aussi de fond au hero, la zone restante étant de toute façon masquée par le header. */ margin-top:84px !important; } .hero-media .slide{ background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important; background-attachment:scroll !important; } } @media(max-width:480px){ /* Sous 480px, .head-in{height:74px} prend le dessus sur --head-h : on suit la vraie hauteur de la barre plutôt que 84px, sinon 10px de fond visible. */ .hero{margin-top:74px !important} } /* Titre + téléphone, hors de l'image (lahita :

    +

    centered) ------ ATTENTION : le padding vertical ne doit JAMAIS se calculer en vw. Avec clamp(90px,12vw,190px) un grand écran ajoutait ~173px de blanc au-dessus ET en dessous (~346px pour ~110px de texte), et repoussait tout le reste de la page. On suit le rythme serré déjà défini par .area.tight. */ .hero-after{background:#fff;text-align:center;padding-block:clamp(44px,5vw,76px)} .hero-after h1{font-size:clamp(30px,4.4vw,52px);font-weight:400;letter-spacing:-.025em;line-height:1.14} .hero-after h4{margin-top:1.1rem;font-size:clamp(16px,1.8vw,22px);font-weight:600;line-height:1.5} .hero-after h4 a{color:var(--gold);font-weight:600;transition:color .22s} .hero-after h4 a:hover{color:var(--navy)} @media(max-width:600px){.hero-after h1{font-size:clamp(26px,7.4vw,34px)}} /* -------------------------------------------------------------------------- 6. Centerline (lahita : ligne de vie 3 points, logo au centre) -------------------------------------------------------------------------- */ .centerline{position:relative;padding-block:clamp(30px,4vw,54px)} /* --cg : gouttière de la grille, réutilisée pour calculer les extrémités de la ligne (cf. .centerline-track::before) afin qu'elles restent alignées. */ .centerline-track{--cg:clamp(16px,2.4vw,40px); position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--cg)} /* La ligne s'arrête exactement au centre des pastilles extrêmes. Centre d'une colonne = (W - 2*gap)/6 = W/6 - gap/3 d'où left/right = 16.6666% - var(--cg)/3 z-index:0 : la ligne reste au fond, jamais au-dessus du texte ni du logo. */ .centerline-track::before{content:"";position:absolute;z-index:0; left:calc(16.6666% - var(--cg)/3);right:calc(16.6666% - var(--cg)/3); top:43.5px;height:2px;background:linear-gradient(90deg,var(--gold),var(--slate) 50%,var(--navy))} .centerline-center{position:absolute;left:50%;top:14px;transform:translateX(-50%); z-index:3;background:var(--white);padding:0 18px;line-height:0} .centerline-center img{height:60px;width:auto} .cl-item{text-align:center;position:relative;z-index:1} /* display:block INDISPENSABLE : .cl-dot est un inline, sur lequel le navigateur ignore width/height et margin:auto. Sans ce display la pastille s'effondre et le h3 remonte sous la ligne, qui le barre. */ .cl-dot{display:block;width:15px;height:15px;border-radius:50%;background:var(--white); border:4px solid var(--gold);margin:37px auto 26px;position:relative;z-index:2; transition:transform .3s var(--ease)} .cl-item:hover .cl-dot{transform:scale(1.28)} .cl-item:nth-child(2) .cl-dot{border-color:var(--slate)} .cl-item:nth-child(3) .cl-dot{border-color:var(--navy)} /* Fond opaque sur le texte : même z-index que la pastille, il masque la ligne si elle devait passer derrière (ligne z-index:0, texte z-index:2). */ .cl-item h3{font-size:clamp(22px,2.5vw,30px);font-weight:300;color:var(--navy);margin-bottom:.7rem; display:inline-block;position:relative;z-index:2;background:var(--white);padding-inline:3px} .cl-item:nth-child(1) h3{color:var(--gold)} .cl-item:nth-child(2) h3{color:var(--slate)} .cl-item p{font-size:.94rem;margin:0 auto;max-width:34ch;color:var(--grey); position:relative;z-index:2;background:var(--white);padding-inline:3px} @media(max-width:820px){ .centerline-track{grid-template-columns:1fr;gap:0} .centerline-track::before{left:calc(50% - 1px);right:auto;top:20px;bottom:20px;width:2px;height:auto; background:linear-gradient(180deg,var(--gold),var(--slate) 50%,var(--navy))} .centerline-center{display:none} .cl-dot{margin:0 auto 20px} .cl-item{padding-bottom:34px} .cl-item p{max-width:44ch} } /* -------------------------------------------------------------------------- 7. Grille d'icônes circulaires (lahita : vc_box_border_circle) -------------------------------------------------------------------------- */ .icircles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.2vw,52px)} .icircle{text-align:center;padding-inline:.4rem} .icircle-img{width:clamp(120px,13vw,168px);height:clamp(120px,13vw,168px);border-radius:50%; border:2px solid var(--line);padding:9px;margin:0 auto 1.5rem;background:#fff; overflow:hidden;transition:border-color .35s,transform .35s var(--ease),box-shadow .35s} .icircle:hover .icircle-img{border-color:var(--gold);transform:translateY(-5px);box-shadow:var(--shadow-sm)} .icircle-img img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%;display:block} .icircle h3{font-size:clamp(19px,1.9vw,24px);font-weight:300;margin-bottom:.7rem} .icircle h3 b{font-weight:700} .icircle p{font-size:.94rem;margin:0 auto;max-width:38ch} .icircle.gold h3{color:var(--gold)} .icircle.slate h3{color:var(--slate)} .icircle.navy h3{color:var(--navy)} @media(max-width:900px){.icircles{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.icircles{grid-template-columns:1fr;max-width:420px;margin-inline:auto}} /* -------------------------------------------------------------------------- 8. Point-connector / history (lahita : row.history-elements) -------------------------------------------------------------------------- */ .history{position:relative;margin-top:clamp(34px,4.5vw,60px)} .history::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px; transform:translateX(-50%);background:linear-gradient(180deg,var(--gold),var(--slate),var(--navy))} .h-item{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,68px); align-items:center;margin-bottom:clamp(40px,5vw,76px)} .h-item:last-child{margin-bottom:0} .h-item.rev .h-text{order:2} .h-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2; width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--gold); display:grid;place-items:center} .h-item:nth-child(2) .h-icon{border-color:var(--slate)} .h-item:nth-child(3) .h-icon{border-color:var(--navy)} .h-icon svg{width:19px;height:19px;color:var(--gold)} .h-item:nth-child(2) .h-icon svg{color:var(--slate)} .h-item:nth-child(3) .h-icon svg{color:var(--navy)} .h-text{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,2.6vw,34px);box-shadow:var(--shadow-sm)} .h-item.rev .h-text{text-align:right} .h-text .eyebrow{margin-bottom:12px} .h-text h3{font-size:clamp(19px,2vw,25px);margin-bottom:.6rem} .h-text p{margin:0;font-size:.94rem} .h-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-family:var(--disp); font-size:14px;font-weight:500;color:var(--gold)} .h-link svg{width:14px;height:14px;transition:transform .22s var(--ease)} .h-link:hover svg{transform:translateX(5px)} @media(max-width:820px){ .history::before{left:23px;transform:none} .h-item{grid-template-columns:1fr;gap:0;margin-bottom:34px;padding-left:66px} .h-item.rev .h-text{order:0;text-align:left} .h-icon{left:23px;top:26px;transform:translate(-50%,-50%)} } /* -------------------------------------------------------------------------- 9. Encart latéral sombre (lahita : #sidebar) -------------------------------------------------------------------------- */ .with-side{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,4vw,60px); align-items:start} .side{background:var(--navy);color:rgba(255,255,255,.78);border-radius:var(--radius); padding:clamp(24px,2.6vw,34px);font-size:.94rem;position:sticky;top:calc(var(--head-h) + 20px)} .side h2,.side h3,.side h4{color:#fff;font-weight:300;font-size:1.28rem;margin-bottom:.7rem} .side h4{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);margin-bottom:.9rem} .side p{color:rgba(255,255,255,.72);font-size:.93rem} .side ul{display:grid;gap:.05rem;margin-bottom:1.5rem} .side ul li{border-bottom:1px solid rgba(255,255,255,.1)} .side ul li:last-child{border-bottom:0} .side ul a{display:flex;justify-content:space-between;align-items:center;gap:.6rem; padding:.62rem 0;color:rgba(255,255,255,.82);font-size:.92rem;transition:color .2s,transform .2s} .side ul a::after{content:"→";color:var(--gold);opacity:0;transition:opacity .2s,transform .2s} .side ul a:hover{color:#fff;transform:translateX(3px)} .side ul a:hover::after{opacity:1} .side .btn{width:100%;margin-top:.4rem} .side .cx-mini{display:grid;gap:.9rem;font-size:.92rem} .side .cx-mini div{display:flex;gap:.6rem;align-items:flex-start} .side .cx-mini svg{width:15px;height:15px;color:var(--gold);flex:none;margin-top:.28rem} .side .cx-mini a{color:rgba(255,255,255,.82)} .side .cx-mini a:hover{color:var(--gold)} .side .hours{border-top:1px solid rgba(255,255,255,.12);margin-top:1.5rem;padding-top:1.2rem; font-size:.88rem;color:rgba(255,255,255,.6);line-height:1.8} @media(max-width:980px){.with-side{grid-template-columns:1fr}.side{position:static}} /* -------------------------------------------------------------------------- 10. Cartes images : ombre (lahita vc_box_shadow) + gris au survol -------------------------------------------------------------------------- */ .box-shadow-img{border-radius:var(--radius);overflow:hidden;background:#fff; box-shadow:var(--shadow-sm);line-height:0} .box-shadow-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s} .box-shadow-img video{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .box-shadow-img.contain img{object-fit:contain;padding:clamp(14px,2vw,26px)} a:hover>.box-shadow-img img,a .box-shadow-img:hover img{transform:scale(1.05)} a:hover>.gray-hover img,.gray-hover:hover img{filter:grayscale(1);transform:scale(1.06)} .gray-hover{transition:filter .5s;overflow:hidden} /* Blocs image + spécifications (lahita : image + visualplus_* specs) */ .spec-cards{display:grid;gap:clamp(20px,2.4vw,34px)} .spec-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%;transition:.3s} .spec-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .spec-card img{width:100%;aspect-ratio:500/330;object-fit:cover;object-position:center;line-height:0} .spec-card img.contain{object-fit:contain;padding:clamp(16px,2vw,28px);background:#fff} .spec-card-in{padding:clamp(18px,2vw,24px);flex:1;display:flex;flex-direction:column} .spec-card-in h3{font-size:1.12rem;margin-bottom:.5rem} .spec-card-in p{font-size:.91rem;margin-bottom:1rem} .spec-list{margin-top:auto;display:grid;gap:.42rem;border-top:1px solid var(--line-2);padding-top:1rem} .spec-list div{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem} .spec-list dt,.spec-list .k{font-family:var(--disp);font-weight:600;color:var(--gold);letter-spacing:.04em} .spec-list .v{color:var(--ink);text-align:right;font-weight:500} @media(max-width:900px){.spec-cards{grid-template-columns:1fr !important}} /* -------------------------------------------------------------------------- 11. Portfolio : grille + lightbox (lahita : ul.portfolio / prettyphoto) -------------------------------------------------------------------------- */ .pf-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem} .pf-filters button{font-family:var(--disp);font-size:.875rem;font-weight:500;letter-spacing:.02em; padding:9px 20px;border:1.5px solid var(--line);border-radius:999px;background:#fff; color:var(--grey);cursor:pointer;transition:.2s} .pf-filters button:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)} .pf-filters button.on{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:600} .pf{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)} .pf-item{position:relative;display:block;overflow:hidden;border-radius:6px;background:var(--soft); aspect-ratio:1/1;line-height:0;cursor:zoom-in} .pf-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s} .pf-item:hover img{transform:scale(1.08)} .pf-item.contain img{object-fit:contain;padding:12%;background:#fff} .pf-cap{position:absolute;inset:auto 0 0;padding:1.5rem 1.1rem .95rem; background:linear-gradient(180deg,transparent,rgba(0,17,54,.88)); color:#fff;font-family:var(--disp);font-size:.85rem;font-weight:500;line-height:1.35; opacity:0;transform:translateY(8px);transition:.3s var(--ease);text-align:left} .pf-item:hover .pf-cap{opacity:1;transform:translateY(0)} @media(max-width:1000px){.pf{grid-template-columns:repeat(3,1fr)}} @media(max-width:720px){.pf{grid-template-columns:repeat(2,1fr)}} /* Lightbox */ .lb{position:fixed;inset:0;z-index:200;background:rgba(0,10,26,.94);display:none; align-items:center;justify-content:center;padding:clamp(16px,4vw,54px)} .lb.on{display:flex} .lb-fig{max-width:1100px;width:100%} .lb-fig img{width:100%;max-height:78vh;object-fit:contain;background:#fff;border-radius:6px} .lb-cap{margin-top:1rem;color:rgba(255,255,255,.82);font-family:var(--disp);font-size:.95rem;text-align:center} .lb-btn{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12); color:#fff;display:grid;place-items:center;transition:background .2s;backdrop-filter:blur(4px)} .lb-btn:hover{background:var(--gold);color:var(--navy)} .lb-btn svg{width:22px;height:22px} .lb-prev{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)} .lb-next{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)} .lb-close{right:clamp(8px,2vw,26px);top:clamp(8px,2vw,26px)} /* -------------------------------------------------------------------------- 12. Flipbox (lahita : flip-ifb) -------------------------------------------------------------------------- */ .flipbox{perspective:1200px;min-height:290px;cursor:pointer} .flipbox-in{position:relative;width:100%;height:100%;min-height:290px;transition:transform .7s var(--ease); transform-style:preserve-3d} .flipbox.flipped .flipbox-in{transform:rotateY(180deg)} .flipbox-f,.flipbox-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden; border:1px solid var(--line);border-radius:var(--radius);background:var(--soft); padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;justify-content:center} .flipbox-b{transform:rotateY(180deg);background:#EDF1F7} .flipbox h3{font-size:1.35rem;font-weight:300;margin-bottom:.7rem} .flipbox p{font-size:.94rem;margin-bottom:0} .flipbox .flip-hint{margin-top:auto;padding-top:1.1rem;font-family:var(--disp);font-size:11.5px; font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex; align-items:center;gap:.5rem} .flipbox .flip-hint svg{width:14px;height:14px} /* -------------------------------------------------------------------------- 13. Composants LM conservés -------------------------------------------------------------------------- */ /* Deux colonnes */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center} .split.rev>*:first-child{order:2} @media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}.split.rev>*:first-child{order:0}} .figure{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#f1f5f9} .figure img{width:100%;height:100%;object-fit:cover} .figure .tag{position:absolute;left:20px;bottom:20px;background:#fff;color:var(--navy); padding:.95rem 1.25rem;border-radius:6px;box-shadow:var(--shadow);max-width:78%;border-left:3px solid var(--gold)} .figure .tag b{font-family:var(--disp);font-size:.98rem;font-weight:500;display:block;line-height:1.2;display:block} .figure .tag span{font-size:.78rem;font-weight:500;color:var(--grey)} /* Listes à coches */ .ticks{display:grid;gap:.1rem;margin:1.7rem 0 0;padding:0} .ticks li{display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--line)} .ticks li:last-child{border-bottom:0} .ticks li::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--gold);margin-top:.6rem} .ticks b{font-family:var(--disp);font-size:.97rem;font-weight:500;color:var(--navy);display:block;letter-spacing:-.01em} .ticks p{margin:0;color:var(--grey);font-size:.92rem;line-height:1.6} /* Lots / catégories (services) */ .lots{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .lot{background:#fff;padding:clamp(24px,2.6vw,34px);position:relative;display:flex; flex-direction:column;min-height:250px;transition:background .3s} .lot:hover{background:var(--soft)} .lot-n{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.18em;color:var(--gold)} .lot-ic{width:46px;height:46px;border-radius:8px;background:rgba(248,170,1,.14);color:var(--gold-dk); display:grid;place-items:center;margin:1.4rem 0 1.1rem;flex:none;transition:.25s var(--ease)} .lot:hover .lot-ic{background:var(--gold);color:var(--navy)} .lot-ic svg{width:23px;height:23px} .lot h3{margin-bottom:.5rem;color:var(--navy)} .lot p{color:var(--grey);font-size:.94rem;margin:0} .lot-go{margin-top:auto;padding-top:1.3rem;align-self:flex-start;font-family:var(--disp);font-size:14px; font-weight:500;color:var(--navy);display:inline-flex;align-items:center;gap:.6rem; border-bottom:1px solid var(--line);padding-bottom:5px;transition:color .22s,border-color .22s} .lot:hover .lot-go{color:var(--gold-dk);border-bottom-color:var(--gold)} .lot-go svg,.post-go svg{width:15px;height:15px;flex:none;transition:transform .22s var(--ease)} .lot:hover .lot-go svg,.post:hover .post-go svg{transform:translateX(5px)} @media(max-width:1000px){.lots{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.lots{grid-template-columns:1fr}} /* Chiffres */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .stats div{background:#fff;padding:clamp(24px,2.8vw,40px) clamp(16px,2vw,28px)} .stats b{display:block;font-family:var(--disp);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:300; color:var(--navy);letter-spacing:-.035em;line-height:1} .stats b i{font-style:normal;font-weight:700;color:var(--gold)} .stats span{display:block;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--grey);margin-top:.7rem;line-height:1.55} @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}} /* Étapes */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .steps>div{background:#fff;padding:clamp(22px,2.4vw,30px)} .steps b.num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px; padding-inline:.5rem;background:rgba(248,170,1,.14);color:var(--gold-dk);border-radius:6px; font-family:var(--disp);font-size:.75rem;font-weight:600;letter-spacing:.08em;margin-bottom:1.3rem} .steps h3{margin-bottom:.45rem;color:var(--navy)} .steps p{font-size:.92rem;color:var(--grey);margin:0} @media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.steps{grid-template-columns:1fr}} /* Cartes génériques */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px)} .grid.two{grid-template-columns:repeat(2,1fr)} .grid.four{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}.grid.four{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid,.grid.two,.grid.four{grid-template-columns:1fr}} .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;height:100%;transition:.3s} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .card img{width:100%;aspect-ratio:16/9.4;object-fit:cover;background:#f1f5f9;transition:transform .7s var(--ease)} .card:hover img{transform:scale(1.05)} .card-body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1} .card-body>span{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--gold)} .card-body h3{margin-top:.4rem;font-size:1.08rem;color:var(--navy)} .card-body p{margin:.35rem 0 0;font-size:.91rem;color:var(--grey)} .card .btn{margin-top:auto;align-self:flex-start;margin-top:1.2rem} .parc-card-image{width:100%;height:270px;display:flex;align-items:center;justify-content:center; overflow:hidden;background:#fff;flex:none} .parc-card-image img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:#fff} .parc-card-image img.cover{object-fit:cover} .parc-card-image img.zoom-equipment{width:115%;height:115%;max-width:none;max-height:none;object-fit:contain} .card:hover .parc-card-image img{transform:none} .card:hover .parc-card-image img.cover{transform:scale(1.05)} /* Puces (specs) */ .specs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem} .spec{font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.05em;color:var(--navy); background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem} .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem} a.chip{display:inline-block;font-family:var(--disp);font-size:.8rem;font-weight:500;color:var(--navy); background:#fff;border:1px solid var(--line);border-radius:999px;padding:.42rem .95rem;transition:.2s} a.chip:hover{border-color:var(--gold);color:var(--gold-dk);transform:translateY(-2px)} a.chip.on{background:var(--gold);border-color:var(--gold);color:var(--navy);font-weight:600} /* Secteurs */ .secteurs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .secteur-card{background:#fff;padding:clamp(22px,2.4vw,30px);text-align:center;transition:background .3s} .secteur-card:hover{background:var(--soft)} .secteur-card svg{width:28px;height:28px;color:var(--gold);margin:0 auto 14px;display:block} .secteur-card h3{margin:0;font-size:1rem;font-weight:500;line-height:1.4;color:var(--navy)} @media(max-width:991px){.secteurs-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.secteurs-grid{grid-template-columns:1fr}} /* Témoignages */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px)} .quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,2.4vw,32px);margin:0;display:flex;flex-direction:column} .quote p{font-size:1rem;line-height:1.72;color:var(--ink);margin-bottom:1.2rem} .quote footer{font-size:.85rem;color:var(--grey);margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)} .quote footer b{display:block;font-family:var(--disp);font-size:.95rem;font-weight:600;color:var(--navy)} @media(max-width:900px){.quotes{grid-template-columns:1fr}} /* Actualités */ .post{background:#fff;display:flex;flex-direction:column;height:100%;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden;transition:.3s} .post:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .post img{aspect-ratio:16/10;object-fit:cover;width:100%;background:#f1f5f9;transition:transform .7s var(--ease)} .post:hover img{transform:scale(1.05)} .post-in{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;flex:1} .post-meta{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--gold);margin-bottom:.7rem} .post-meta i{font-style:normal;font-weight:400;color:var(--grey);padding-left:.55rem; text-transform:none;letter-spacing:0} .post h3{margin-bottom:.45rem;font-size:1.08rem;color:var(--navy)} .post p{font-size:.92rem;color:var(--grey);margin-bottom:1.1rem} .post-go{margin-top:auto;align-self:flex-start;font-family:var(--disp);font-size:14px;font-weight:500; color:var(--navy);display:inline-flex;gap:.6rem;align-items:center;border-bottom:1px solid var(--line); padding-bottom:5px;transition:color .22s,border-color .22s} .post:hover .post-go{color:var(--gold-dk);border-bottom-color:var(--gold)} .filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem} /* Fiche engin */ .engin-top{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,3.5vw,52px);align-items:start} @media(max-width:900px){.engin-top{grid-template-columns:1fr}} .engin-media{position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);background:#fff;padding-top:72%;height:0;display:block} .engin-media img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block} .engin-media img.contain{object-fit:contain;padding:6%} .engin-body .lead{font-size:1.05rem;max-width:none} .tbp{font-size:.85rem;color:var(--grey);margin:.9rem 0 0} .fiche-wrap{max-width:900px;margin-top:1.5rem} .fiche{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line); border-radius:var(--radius);overflow:hidden} .fiche tr{border-bottom:1px solid var(--line)} .fiche tr:last-child{border-bottom:0} .fiche th,.fiche td{text-align:left;padding:13px 18px;font-size:.92rem;line-height:1.55;vertical-align:top} .fiche th{background:var(--soft);font-family:var(--disp);font-weight:500;color:var(--navy);width:36%} .fiche td{color:var(--ink)} .fiche tr.fiche-h th{background:var(--navy);color:#fff;font-family:var(--disp);font-size:11.5px; font-weight:600;letter-spacing:.18em;text-transform:uppercase;width:100%} .fiche .tbd{color:var(--grey);font-style:italic} .keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:1.6rem 0} .keyfacts div{background:#fff;padding:clamp(15px,1.8vw,21px) clamp(13px,1.4vw,19px)} .keyfacts b{display:block;font-family:var(--disp);font-size:clamp(1.3rem,2.1vw,1.65rem);font-weight:700; color:var(--navy);letter-spacing:-.02em;line-height:1.05;white-space:nowrap} .keyfacts b small{font-weight:400;font-size:.72em;color:var(--grey)} .keyfacts span{display:block;font-family:var(--disp);font-size:1.9px;font-size:10.5px;font-weight:600; letter-spacing:.15em;text-transform:uppercase;color:var(--grey);margin-top:.4rem;line-height:1.5} @media(max-width:760px){.keyfacts{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.keyfacts b{white-space:normal}.btn-row{flex-direction:column}.btn-row .btn{width:100%}} @media(max-width:560px){.fiche th{width:42%}} /* Logos partenaires en bandeau */ .logo-marquee{overflow:hidden;position:relative;background:#fff;border:1px solid var(--line); border-radius:var(--radius);padding-block:26px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;align-items:center;gap:0;width:max-content;animation:marquee 36s linear infinite} .logo-marquee:hover .marquee-track{animation-play-state:paused} .marquee-group{display:flex;align-items:center;gap:48px} .logo-item{width:170px;height:70px;flex:none;display:grid;place-items:center} .logo-item img{max-width:150px;height:60px;object-fit:contain;mix-blend-mode:multiply;transition:filter .35s} .logo-item:hover img{filter:grayscale(100%) opacity(60%)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}} /* Page « à propos » */ .intro-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,60px);align-items:start} .intro-grid h2{max-width:14ch} @media(max-width:880px){.intro-grid{grid-template-columns:1fr;gap:18px}} .why{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .why .item{background:#fff;padding:clamp(24px,2.6vw,34px)} .why .ico{display:block;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--gold);margin-bottom:1rem} .why h3{margin-bottom:.5rem;color:var(--navy)} .why p{margin:0;font-size:.94rem} @media(max-width:900px){.why{grid-template-columns:1fr}} .id-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,60px);align-items:start} .id-head h3{max-width:16ch} .id-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .id-item{background:#fff;padding:clamp(16px,1.8vw,22px)} .id-item span{display:block;font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--gold);margin-bottom:.4rem} .id-item b{font-family:var(--disp);font-size:.98rem;font-weight:500;color:var(--navy);line-height:1.5} @media(max-width:900px){.id-grid{grid-template-columns:1fr;gap:22px}} @media(max-width:640px){.id-list{grid-template-columns:1fr}} .moyens{background:var(--deep);color:#fff;position:relative;overflow:hidden} .moyens::before{content:"";position:absolute;inset:0; background:radial-gradient(60% 85% at 88% 8%,rgba(248,170,1,.12),transparent 62%)} .moyens .wrap{position:relative;z-index:2} .moyens-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center} .moyens h2,.moyens h3{color:#fff} .moyens .lead{color:rgba(255,255,255,.75)} .moyens-img{position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)} .moyens-img img{width:100%;height:100%;object-fit:cover} .figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16);border-radius:var(--radius);overflow:hidden; margin-top:clamp(30px,4vw,46px)} .figs .fig{background:rgba(7,11,20,.6);padding:clamp(18px,2.2vw,26px)} .figs .n{display:block;font-family:var(--disp);font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:300; color:#fff;letter-spacing:-.03em;line-height:1} .figs .n b{font-weight:700;color:var(--gold-lt)} .figs .l{display:block;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:.6rem;line-height:1.5} @media(max-width:900px){.moyens-grid{grid-template-columns:1fr}.figs{grid-template-columns:repeat(2,1fr)}} /* Déléations */ .delegations{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .delegation{background:#fff;padding:clamp(22px,2.4vw,32px);transition:background .3s;scroll-margin-top:calc(var(--head-h) + 24px)} .delegation:hover{background:var(--soft)} .delegation .d-city{font-family:var(--disp);font-size:1.35rem;font-weight:300;color:var(--navy);margin-bottom:.2rem} .delegation .d-role{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--gold);margin-bottom:1rem} .delegation p{font-size:.92rem;margin-bottom:1.1rem} .delegation .d-meta{display:grid;gap:.45rem;font-size:.88rem;color:var(--grey); border-top:1px solid var(--line-2);padding-top:1rem} .delegation .d-meta div{display:flex;gap:.55rem;align-items:flex-start} .delegation .d-meta svg{width:14px;height:14px;color:var(--gold);flex:none;margin-top:.28rem} .delegation.hq{background:var(--navy)} .delegation.hq .d-city{color:#fff} .delegation.hq p,.delegation.hq .d-meta{color:rgba(255,255,255,.72)} .delegation.hq .d-role{color:var(--gold-lt)} .delegation.hq .d-meta{border-top-color:rgba(255,255,255,.14)} .delegation.hq .d-meta svg{color:var(--gold-lt)} @media(max-width:900px){.delegations{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.delegations{grid-template-columns:1fr}} /* Téléchargements */ .dl-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--radius);overflow:hidden} .dl{display:flex;align-items:center;gap:clamp(14px,2vw,24px);background:#fff;padding:clamp(16px,1.8vw,22px); transition:background .25s} .dl:hover{background:var(--soft)} .dl-ic{width:44px;height:44px;flex:none;border-radius:8px;background:rgba(248,170,1,.14); color:var(--gold-dk);display:grid;place-items:center} .dl-ic svg{width:20px;height:20px} .dl-t{flex:1;min-width:0} .dl-t b{display:block;font-family:var(--disp);font-size:1rem;font-weight:500;color:var(--navy);line-height:1.3} .dl-t span{display:block;font-size:.86rem;color:var(--grey);margin-top:.1rem} .dl .dl-go{font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--gold);flex:none;display:flex;align-items:center;gap:.4rem} .dl .dl-go svg{width:14px;height:14px;transition:transform .22s var(--ease)} .dl:hover .dl-go svg{transform:translateX(4px)} /* Espace client */ .area-priv{border:3px solid var(--gold);border-radius:12px;background:#fff; padding:clamp(22px,3vw,38px);box-shadow:var(--shadow-sm)} .area-priv .apr-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center; justify-content:space-between;padding-bottom:1.2rem;margin-bottom:1.5rem;border-bottom:1px solid var(--line)} .area-priv .apr-head h3{font-size:1.3rem} .tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)} .tabs button{font-family:var(--disp);font-size:.9rem;font-weight:500;padding:.7rem 1.1rem; color:var(--grey);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s} .tabs button:hover{color:var(--navy)} .tabs button.on{color:var(--navy);border-bottom-color:var(--gold);font-weight:600} .tab-panel{display:none} .tab-panel.on{display:block;animation:fade .35s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* -------------------------------------------------------------------------- 14. Formulaires -------------------------------------------------------------------------- */ .form{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} .field{display:flex;flex-direction:column;gap:.42rem} .field.full{grid-column:1/-1} .field label{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--navy)} .field label b{color:var(--gold);font-weight:600} .field input,.field select,.field textarea{ font-family:var(--body);font-size:.97rem;color:var(--ink);padding:13px 0; border:0;border-bottom:1.5px solid var(--line);background:transparent; transition:border-color .2s;width:100%;border-radius:0} .field input::placeholder,.field textarea::placeholder{color:#94A3B8} .field textarea{min-height:140px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)} .field .err{font-size:.8rem;color:#DC2626;display:none} .field.bad input,.field.bad select,.field.bad textarea{border-bottom-color:#DC2626} .field.bad .err{display:block} .form-note{grid-column:1/-1;font-size:.875rem;color:var(--grey);display:flex;gap:.65rem; align-items:flex-start;background:var(--soft);border:1px solid var(--line); border-radius:var(--radius);padding:.9rem 1rem} .form-note svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:.22rem} .radio-row{display:flex;gap:1.4rem;flex-wrap:wrap} .radio-row label{display:flex;gap:.45rem;align-items:center;font-size:.95rem;font-weight:500; color:var(--ink);cursor:pointer} .radio-row input{width:auto;accent-color:var(--gold)} .check-row{display:grid;gap:.7rem} .check-row label{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem; color:var(--grey);line-height:1.6;cursor:pointer} .check-row input{width:auto;flex:none;margin-top:.28rem;accent-color:var(--gold)} @media(max-width:720px){.form{grid-template-columns:1fr}} .form-ok{display:none;background:var(--soft);border:1px solid var(--line); border-left:3px solid var(--gold);border-radius:var(--radius);padding:clamp(22px,2.6vw,30px)} .form-ok.on{display:block} .form-ok h3{margin-bottom:.5rem;color:var(--navy)} .form-ok p{margin:0} .aside-card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,2.6vw,30px)} .aside-card h3{font-size:1.2rem;margin-bottom:.7rem;color:var(--navy)} .aside-card .btn{width:100%;margin-top:.6rem} /* -------------------------------------------------------------------------- 15. Contact -------------------------------------------------------------------------- */ .cx{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.4vw,20px)} .cx a,.cx div{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(20px,2.2vw,28px);display:block;transition:.3s} .cx a:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-4px)} .cx-ic{width:44px;height:44px;border-radius:8px;background:rgba(248,170,1,.14);color:var(--gold-dk); display:grid;place-items:center;margin-bottom:1.2rem;transition:.25s var(--ease)} .cx a:hover .cx-ic{background:var(--gold);color:var(--navy)} .cx-ic svg{width:20px;height:20px} .cx-k{display:block;font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--gold);margin-bottom:.3rem} .cx-v{display:block;font-family:var(--disp);font-size:1rem;color:var(--navy);word-break:break-word;line-height:1.5} @media(max-width:860px){.cx{grid-template-columns:1fr}} .map{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;line-height:0;background:var(--soft)} .map iframe{width:100%;height:clamp(320px,42vw,470px);border:0;filter:grayscale(.35)} /* -------------------------------------------------------------------------- 16. Bandeau d'appel à l'action -------------------------------------------------------------------------- */ .cta{position:relative;background:var(--deep);color:#fff;text-align:center;overflow:hidden} .cta::before{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(0,17,54,.97),rgba(0,17,54,.76))} .cta .wrap{position:relative;z-index:2} .cta h2{color:#fff;max-width:24ch;margin-inline:auto} .cta h2 b{color:#fff} .cta .lead{color:rgba(255,255,255,.82);max-width:58ch;margin:1.1rem auto 2rem} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} @media(max-width:600px){.cta-actions{flex-direction:column;width:100%;gap:12px} .cta-actions .btn{width:100%;justify-content:center}} /* -------------------------------------------------------------------------- 17. Pied de page (lahita : carte + contact + 3 colonnes + barre légale) -------------------------------------------------------------------------- */ .foot{background:var(--deep);color:rgba(255,255,255,.66);font-size:15px} .foot-map{position:relative;background:var(--deep-2,#040814);line-height:0; border-bottom:1px solid rgba(255,255,255,.1)} .foot-map iframe{width:100%;height:clamp(210px,26vw,300px);border:0;display:block; filter:grayscale(1) contrast(1.05) brightness(.82)} .foot-map-mask{position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(7,11,20,.55),rgba(7,11,20,.2) 50%,rgba(7,11,20,.72))} .foot-map-pin{position:absolute;left:clamp(20px,5vw,52px);top:clamp(20px,4vw,40px); line-height:1.5;max-width:330px} .foot-map-pin b{display:block;font-family:var(--disp);font-size:1.15rem;font-weight:500;color:#fff;margin-bottom:.2rem} .foot-map-pin span{font-size:.88rem;color:rgba(255,255,255,.72);display:block} .foot-map-pin a{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem; font-family:var(--disp);font-size:12.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--gold)} .foot-map-pin a svg{width:14px;height:14px} .foot-main{padding-block:clamp(46px,5.5vw,76px) clamp(28px,3.5vw,44px)} .foot-grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,44px)} .foot img{height:44px;width:auto;margin-bottom:1.2rem} .foot p{color:rgba(255,255,255,.62);font-size:.93rem} .foot h4{font-family:var(--disp);font-size:11.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:#fff;margin:0 0 1rem} .foot ul{display:grid;gap:.55rem} .foot ul a{color:rgba(255,255,255,.62);font-size:.93rem;transition:color .2s; display:inline-flex;align-items:center;gap:.45rem} .foot ul a::before{content:"";width:0;height:1px;background:var(--gold);transition:width .22s var(--ease)} .foot ul a:hover{color:var(--gold)} .foot ul a:hover::before{width:10px} .foot-c{display:grid;gap:.7rem;font-size:.92rem;color:rgba(255,255,255,.66)} .foot-c div{display:flex;gap:.65rem;align-items:flex-start} .foot-c svg{width:15px;height:15px;color:var(--gold-lt);flex:none;margin-top:.24rem} .foot-c a{color:rgba(255,255,255,.66);transition:color .2s} .foot-c a:hover{color:var(--gold-lt)} .foot-bar{border-top:1px solid rgba(255,255,255,.12);padding-block:1.3rem; display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; gap:.7rem 1.5rem;font-size:.83rem;color:rgba(255,255,255,.5)} .foot-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-size:.8rem;color:rgba(255,255,255,.5)} .foot-legal a{color:rgba(255,255,255,.62);transition:color .2s} .foot-legal a:hover{color:var(--gold-lt)} @media(max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.foot-grid{grid-template-columns:1fr}} /* WhatsApp flottant */ .wa{position:fixed;right:22px;bottom:22px;z-index:80;width:56px;height:56px;background:#25D366; display:grid;place-items:center;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.24); transition:transform .22s var(--ease)} .wa:hover{transform:scale(1.09)} .wa svg{width:29px;height:29px;fill:#fff} @media(max-width:520px){.wa{width:50px;height:50px;right:14px;bottom:14px}.wa svg{width:26px;height:26px}} /* Retour en haut */ .totop{position:fixed;right:22px;bottom:88px;z-index:80;width:44px;height:44px; background:var(--navy);color:#fff;border-radius:50%;display:grid;place-items:center; opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease)} .totop.on{opacity:1;visibility:visible;transform:none} .totop:hover{background:var(--gold);color:var(--navy)} .totop svg{width:18px;height:18px} /* -------------------------------------------------------------------------- 18. Animations -------------------------------------------------------------------------- */ .rv{opacity:0;transform:translateY(28px); transition:opacity .8s var(--ease),transform .8s var(--ease)} .rv.in{opacity:1;transform:none} .rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s} .rv.left{transform:translateX(-28px)} .rv.right{transform:translateX(28px)} .rv.left.in,.rv.right.in{transform:none} .rv.scale{transform:scale(.96)} .rv.scale.in{transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} .rv{opacity:1;transform:none} .centerline-track::before,.history::before{transition:none} } :focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:2px} /* -------------------------------------------------------------------------- 19. Adaptations -------------------------------------------------------------------------- */ @media(max-width:1024px){ :root{--head-h:84px} .headline{background-attachment:scroll} /* La parallaxe (attachment:fixed) est instable sur mobile : image qui suit le scroll */ .hero-media .slide{background-attachment:scroll} } @media(max-width:600px){ h1{font-size:clamp(31px,10vw,44px)} h2{font-size:clamp(25px,7.5vw,32px)} .area{padding-block:clamp(52px,14vw,80px)} .eyebrow{font-size:11px;letter-spacing:.22em} .lead{font-size:16px} .t-list li{font-size:.95rem} .figure .tag{max-width:88%} .field input,.field select,.field textarea{font-size:16px} .logo-item{width:120px;height:54px} .logo-item img{max-width:108px;height:44px} .marquee-track{gap:0} .marquee-group{gap:26px} .marquee-track{animation-duration:22s} .keyfacts b{font-size:1.15rem} .keyfacts span{font-size:9.5px;letter-spacing:.12em} } @media(max-width:480px){ .mnav{padding-top:calc(74px + 14px)} .headline{padding-top:calc(74px + 30px)} .headline-title{font-size:clamp(27px,8.5vw,36px)} .btn{padding:14px 24px} .cx a,.cx div{padding:clamp(17px,5vw,21px)} .wa{bottom:calc(14px + env(safe-area-inset-bottom,0px))} .totop{bottom:76px;right:16px} .sep-title::before,.sep-title::after{max-width:60px} .dl{flex-wrap:wrap} .dl .dl-go{width:100%;padding-left:calc(44px + 14px)} } /* ========================================================================== 16. Classes complémentaires Blocs utilisés par les pages « À propos », « Références », « Espace client », les pages légales et les fiches engin héritées. ========================================================================== */ /* Sections neutres (sections du contenu hérité) */ .section{position:relative;padding-block:var(--section)} .section.tint{background:var(--soft)} /* Variante d'une zone sans padding (séquencement éditorial) */ .area.nopad{padding-block:0} /* Hero « À propos » : dégradé navy posé sur une image plein cadre */ .about-hero{position:relative;overflow:hidden;background-size:cover;background-position:center} .about-hero .wrap{position:relative;z-index:1} /* Bloc argumentaire répété (4 colonnes « raisons de nous choisir ») */ .why-item{background:#fff;padding:clamp(24px,2.6vw,34px);border:1px solid var(--line);border-radius:var(--radius);height:100%;position:relative;transition:.3s} .why-item:hover{border-color:var(--gold);box-shadow:var(--shadow-sm);transform:translateY(-3px)} .why-item h3{font-size:clamp(19px,1.6vw,22px);margin:.55rem 0 .8rem;color:var(--navy);font-weight:500} .why-item p{font-size:.95rem;color:var(--grey)} .why-item .h-link{margin-top:1.2rem} /* Étapes numérotées (engins sans opérateur, commande en 4 temps) */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .step{background:#fff;padding:clamp(24px,2.6vw,34px);position:relative} .step .n{display:block;font-family:var(--disp);font-size:.86rem;font-weight:600;letter-spacing:.18em;color:var(--gold);margin-bottom:1.1rem} .step h3{font-size:1.14rem;color:var(--navy);font-weight:500;margin-bottom:.6rem} .step p{font-size:.93rem;color:var(--grey)} /* Logos clients */ .logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .logo{background:#fff;padding:clamp(20px,2.4vw,32px);display:flex;align-items:center;justify-content:center;min-height:112px;transition:.3s} .logo:hover{background:var(--soft-2)} .logo img{max-width:100%;max-height:46px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.62;transition:.35s} .logo:hover img{filter:grayscale(0);opacity:1} /* Texte long (pages légales) */ .prose{max-width:76ch} .prose h2{font-family:var(--disp);font-size:clamp(21px,2vw,27px);font-weight:500;color:var(--navy);margin:clamp(30px,3.4vw,44px) 0 .9rem;padding-top:.2rem} .prose h2:first-child{margin-top:0} .prose p{color:var(--ink);margin-bottom:1.05rem;line-height:1.78} .prose ul{display:grid;gap:.6rem;margin:0 0 1.4rem;padding-left:1.15rem} .prose li{color:var(--ink);line-height:1.72} .prose li::marker{color:var(--gold)} .prose a{color:var(--navy);font-weight:500;border-bottom:1px solid var(--gold)} .prose a:hover{color:var(--gold-dk);border-bottom-color:currentColor} .prose b{color:var(--navy);font-weight:600} .legal-note{margin-top:clamp(30px,3.4vw,44px);padding-top:1.1rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--grey-lt)} /* Formulaire sombre (encart « Espace client ») */ .form-dark{display:grid;gap:.95rem;margin:1.4rem 0 0} .fld{display:grid;gap:.4rem} .fld > span{font-size:.74rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62)} /* 16px minimum : en dessous, iOS Safari zoome automatiquement le viewport au focus du champ, ce qui laisse la page décalée après le clavier. */ .fld input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:.72rem .9rem;color:#fff;font:inherit;font-size:16px;transition:.2s} .fld input::placeholder{color:rgba(255,255,255,.34)} .fld input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.12)} .form-dark .btn{justify-self:start;margin-top:.4rem} /* Chiffres clés des figures (moyens) */ .figs .fig{padding:clamp(18px,2.1vw,26px);background:var(--deep);text-align:center} .figs .fig .n{display:block;font-family:var(--disp);font-size:clamp(28px,3vw,40px);font-weight:300;color:#fff;line-height:1.1} .figs .fig .n b{font-weight:600;color:var(--gold)} .figs .fig .l{display:block;margin-top:.4rem;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.58)} /* Retard d'animation supplémentaire */ .rv.d0{transition-delay:0s} .rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s} /* Adaptation tablette / mobile des blocs ajoutés */ @media (max-width:980px){ .steps{grid-template-columns:repeat(2,1fr)} .logos{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .steps{grid-template-columns:1fr} .logos{grid-template-columns:repeat(2,1fr)} .logo{min-height:92px} .logo img{max-height:36px} } /* ========================================================================== Mobile / tactile - debordement horizontal (adresses e-mail longues, URLs, noms de fichiers) - cibles tactiles >= 44x44 px (WCAG 2.5.5 / Apple HIG) - :hover uniquement sur pointeur fin (evite le survol colle apres un tap) ========================================================================== */ /* Plus aucune scroll horizontale : un mot trop long (e-mail de 27 caracteres, URL, nom de fichier) doit se couper, pas etendre la page. */ html,body{overflow-x:hidden} body,h1,h2,h3,h4,p,li,td,th,dd,dt,figcaption,blockquote, a,span,strong,em,small,label,legend,address{ overflow-wrap:break-word;word-break:break-word} /* Cibles tactiles : 44 px minimum. Le controle est tactile quand il n'existe pas de media (hover:hover) fin, i.e. sur mobile/tablette. */ @media (hover:none),(pointer:coarse){ .btn,.btn-sm,.btn-xl{min-height:44px} .btn-sm{padding:12px 24px} .foot-grid a,.foot-col a{min-height:44px;display:inline-flex;align-items:center} .nav a,.mnav a{min-height:44px;display:flex;align-items:center} .icircles a,.lots a,.steps a,.why a,.id-list a,.delegations a, .moyens-grid a,.secteurs-grid a,.pf a{min-height:44px} /* Le numero de telephone n'existe plus qu'a l'etat d'icone sur petit ecran : on lui donne une vraie surface cliquable. */ .head-tel{min-width:44px;min-height:44px;justify-content:center;padding:0 6px} /* Champs de formulaire : hauteur confortable au doigt */ .fld input,.field input,.field select,.field textarea{min-height:48px} /* Bouton de retour en haut de page */ .totop{width:48px;height:48px} } /* Neutralise les transitions/transforms au tap : sur tactile, un :hover "colle" apres le appui et deplace visuellement la carte. */ @media (hover:none),(pointer:coarse){ .btn:hover,.btn.btn-xl:hover{transform:none} .card:hover img,.figure:hover img{transform:none} .logo:hover img,.logo-item:hover img{filter:grayscale(1);opacity:.62} .logo-item:hover img{filter:grayscale(1)} } /* Sur pointeur fin uniquement, on retablit l'effet de survol complet. */ @media (hover:hover) and (pointer:fine){ .logo-item:hover img{filter:grayscale(0);opacity:1} } /* Impression */ @media print{ .head,.mnav,.wa,.totop,.foot-map,.lb{display:none!important} .area,.headline,.section{padding-block:20px} .section.tint{background:#fff} .headline{background:#fff;color:#000} .headline-title{color:#000} .why-item,.step,.logo{border:1px solid #ccc;box-shadow:none;transform:none} .prose a{border:0} } /* Consistent photo frames; homepage hero and company/client logos keep their existing rules. */ .spec-card > .gray-hover { display:block;position:relative;aspect-ratio:4/3;flex:none; } .spec-card img, .gray-hover > img { display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover!important;object-position:center 60%;padding:0!important; } .spec-card > .gray-hover > img { position:absolute;inset:0;height:100%;aspect-ratio:auto; } .spec-card > .tbp { margin:12px 0 0;min-height:calc(3.44em + 12px);line-height:1.72; } .parc-card-image { position:relative;height:auto;aspect-ratio:4/3; } .parc-card-image img, .parc-card-image img.cover, .parc-card-image img.zoom-equipment { position:absolute;inset:0;width:100%;height:100%;max-width:100%;max-height:100%; aspect-ratio:auto;object-fit:cover;object-position:center 60%;padding:0; } .pf-item {aspect-ratio:4/3} .pf-item img, .pf-item.contain img { object-fit:cover!important;object-position:center 60%;padding:0; } .box-shadow-img, .figure, .moyens-img { position:relative;aspect-ratio:4/3; } .box-shadow-img img, .box-shadow-img.contain img, .box-shadow-img video, .figure img, .moyens-img img { position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center 60%;padding:0; } /* Portrait subjects remain centred on the machine within cropped thumbnails. */ .spec-card img[src$="projet-1.jpg"], .parc-card-image img[src$="projet-1.jpg"], .pf-item img[src$="projet-1.jpg"] {object-position:center 72%} .spec-card img[src$="projet-3.jpg"], .parc-card-image img[src$="projet-3.jpg"], .pf-item img[src$="projet-3.jpg"] {object-position:center 68%} /* Detail pages and lightboxes show the complete photograph without oversized padding. */ .engin-media {height:auto;padding-top:0;aspect-ratio:4/3} .engin-media img, .engin-media img.contain {object-fit:contain;padding:0} .engin-media .photo-pending {position:absolute;inset:0;min-height:0!important} @media(max-width:600px) { .spec-card > .tbp {min-height:0} } /* Matching card rows keep their photographs, captions and headings aligned. */ .row:has(> [class^="col-"] > .spec-card) {align-items:stretch} .row > [class^="col-"]:has(> .spec-card) {display:flex} .row > [class^="col-"] > .spec-card {width:100%} .spec-card-in h3 {min-height:2.6em} .spec-list .k {flex:none;white-space:nowrap} @media(max-width:600px) {.spec-card-in h3{min-height:0}} .pf-item .photo-pending,.spec-card .photo-pending,.parc-card-image .photo-pending{min-height:0!important} /* Place this page title below the existing fixed navigation bar. */ body[data-page="plateformes-aereennes"] > section.area:first-of-type, body[data-page="machines-sans-operateur"] > section.area:first-of-type, body[data-page="grues"] > section.area:first-of-type, body[data-page="chariots-monte-materiaux"] > section.area:first-of-type { padding-top:calc(var(--head-h) + clamp(44px,5vw,72px)); } /* Phone layouts: content spacing, readable specifications and touch targets. */ @media(max-width:600px) { :root{--section:44px} .area{padding-block:44px} .area.tight{padding-block:32px} .area.nopad{padding-block:0} body[data-page="plateformes-aereennes"] > section.area:first-of-type, body[data-page="machines-sans-operateur"] > section.area:first-of-type, body[data-page="grues"] > section.area:first-of-type, body[data-page="chariots-monte-materiaux"] > section.area:first-of-type { padding-top:calc(var(--head-h) + 32px); } body > .area > .tbp{padding-inline:var(--pad);text-align:left} h1,h2,h3{word-break:normal;overflow-wrap:break-word} .row{gap:24px} .row > [class^="col-"],.split > *, .engin-top > *{min-width:0} .lead{line-height:1.65} .spec-card-in,.card-body{padding:20px} .spec-list div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:12px;align-items:start} .spec-list .k{white-space:normal} .spec-list .v{min-width:0;overflow-wrap:anywhere} .fiche{width:100%;table-layout:fixed} .fiche th,.fiche td{padding:12px 10px;overflow-wrap:anywhere} .figs{grid-template-columns:repeat(2,minmax(0,1fr))} .btn,.btn-sm,.filters button,.pf-filters button{min-height:44px} .btn-row{gap:12px} .mnav a{min-height:48px} .field input,.field select,.field textarea,.fld input{min-height:48px;font-size:16px} .pf{gap:12px} .pf-cap{opacity:1;transform:none;font-size:12px;padding:8px;background:rgba(0,17,54,.82);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .foot a[href^="mailto:"],.tbp a{overflow-wrap:anywhere} .rv,.rv.in,.rv.left,.rv.right{opacity:1;transform:none;transition:none} section[id]{scroll-margin-top:100px} } @media(max-width:480px) { body[data-page="plateformes-aereennes"] > section.area:first-of-type, body[data-page="machines-sans-operateur"] > section.area:first-of-type, body[data-page="grues"] > section.area:first-of-type, body[data-page="chariots-monte-materiaux"] > section.area:first-of-type { padding-top:106px; } } /* Machinery-focused thumbnails: crop excess surroundings, preserve card dimensions. */ :is(.spec-card,.parc-card-image,.pf-item,.card) img{transform-origin:center;} :is(.spec-card,.parc-card-image,.pf-item,.card) img[src*='catalogue-company-']{object-fit:contain!important;object-position:center!important;background:#f5f7fa;transform:scale(1.15);} :is(.spec-card,.parc-card-image,.pf-item,.card) img[src$='catalogue-company-02.jpg']{transform:scale(1.65) translateX(13%);} :is(.spec-card,.parc-card-image,.pf-item,.card) img[src$='catalogue-company-27.jpg']{transform:scale(2) translateY(14%);} :is(.spec-card,.parc-card-image,.pf-item,.card) img[src$='catalogue-company-53.jpg']{transform:scale(1.35);} :is(.spec-card,.parc-card-image,.pf-item,.card) img[src$='catalogue-company-64.jpg']{transform:scale(1.4) translateY(-5%);} :is(.spec-card,.parc-card-image,.pf-item,.card) img[src$='catalogue-company-18.jpg'], :is(.spec-card,.parc-card-image,.pf-item,.card) img[src$='catalogue-company-44.jpg']{transform:scale(1.05);} .spec-card>.gray-hover,.parc-card-image,.pf-item{overflow:hidden;} :is(.spec-card,.parc-card-image,.pf-item,.card) img[src$='about.jpg']{object-fit:cover!important;object-position:center 100%!important;transform:scale(1.1);transform-origin:center bottom;} /* About page: readable dark sections and balanced responsive content. */ body[data-page="a-propos"] #main .area{padding-block:clamp(44px,6vw,80px)} body[data-page="a-propos"] .about-hero{background:#071b3d!important} body[data-page="a-propos"] :is(.about-hero,.moyens,.cta) :is(h2,h3,p, .lead) b{color:inherit} body[data-page="a-propos"] .about-hero .lead{max-width:32ch!important;font-size:clamp(20px,2.3vw,28px)!important;line-height:1.5!important} body[data-page="a-propos"] .about-hero h2{font-size:clamp(28px,3.3vw,44px)!important} body[data-page="a-propos"] .about-hero h3{font-size:clamp(21px,2vw,27px);line-height:1.3} body[data-page="a-propos"] .about-hero .box-shadow-img{aspect-ratio:4/3;background:#10294c} body[data-page="a-propos"] .about-hero img[src*="about"]{object-position:center bottom} body[data-page="a-propos"] .about-hero img[src*="projet-3"]{object-fit:contain} body[data-page="a-propos"] .sep-title{margin-block:36px 0} body[data-page="a-propos"] .area.tight .row{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch} body[data-page="a-propos"] .why-item{grid-column:auto;height:auto;padding:24px;min-width:0} body[data-page="a-propos"] .why-item .eyebrow{letter-spacing:.1em;min-height:2.8em} body[data-page="a-propos"] .why-item h3{min-height:2.6em;margin-top:8px} body[data-page="a-propos"] .intro-grid{gap:36px;margin-bottom:36px!important} body[data-page="a-propos"] .id-head h3{max-width:24ch} body[data-page="a-propos"] .moyens .figs{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px} body[data-page="a-propos"] .figs .fig{padding:20px} body[data-page="a-propos"] .figs .l{letter-spacing:.06em;overflow-wrap:normal} body[data-page="a-propos"] .history{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px} body[data-page="a-propos"] .history::before{display:none} body[data-page="a-propos"] .h-item{display:block;margin:0;min-width:0} body[data-page="a-propos"] .h-icon{position:static;transform:none;margin:0 0 16px} body[data-page="a-propos"] .h-text{height:calc(100% - 62px);padding:24px;text-align:left!important} body[data-page="a-propos"] .h-text .eyebrow{letter-spacing:.1em} body[data-page="a-propos"] .h-link{color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:3px} body[data-page="a-propos"] .lot{padding:26px} @media(max-width:1000px){ body[data-page="a-propos"] .area.tight .row{grid-template-columns:repeat(2,minmax(0,1fr))} body[data-page="a-propos"] .why-item :is(h3,.eyebrow){min-height:0} } @media(max-width:700px){ body[data-page="a-propos"] .about-hero .row{grid-template-columns:1fr;gap:24px;margin-bottom:32px!important} body[data-page="a-propos"] .about-hero .row:last-child{margin-bottom:0!important} body[data-page="a-propos"] .about-hero .row > div{grid-column:1/-1} body[data-page="a-propos"] .history{grid-template-columns:1fr;gap:24px} body[data-page="a-propos"] .h-text{height:auto} body[data-page="a-propos"] .sec-head{grid-template-columns:1fr;gap:16px} body[data-page="a-propos"] .lots{grid-template-columns:1fr} body[data-page="a-propos"] .id-list{grid-template-columns:1fr} body[data-page="a-propos"] .area.tight .row{grid-template-columns:1fr} body[data-page="a-propos"] .cta .btn{width:100%;justify-content:center} } /* Phone readability and touch spacing; desktop header and hero remain unchanged. */ @media(max-width:650px){ main p,.area p{line-height:1.7} .headline .crumbs{font-size:10px;letter-spacing:.12em;line-height:1.8} .sec-head{gap:16px} .btn-row{display:flex;flex-wrap:wrap;gap:12px} .cta .btn-row .btn{width:100%;justify-content:center} .field label{letter-spacing:.08em;font-size:12px} .field input,.field select,.field textarea{padding:12px 4px} .field select{max-width:100%;text-overflow:ellipsis} .id-item b,.figs .l{line-height:1.6} .foot p,.foot li{line-height:1.7} .foot a{padding-block:6px;display:inline-block} .tbp h1{font-size:clamp(24px,7vw,32px);line-height:1.35} } /* Delegation cards: full-width compact cards on phones. */ body[data-page="delegations"] .delegation-cards{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){body[data-page="delegations"] .delegation-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){ body[data-page="delegations"] .delegation-cards{grid-template-columns:1fr;gap:14px;background:transparent;border:0;overflow:visible} body[data-page="delegations"] .delegation-cards .lot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px 12px;padding:20px;border:1px solid var(--line);border-radius:8px;min-height:0} body[data-page="delegations"] .delegation-cards .lot-n{align-self:center;letter-spacing:.05em} body[data-page="delegations"] .delegation-cards h3{margin:0!important;font-size:21px;line-height:1.4} body[data-page="delegations"] .delegation-cards p{grid-column:1/-1;font-size:15px;line-height:1.6;margin:0} body[data-page="delegations"] .delegation-cards .h-link{grid-column:1/-1;margin:0;min-height:44px;justify-self:start;color:var(--navy);font-size:15px} body[data-page="delegations"] article[id]{scroll-margin-top:90px} body[data-page="delegations"] .history{margin-top:24px} body[data-page="delegations"] .h-text{padding:20px} } /* Consistent studio thumbnails without cropping machinery. */ body[data-page] .catalogue-grid .spec-card img.equipment-cutout{object-fit:contain!important;object-position:center!important;transform:none!important;background:#fff;padding:8px!important} .realisations-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.realisations-gallery figure{margin:0;min-width:0}.realisations-gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}@media(max-width:1000px){.realisations-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.realisations-gallery{grid-template-columns:1fr;gap:20px}} /* Equal logo slots and two identical, fully loaded loop segments. */ .logo-marquee .marquee-track{display:flex;gap:0;width:max-content;animation:marquee 36s linear infinite;will-change:transform} .logo-marquee .marquee-group{flex:0 0 auto;gap:48px;padding-right:48px} .logo-marquee .logo-item{display:flex;align-items:center;justify-content:center;width:170px;height:80px;flex:0 0 170px} .logo-marquee .logo-item img{display:block;width:150px;height:64px;max-width:150px;max-height:64px;object-fit:contain;object-position:center} .logo-marquee:hover .marquee-track{animation-play-state:running} @media(max-width:650px){.logo-marquee .marquee-group{gap:26px;padding-right:26px}.logo-marquee .logo-item{width:120px;height:64px;flex-basis:120px}.logo-marquee .logo-item img{width:108px;height:48px;max-width:108px;max-height:48px}.logo-marquee .marquee-track{animation-duration:28s}} @media(prefers-reduced-motion:reduce){.logo-marquee .marquee-track{animation:none}} /* Phone comfort: touch targets, safe areas and immediate content. */ @media(max-width:650px){ .rv{opacity:1!important;transform:none!important;transition:none!important} .btn,.icard .btn,.foot a{min-height:44px;align-items:center} .field input:not([type="radio"]):not([type="checkbox"]),.field select{min-height:48px;font-size:16px} .field textarea{font-size:16px;min-height:120px} .field:focus-within label{color:var(--navy)} .mnav{height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))} .mnav a{min-height:48px}.mnav-foot a{min-height:44px;overflow-wrap:anywhere} .head-call{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center} .wa{right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px))} main [id]{scroll-margin-top:90px} .foot{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))} .chantier-viewer{max-height:80dvh}.chantier-viewer-panel img{max-height:57dvh} } /* Keep the closed mobile drawer out of focus and improve narrow phone controls. */ .mnav:not(.open){visibility:hidden;pointer-events:none} .mnav.open{visibility:visible;pointer-events:auto} @media(max-width:650px){ .head-tel{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center} .foot a[href^="mailto:"]{overflow-wrap:anywhere;max-width:100%} .btn,.burger,.chantier-viewer-close{-webkit-tap-highlight-color:transparent;touch-action:manipulation} .field input,.field textarea,.field select{scroll-margin-top:100px} .spec-list>div{gap:10px} .spec-list .k,.spec-list .v{min-width:0;overflow-wrap:anywhere} }