/* KENNOL Lube Master v1.7.6 */ /* ============================================================ MISE EN PAGE EN FLUX (interface unique) Une seule structure pour toutes les largeurs et orientations : - aucune hauteur imposee, aucun cadre fige, aucune zone defilante interne (la page entiere defile d'un bloc) ; - aucune superposition : chaque bloc occupe sa place dans le flux ; - colonnes decidees par la LARGEUR DISPONIBLE de l'outil (container queries), pas par celle de la fenetre : 1 / 2 / 3 colonnes ; - cartes : verre + lisere epousant l'encoche (pente charte 60 deg, pointes arrondies) en CSS pur, par contour 9 tranches. Tous les selecteurs sont prefixes par l'identifiant de l'outil : aucun style du theme WordPress ne peut prendre le dessus. ============================================================ */ #kennol-oil-finder.kof2 #kof-cssver{position:absolute;width:0;height:0;overflow:hidden} #kennol-oil-finder.kof2 #kof-cssver::after{content:"1.7.6"} #kennol-oil-finder.kof2{ --k-ink:#0A0A0C;--k-red:#EE3124;--k-red-hot:#FF4133;--k-red-deep:#7A0D0A; --k-line:rgba(255,255,255,.28);--k-line-soft:rgba(255,255,255,.14); --k-text:#FFFFFF;--k-muted:#B9B9BF;--k-pad:clamp(16px,3.2vw,48px); position:relative;isolation:isolate;overflow:hidden;overflow:clip; font-family:'Rubik',system-ui,sans-serif;font-size:14px;line-height:1.5;font-weight:400; color:var(--k-text);background:var(--k-ink);text-align:left;letter-spacing:normal; -webkit-text-size-adjust:100%;text-size-adjust:100% } /* remise a plat : rien n'herite du theme hote */ #kennol-oil-finder.kof2 *,#kennol-oil-finder.kof2 *::before,#kennol-oil-finder.kof2 *::after{box-sizing:border-box} #kennol-oil-finder.kof2 h1,#kennol-oil-finder.kof2 h2,#kennol-oil-finder.kof2 h3,#kennol-oil-finder.kof2 p,#kennol-oil-finder.kof2 ul,#kennol-oil-finder.kof2 li,#kennol-oil-finder.kof2 dl,#kennol-oil-finder.kof2 dt,#kennol-oil-finder.kof2 dd,#kennol-oil-finder.kof2 nav,#kennol-oil-finder.kof2 header,#kennol-oil-finder.kof2 footer,#kennol-oil-finder.kof2 main,#kennol-oil-finder.kof2 section{ margin:0;padding:0;border:0;background:none;list-style:none;text-indent:0;float:none; font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-shadow:none;max-width:none} #kennol-oil-finder.kof2 li::before,#kennol-oil-finder.kof2 li::marker{content:none} #kennol-oil-finder.kof2 a{color:inherit;text-decoration:none;box-shadow:none;border:0} #kennol-oil-finder.kof2 img{max-width:100%;height:auto;border:0;border-radius:0;box-shadow:none;margin:0;padding:0;vertical-align:middle} #kennol-oil-finder.kof2 svg{vertical-align:middle} #kennol-oil-finder.kof2 button{font-family:inherit;color:inherit;margin:0;box-shadow:none;text-shadow:none;border-radius:0; line-height:1.25;min-width:0;height:auto;text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none} #kennol-oil-finder.kof2 :focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px} @media (prefers-reduced-motion:reduce){#kennol-oil-finder.kof2 *{animation:none !important;transition:none !important}} /* ------------------------------------------------------------ FOND : le MEME a chaque etape (accueil, liste, reponse). - la photo reste dans la fenetre pendant le defilement (collante) : elle n'est jamais etiree ni coupee, quelle que soit la hauteur de la page ; - voile, filaments et hexagones couvrent TOUTE la hauteur de l'outil : aucune limite interne, un filament ne peut naitre qu'a un bord. ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;overflow:clip;pointer-events:none;background: radial-gradient(120% 60% at 82% 0%,#1A1A1F 0%,transparent 55%), radial-gradient(90% 50% at 0% 100%,#17090A 0%,transparent 60%), var(--k-ink)} #kennol-oil-finder.kof2 .kof-bg .photo{position:sticky;top:0;width:100%;height:100vh; background-image:url('../img/bg-scene.jpg');background-size:cover;background-position:center 38%; -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)} #kennol-oil-finder.kof2 .kof-bg .photo{transition:filter .6s ease,transform .6s ease} #kennol-oil-finder.kof2:not(.kof-home) .kof-bg .photo{filter:blur(var(--kof-bgblur,5px));transform:scale(1.04)} #kennol-oil-finder.kof2 .kof-bg .veil{position:absolute;inset:0;background: linear-gradient(105deg,rgba(7,7,8,.86) 0%,rgba(7,7,8,.58) 32%,rgba(7,7,8,.4) 58%,rgba(7,7,8,.56) 100%)} #kennol-oil-finder.kof2 .kof-bg .glow-a{position:absolute;width:min(90vw,1100px);aspect-ratio:1;left:-22%;bottom:-18%;border-radius:50%; background:radial-gradient(circle,rgba(238,49,36,.30) 0%,rgba(238,49,36,.10) 35%,transparent 62%)} #kennol-oil-finder.kof2 .kof-bg .glow-b{position:absolute;width:min(60vw,720px);aspect-ratio:1;right:-12%;bottom:-8%;border-radius:50%; background:radial-gradient(circle,rgba(238,49,36,.18) 0%,transparent 60%)} /* filaments : meme fenetre collante que la photo (calque a la taille de l'ecran, pas de la page) ; trajectoires tirees au hasard par le script */ #kennol-oil-finder.kof2 .kof-bg svg.trails{position:sticky;top:0;display:block;width:100%;height:100vh;margin-top:-100vh;overflow:visible} #kennol-oil-finder.kof2 .trail{fill:none;stroke-linecap:round;stroke:url(#kofTrail)} #kennol-oil-finder.kof2 .trail.core{stroke-width:2.2;opacity:.8} #kennol-oil-finder.kof2 .trail.halo{stroke-width:7;opacity:.22;filter:blur(6px)} #kennol-oil-finder.kof2 .kof-hexfield{position:absolute;inset:0;overflow:hidden;pointer-events:none} #kennol-oil-finder.kof2 .kof-hexfield i{position:absolute;display:block;will-change:transform} @keyframes kof-drift{from{transform:translateX(var(--from,0))}to{transform:translateX(var(--to,100vw))}} /* ------------------------------------------------------------ CONTENEUR : c'est SA largeur qui decide des colonnes ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-wrap{container-type:inline-size;container-name:kof;max-width:1560px;margin:0 auto;padding:var(--k-pad)} /* bandeau : titre + module de recherche (identique a chaque etape) */ #kennol-oil-finder.kof2 .kof-band{display:grid;gap:14px;margin-bottom:14px} #kennol-oil-finder.kof2 .kof-top{display:grid;gap:12px;justify-items:start} #kennol-oil-finder.kof2 .kof-idrow{display:flex;align-items:center;gap:12px;max-width:100%} #kennol-oil-finder.kof2 .kof-word{font-weight:900;text-transform:uppercase;line-height:.84;letter-spacing:-.01em;font-size:clamp(34px,7.4cqi,92px);color:#fff} #kennol-oil-finder.kof2 .kof-word span{display:block} #kennol-oil-finder.kof2 .kof-word .w{background:linear-gradient(180deg,#fff 55%,#FFE1DE);-webkit-background-clip:text;background-clip:text;color:transparent} #kennol-oil-finder.kof2 .kof-word .r{color:var(--k-red);text-shadow:0 0 26px rgba(238,49,36,.55)} #kennol-oil-finder.kof2 #kof-tag{height:46px;font-weight:300;text-transform:uppercase;letter-spacing:.05em;line-height:23px;font-size:clamp(12px,3.5cqi,17px);color:#fff;white-space:nowrap;overflow:hidden} #kennol-oil-finder.kof2 .kof-lang{display:flex;flex:none;height:46px;border:1px solid var(--k-line);border-radius:10px;overflow:hidden;background:rgba(0,0,0,.35)} #kennol-oil-finder.kof2 .kof-lang button{min-width:46px;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--k-muted); font-weight:800;font-size:12px;letter-spacing:.12em;cursor:pointer} #kennol-oil-finder.kof2 .kof-lang button.on{background:linear-gradient(150deg,var(--k-red-hot),var(--k-red));color:#fff} /* contenu : colonne de gauche (filtres ou vehicule) + reponse */ #kennol-oil-finder.kof2 .kof-main{display:grid;gap:14px;scroll-margin-top:96px} #kennol-oil-finder.kof2 .kof-left{display:grid;gap:12px;align-content:start;min-width:0} #kennol-oil-finder.kof2 .kof-right{display:grid;gap:14px;align-content:start;min-width:0} #kennol-oil-finder.kof2 .kof-comp{min-width:0} #kennol-oil-finder.kof2 .kof-comp:empty,#kennol-oil-finder.kof2 #kof-filterslot:empty,#kennol-oil-finder.kof2 #kof-vdetslot:empty{display:none} #kennol-oil-finder.kof2.kof-noleft .kof-left{display:none} #kennol-oil-finder.kof2 .kof-prodstage{display:grid;gap:14px;align-items:start;min-width:0} #kennol-oil-finder.kof2 .kof-centercol{display:grid;gap:12px;min-width:0} /* ------------------------------------------------------------ CARTES : verre + lisere epousant l'encoche (aucune geometrie calculee). Deux gabarits a la MEME pente (charte, 60 deg) : carte, et petite carte (tuiles, barre d'organes) dont l'encoche est reduite en proportion. ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-card{position:relative;isolation:isolate;min-width:0;display:block} #kennol-oil-finder.kof2 .kof-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px; background:linear-gradient(165deg,rgba(255,255,255,.095),rgba(255,255,255,.03) 55%,rgba(255,255,255,.05)); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); -webkit-mask:linear-gradient(120deg,#000 calc(100% - 15.2px),transparent calc(100% - 14.7px)); mask:linear-gradient(120deg,#000 calc(100% - 15.2px),transparent calc(100% - 14.7px))} #kennol-oil-finder.kof2 .kof-card::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid transparent; border-image:url('../img/card-outline.svg') 48 / 48px stretch} #kennol-oil-finder.kof2 .kof-sectcard::before,#kennol-oil-finder.kof2 .kof-appscard::before,#kennol-oil-finder.kof2 .kof-compcard::before{border-radius:10px; -webkit-mask:linear-gradient(120deg,#000 calc(100% - 7.4px),transparent calc(100% - 6.9px)); mask:linear-gradient(120deg,#000 calc(100% - 7.4px),transparent calc(100% - 6.9px))} #kennol-oil-finder.kof2 .kof-sectcard::after,#kennol-oil-finder.kof2 .kof-appscard::after,#kennol-oil-finder.kof2 .kof-compcard::after{border-image:url('../img/card-outline-sm.svg') 20 / 20px stretch} /* le verre est decoupe par le meme gabarit que le lisere : pointes d'encoche arrondies comprises (le degrade en biais ne sert plus que de repli) */ #kennol-oil-finder.kof2 .kof-card::before{-webkit-mask-box-image-source:url('../img/card-mask.svg');-webkit-mask-box-image-slice:48 fill;-webkit-mask-box-image-width:48px;-webkit-mask-box-image-repeat:stretch; mask-border-source:url('../img/card-mask.svg');mask-border-slice:48 fill;mask-border-width:48px;mask-border-repeat:stretch} #kennol-oil-finder.kof2 .kof-sectcard::before,#kennol-oil-finder.kof2 .kof-appscard::before,#kennol-oil-finder.kof2 .kof-compcard::before,#kennol-oil-finder.kof2 .kof-appsbar{-webkit-mask-box-image-source:url('../img/card-mask-sm.svg');-webkit-mask-box-image-slice:20 fill;-webkit-mask-box-image-width:20px;-webkit-mask-box-image-repeat:stretch; mask-border-source:url('../img/card-mask-sm.svg');mask-border-slice:20 fill;mask-border-width:20px;mask-border-repeat:stretch} @supports (-webkit-mask-box-image-source:none) or (mask-border-source:none){ #kennol-oil-finder.kof2 .kof-card::before,#kennol-oil-finder.kof2 .kof-appsbar{-webkit-mask-image:none;mask-image:none;border-radius:0} } /* carte rouge : un VERRE teinte (le fond se devine a travers), pas un aplat */ #kennol-oil-finder.kof2 .kof-card.red::before{background:linear-gradient(160deg,rgba(70,16,12,.42) 0%,rgba(150,24,16,.50) 46%,rgba(232,48,32,.58) 100%); -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)} #kennol-oil-finder.kof2 .kof-card > .hexin{position:relative;padding:17px 16px 22px;min-width:0} #kennol-oil-finder.kof2 .kof-h2{font-weight:300;font-size:10.5px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--k-red)} #kennol-oil-finder.kof2 .kof-h2.light{color:#fff;font-weight:800;font-size:12px;margin-bottom:12px} #kennol-oil-finder.kof2 .red .kof-h2{color:#fff;font-weight:800;margin-bottom:12px} /* ------------------------------------------------------------ RECHERCHE : champs, boutons, filtres ------------------------------------------------------------ */ /* module de recherche : tous les modes visibles, identique a chaque etape */ #kennol-oil-finder.kof2 .kof-search{container-type:inline-size;container-name:hub} #kennol-oil-finder.kof2 .kof-search > .hexin{display:grid;gap:14px} #kennol-oil-finder.kof2 .kof-sfields{display:flex;flex-wrap:wrap;gap:10px} /* champs de largeur egale tant qu'ils tiennent sur une ligne ; sinon le dernier passe dessous, en pleine largeur. Le champ Immatriculation avec selecteur VL / PL demande plus de place : son libelle n'est jamais rogne */ #kennol-oil-finder.kof2 .kof-sfields .kof-field{flex:1 1 0;min-width:230px;margin-bottom:0} #kennol-oil-finder.kof2 .kof-sfields .kof-field.has-vlpl{min-width:min(100%,322px)} #kennol-oil-finder.kof2 .kof-sfields .kof-field .box{padding-right:6px} #kennol-oil-finder.kof2 .kof-field.on .box{border-color:rgba(255,255,255,.8)} #kennol-oil-finder.kof2 .kof-go{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9px;cursor:pointer;color:#fff; background:linear-gradient(155deg,var(--k-red-hot) 0%,var(--k-red) 75%);box-shadow:0 6px 18px rgba(238,49,36,.4),inset 0 1px 0 rgba(255,255,255,.35)} #kennol-oil-finder.kof2 .kof-go svg{display:block;width:27px;height:27px} #kennol-oil-finder.kof2 .kof-backbtn{display:inline-flex;align-items:center;gap:9px} #kennol-oil-finder.kof2 .kof-backbtn .kof-karrow{flex:none;width:20px;height:20px;transform:scaleX(-1)} #kennol-oil-finder.kof2 .kof-go[disabled]{opacity:.5;cursor:wait} #kennol-oil-finder.kof2 .kof-slabel{margin-bottom:8px;font-size:10.5px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:#fff} #kennol-oil-finder.kof2 .kof-blevels{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:10px} #kennol-oil-finder.kof2 .kof-blevels .kof-field{margin-bottom:0} #kennol-oil-finder.kof2 .kof-search .kof-navrow{margin-top:0} #kennol-oil-finder.kof2 .kof-filters .kof-h2{margin-bottom:12px} #kennol-oil-finder.kof2 .kof-filters .kof-field:last-child{margin-bottom:0} #kennol-oil-finder.kof2 .kof-field{position:relative;margin-bottom:10px} #kennol-oil-finder.kof2 .kof-field .box{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 14px;border:1.5px solid var(--k-line); border-radius:12px;background:rgba(10,10,12,.5);cursor:pointer} #kennol-oil-finder.kof2 .kof-field .box.slim{min-height:44px;padding:6px 14px} #kennol-oil-finder.kof2 .kof-field .box:focus-within{border-color:rgba(255,255,255,.7)} #kennol-oil-finder.kof2 .kof-field .tx{flex:1;min-width:0} #kennol-oil-finder.kof2 .kof-field .lb{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff} #kennol-oil-finder.kof2 .kof-field .vl{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:11px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--k-muted);line-height:1.3} #kennol-oil-finder.kof2 .kof-field .vl.set{font-size:13.5px;font-weight:700;letter-spacing:.02em;text-transform:none;color:#fff} #kennol-oil-finder.kof2 .kof-field .chev{flex:none;width:9px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translateY(-2px);opacity:.85} #kennol-oil-finder.kof2 .kof-field select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;margin:0;font-family:'Rubik',system-ui,sans-serif} #kennol-oil-finder.kof2 .kof-field select option{color:#111;background:#fff} /* selecteur VL / PL : deux bandeaux de plaque europeenne, l'actif en pleine couleur avec un filet clair, l'autre attenue mais toujours visible */ #kennol-oil-finder.kof2 .kof-vlpl{flex:none;display:flex;gap:4px} #kennol-oil-finder.kof2 .kof-vlpl button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:38px;height:44px;margin:0;padding:3px 0 2px;border:0;border-radius:5px; background:#003399;color:#fff;cursor:pointer;opacity:.42;transition:opacity .15s ease,box-shadow .15s ease} #kennol-oil-finder.kof2 .kof-vlpl button .st{display:block;width:24px;height:18.4px} #kennol-oil-finder.kof2 .kof-vlpl button .k{font-weight:800;font-size:11px;line-height:1;letter-spacing:.04em} #kennol-oil-finder.kof2 .kof-vlpl button.on{opacity:1;box-shadow:0 0 0 1.5px rgba(255,255,255,.92)} #kennol-oil-finder.kof2 .kof-vlpl button:not(.on):hover,#kennol-oil-finder.kof2 .kof-vlpl button:not(.on):focus-visible{opacity:.72} #kennol-oil-finder.kof2 .kof-field .eu{flex:none;display:grid;place-items:center;width:24px;height:30px;border-radius:5px;background:#123590;color:#FFCC00;font-weight:800;font-size:11px} #kennol-oil-finder.kof2 input[type=text]{width:100%;color:#fff !important;-webkit-text-fill-color:#fff !important;background:transparent !important; border:0 !important;box-shadow:none !important;outline:none !important;font-family:'Rubik',system-ui,sans-serif !important; font-size:16px !important;font-weight:500;line-height:1.3 !important;padding:0 !important;margin:0 !important;height:auto !important;min-height:0 !important;border-radius:0 !important} #kennol-oil-finder.kof2 input[type=text]::placeholder{color:#B9B9BF !important;opacity:1 !important;-webkit-text-fill-color:#B9B9BF !important;font-weight:400} #kennol-oil-finder.kof2 .kof-field .box input.plate{font-weight:800 !important;font-style:italic;letter-spacing:.2em !important;text-transform:uppercase !important;text-align:center !important;font-size:19px !important} #kennol-oil-finder.kof2 .kof-field .box input.vinput{font-weight:700 !important;letter-spacing:.06em !important;text-transform:uppercase !important; font-family:ui-monospace,'Cascadia Mono','Courier New',monospace !important} #kennol-oil-finder.kof2 .kof-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;margin-top:6px;border:0;border-radius:10px;cursor:pointer; background:linear-gradient(155deg,var(--k-red-hot) 0%,var(--k-red) 75%);color:#fff; font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-align:center; box-shadow:0 10px 30px rgba(238,49,36,.4),inset 0 1px 0 rgba(255,255,255,.35)} #kennol-oil-finder.kof2 .kof-btn[disabled]{opacity:.5;cursor:wait} #kennol-oil-finder.kof2 .kof-btn.ghost{min-height:44px;padding:0 16px;background:rgba(10,10,12,.5);border:1px solid rgba(255,255,255,.34);box-shadow:none;font-size:11.5px;letter-spacing:.08em} #kennol-oil-finder.kof2 .kof-btn.white{background:#fff;color:#111;font-weight:900;box-shadow:0 8px 26px rgba(0,0,0,.4)} #kennol-oil-finder.kof2 .kof-btn.sm{min-height:44px;padding:0 9px;margin-top:0;font-size:10.5px;letter-spacing:.06em;white-space:nowrap} #kennol-oil-finder.kof2 .kof-filtersep{height:1px;background:var(--k-line-soft);margin:16px 0 12px} #kennol-oil-finder.kof2 .kof-navrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--k-line-soft)} #kennol-oil-finder.kof2 .kof-navrow .kof-btn{margin-top:0} #kennol-oil-finder.kof2 .kof-status{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--k-muted)} #kennol-oil-finder.kof2 .kof-status:empty{display:none} #kennol-oil-finder.kof2 .kof-status.err{color:#FF8B81;text-transform:none;letter-spacing:0;line-height:1.5} #kennol-oil-finder.kof2 .kof-spin{display:inline-block;width:15px;height:15px;margin-right:8px;vertical-align:-3px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--k-red-hot);border-radius:50%;animation:kof2-spin .8s linear infinite} #kennol-oil-finder.kof2 .kof-spin.sm{width:11px;height:11px;margin:0 0 0 6px;vertical-align:-1px} @keyframes kof2-spin{to{transform:rotate(360deg)}} /* secteurs : tuiles icone + nom, toujours visibles ; la tuile choisie est marquee */ #kennol-oil-finder.kof2 .kof-sectors{display:flex;flex-wrap:wrap;gap:10px} #kennol-oil-finder.kof2 .kof-sectcard{flex:1 1 118px;display:flex;cursor:pointer} #kennol-oil-finder.kof2 .kof-sectcard > .hexin{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:104px;padding:14px 5px 14px} /* tous les vehicules sont poses sur la MEME ligne de sol : le bas de la boite */ #kennol-oil-finder.kof2 .kof-sectcard .ic{flex:none;width:88px;height:46px;background:center bottom / contain no-repeat} #kennol-oil-finder.kof2 .ic.s-car{background-image:url('../img/sect-car.png')} #kennol-oil-finder.kof2 .ic.s-van{background-image:url('../img/sect-van.png')} #kennol-oil-finder.kof2 .ic.s-moto{background-image:url('../img/sect-moto.png')} #kennol-oil-finder.kof2 .ic.s-truck{background-image:url('../img/sect-truck.png')} #kennol-oil-finder.kof2 .ic.s-agri{background-image:url('../img/sect-agri.png')} #kennol-oil-finder.kof2 .ic.s-off{background-image:url('../img/sect-off.png')} #kennol-oil-finder.kof2 .ic.s-indus{background-image:url('../img/sect-indus.png')} #kennol-oil-finder.kof2 .kof-sectcard .ic svg{display:block;width:100%;height:100%} #kennol-oil-finder.kof2 .kof-sectcard .lb{font-size:10.5px;font-weight:700;text-align:center;line-height:1.25;letter-spacing:0;text-transform:uppercase;color:#E8E8EC;overflow-wrap:normal;word-break:normal;hyphens:none;max-width:100%} #kennol-oil-finder.kof2 .kof-sectcard.on::before{background:linear-gradient(165deg,rgba(238,49,36,.34),rgba(238,49,36,.14))} #kennol-oil-finder.kof2 .kof-sectcard.on .lb{color:#fff} #kennol-oil-finder.kof2 .kof-sectcard:hover::before{background:linear-gradient(165deg,rgba(255,255,255,.17),rgba(238,49,36,.16))} /* module etroit (telephone) : tuiles en lignes compactes, deux par rangee */ @container hub (max-width:520px){ #kennol-oil-finder.kof2 .kof-sectors{display:grid;grid-template-columns:1fr 1fr;gap:8px} #kennol-oil-finder.kof2 .kof-sectcard > .hexin{flex-direction:row;justify-content:flex-start;gap:10px;min-height:50px;padding:8px 12px} #kennol-oil-finder.kof2 .kof-sectcard .ic{width:54px;height:30px} #kennol-oil-finder.kof2 .kof-sectcard .lb{text-align:left} } /* ------------------------------------------------------------ ACCUEIL / MESSAGES / LISTE DE RESULTATS ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-hero{display:grid;place-items:center;text-align:center;padding:28px 8px;min-height:clamp(180px,32vh,420px)} #kennol-oil-finder.kof2 .kof-hero.right{text-align:right;place-items:end} #kennol-oil-finder.kof2 .kof-hero .big{font-weight:900;text-transform:uppercase;font-size:clamp(22px,4.2cqi,44px);line-height:1.04; background:linear-gradient(100deg,#fff 30%,rgba(255,255,255,.4));-webkit-background-clip:text;background-clip:text;color:transparent} #kennol-oil-finder.kof2 .kof-hero .sub{margin-top:14px;max-width:520px;color:#D8D8DC;font-size:14.5px;line-height:1.6} #kennol-oil-finder.kof2 .kof-hero.right .sub{margin-left:auto} #kennol-oil-finder.kof2 .kof-count{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--k-muted)} #kennol-oil-finder.kof2 .kof-count b{color:#fff} #kennol-oil-finder.kof2 .kof-count .dim{opacity:.6;font-weight:400} #kennol-oil-finder.kof2 .kof-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} #kennol-oil-finder.kof2 .kof-vcard{display:block;width:100%;padding:0;border:0;background:transparent;color:#fff;text-align:left;cursor:pointer} #kennol-oil-finder.kof2 .kof-vcard .kof-card{height:100%} #kennol-oil-finder.kof2 .kof-vcard .hexin{display:flex;flex-direction:column;min-height:124px;padding:16px 18px 18px} #kennol-oil-finder.kof2 .kof-vcard .mk{color:var(--k-red);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px} #kennol-oil-finder.kof2 .kof-vcard .md{font-weight:600;font-size:14px;line-height:1.35} #kennol-oil-finder.kof2 .kof-vcard .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:10px} #kennol-oil-finder.kof2 .kof-vcard:hover .kof-card::before,#kennol-oil-finder.kof2 .kof-vcard:focus-visible .kof-card::before{background:linear-gradient(165deg,rgba(255,255,255,.17),rgba(238,49,36,.16))} #kennol-oil-finder.kof2 .kof-tag{font-size:11px;font-weight:600;color:#D0D0D5;border:1px solid var(--k-line-soft);border-radius:7px;padding:3px 9px;background:rgba(0,0,0,.3)} #kennol-oil-finder.kof2 .kof-chip{min-height:36px;padding:5px 14px;border:1px solid var(--k-line);border-radius:9px;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;font-size:12px;font-weight:600} #kennol-oil-finder.kof2 .kof-chip.on{background:linear-gradient(150deg,var(--k-red-hot),var(--k-red));border-color:transparent} #kennol-oil-finder.kof2 .kof-chip.more{min-height:44px;padding:0 20px} #kennol-oil-finder.kof2 .kof-moremid{display:flex;justify-content:center;margin:6px 0} /* ------------------------------------------------------------ CARTE VEHICULE : les details seuls (la recherche reste dans son module) ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-vdet .kof-h2{margin-bottom:10px} #kennol-oil-finder.kof2 .kof-vdet .vid{display:flex;justify-content:space-between;align-items:center;gap:12px} #kennol-oil-finder.kof2 .kof-vdet .vidt{min-width:0} #kennol-oil-finder.kof2 .kof-vdet .vdraw{flex:none;width:clamp(96px,34%,132px);height:auto;opacity:.92} #kennol-oil-finder.kof2 .kof-vdet .vmake{font-weight:900;text-transform:uppercase;font-size:22px;line-height:1.05} #kennol-oil-finder.kof2 .kof-vdet .vmodel{margin-top:4px;font-weight:600;font-size:13.5px;line-height:1.4;overflow-wrap:anywhere} #kennol-oil-finder.kof2 .kof-copyid{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin:0 0 -6px;padding:0;border:0;background:none;color:var(--k-muted); font-weight:300;font-size:10.5px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer;-webkit-user-select:none;user-select:none} #kennol-oil-finder.kof2 .kof-copyid svg{flex:none;width:15px;height:15px} #kennol-oil-finder.kof2 .kof-copyid:hover,#kennol-oil-finder.kof2 .kof-copyid:focus-visible,#kennol-oil-finder.kof2 .kof-copyid.done{color:#fff} #kennol-oil-finder.kof2 .kof-vdet .vtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px} #kennol-oil-finder.kof2 .kof-vdet .vtags li{padding:4px 10px;border:1px solid var(--k-line-soft);border-radius:8px;font-size:12px;font-weight:600;background:rgba(10,10,12,.4)} #kennol-oil-finder.kof2 .kof-vdet .vtags li span{display:none;color:var(--k-muted);font-weight:400;margin-right:6px} /* ------------------------------------------------------------ ORGANES : juste au-dessus de la reponse, a toutes les largeurs. La barre est une carte comme les autres : verre, lisere, encoche. ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-topwrap{display:grid;gap:10px;min-width:0} #kennol-oil-finder.kof2 .kof-appsbar{display:flex;flex-wrap:wrap;gap:1px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.2); -webkit-mask:linear-gradient(120deg,#000 calc(100% - 7.4px),transparent calc(100% - 6.9px)); mask:linear-gradient(120deg,#000 calc(100% - 7.4px),transparent calc(100% - 6.9px))} #kennol-oil-finder.kof2 .kof-appsbar button{flex:1 1 150px;display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border:0;background:rgba(15,15,18,.84);color:#fff;cursor:pointer;text-align:left} #kennol-oil-finder.kof2 .kof-appsbar .n{flex:none;font-weight:800;font-size:13px} #kennol-oil-finder.kof2 .kof-appsbar .t{font-weight:300;font-size:11px;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere} #kennol-oil-finder.kof2 .kof-appsbar button.on{background:#fff;color:#111} #kennol-oil-finder.kof2 .kof-appsbar button.on .t{font-weight:800} #kennol-oil-finder.kof2 .kof-subsel{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center} #kennol-oil-finder.kof2 .kof-subsel .msgrp{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;max-width:100%;margin:0;padding:0;font:inherit;color:inherit} #kennol-oil-finder.kof2 .kof-subsel .q{font-size:11px;line-height:1.2;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)} #kennol-oil-finder.kof2 select{margin:0;box-shadow:none;text-transform:none;letter-spacing:normal;text-shadow:none} #kennol-oil-finder.kof2 .kof-msel{height:auto;min-height:44px;width:auto;max-width:100%;padding:6px 10px;border:1px solid var(--k-line);border-radius:8px;background:rgba(10,10,12,.8);color:#fff; font:600 13px/1.3 'Rubik',system-ui,sans-serif;cursor:pointer;-webkit-appearance:auto;appearance:auto} #kennol-oil-finder.kof2 .kof-msel option{color:#111;background:#fff} /* ------------------------------------------------------------ LA REPONSE : le produit en vedette ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-prod{container-type:inline-size;container-name:prod} #kennol-oil-finder.kof2 .kof-prod > .hexin{padding-top:20px} #kennol-oil-finder.kof2 .kof-bigname{text-align:right;font-weight:900;text-transform:uppercase;line-height:.84;color:#fff;font-size:clamp(30px,10.8cqi,66px);overflow:hidden;padding-top:.06em} #kennol-oil-finder.kof2 .kof-bigname span{display:block;white-space:nowrap} #kennol-oil-finder.kof2 .kof-bigname .l1{font-size:.38em;font-weight:800;letter-spacing:.2em;line-height:1;margin-bottom:.34em} #kennol-oil-finder.kof2 .kof-bigname .l2{font-size:1em} #kennol-oil-finder.kof2 .kof-bigname .l3{font-size:1em} #kennol-oil-finder.kof2 .kof-bigname .l4{font-size:.6em;margin-top:.1em} #kennol-oil-finder.kof2 .kof-bigname.plain{font-size:clamp(18px,6cqi,28px);white-space:normal;overflow-wrap:anywhere;line-height:1.1} #kennol-oil-finder.kof2 .kof-bigcode{margin-top:10px;text-align:right;font-weight:300;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff} #kennol-oil-finder.kof2 .kof-herostage{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px 8px;align-items:center;margin-top:10px} #kennol-oil-finder.kof2 .kof-herostage.nomedal{grid-template-columns:minmax(0,1fr)} #kennol-oil-finder.kof2 .kof-medalcol{display:flex;flex-direction:column;align-items:center;gap:4px} #kennol-oil-finder.kof2 .kof-medalbtn{display:grid;place-items:center;min-width:48px;min-height:44px;padding:0;border:0;background:transparent;cursor:pointer} #kennol-oil-finder.kof2 .kof-medal{display:inline-block;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))} #kennol-oil-finder.kof2 .kof-medal.m1{background-image:url('../img/medaille-1.png')} #kennol-oil-finder.kof2 .kof-medal.m2{background-image:url('../img/medaille-2.png')} #kennol-oil-finder.kof2 .kof-medal.m3{background-image:url('../img/medaille-3.png')} #kennol-oil-finder.kof2 .kof-medal.m4{background-image:url('../img/medaille-4.png')} #kennol-oil-finder.kof2 .kof-medalbtn .kof-medal{width:32px;height:28px;opacity:.72} #kennol-oil-finder.kof2 .kof-medalbtn.on .kof-medal{width:48px;height:42px;opacity:1} #kennol-oil-finder.kof2 .kof-shotwrap{display:flex;align-items:flex-end;justify-content:center;min-width:0;height:clamp(200px,56cqi,310px)} #kennol-oil-finder.kof2 .kof-shot{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;opacity:0; filter:drop-shadow(0 26px 30px rgba(0,0,0,.75))} #kennol-oil-finder.kof2 .kof-shot.ready{opacity:1;transition:opacity .3s ease} #kennol-oil-finder.kof2 .kof-noshot{display:grid;place-items:center;width:min(100%,200px);height:100%;padding:12px;border:1.5px dashed var(--k-line);border-radius:18px; color:var(--k-muted);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-align:center} #kennol-oil-finder.kof2 .kof-acts{grid-column:1 / -1;display:grid;gap:10px;min-width:0} #kennol-oil-finder.kof2 .kof-podrow{display:flex;flex-wrap:wrap;border:1px solid rgba(255,255,255,.4);border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden} #kennol-oil-finder.kof2 .kof-podrow .cell{flex:1 1 120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 12px;text-align:center; border-right:1px solid rgba(255,255,255,.2)} #kennol-oil-finder.kof2 .kof-podrow .cell:last-child{border-right:0} #kennol-oil-finder.kof2 .kof-podrow .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-muted)} #kennol-oil-finder.kof2 .kof-podrow .v{font-weight:800;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#fff} #kennol-oil-finder.kof2 .kof-actbtns{display:flex;flex-wrap:wrap;gap:8px} #kennol-oil-finder.kof2 .kof-actbtns .kof-btn{flex:1 1 130px;margin-top:0} #kennol-oil-finder.kof2 .kof-actions{display:flex;gap:10px;justify-content:flex-end} /* imprimer / envoyer : hexagone de la charte (largeur = hauteur x 2/racine(3), pointes arrondies, lisere) — dessine, pas decoupe */ #kennol-oil-finder.kof2 .kof-icobtn{display:grid;place-items:center;width:52px;height:auto;aspect-ratio:2 / 1.7320508;padding:0;border:0;cursor:pointer;color:#fff; background:url('../img/hex-btn.svg') center / 100% 100% no-repeat} #kennol-oil-finder.kof2 .kof-icobtn svg{width:19px;height:19px} #kennol-oil-finder.kof2 .kof-icobtn:hover,#kennol-oil-finder.kof2 .kof-icobtn:focus-visible{background-image:url('../img/hex-btn-on.svg')} #kennol-oil-finder.kof2 .kof-reco{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)} #kennol-oil-finder.kof2 .kof-reco .s1{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--k-muted);margin-bottom:8px} #kennol-oil-finder.kof2 .kof-reco .thumbs{display:flex;flex-wrap:wrap;gap:8px} #kennol-oil-finder.kof2 .kof-reco .th{position:relative;flex:1 1 84px;max-width:132px;display:grid;justify-items:center;align-content:start;gap:5px;min-height:44px;padding:8px 6px; border:1px solid transparent;border-radius:12px;background:transparent;color:#fff;cursor:pointer} #kennol-oil-finder.kof2 .kof-reco .th img{height:60px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))} #kennol-oil-finder.kof2 .kof-reco .th .tn{font-size:10px;font-weight:700;color:#D0D0D5;text-transform:uppercase;text-align:center;line-height:1.2; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} #kennol-oil-finder.kof2 .kof-reco .th.on{border-color:var(--k-red-hot);background:rgba(238,49,36,.12)} #kennol-oil-finder.kof2 .kof-reco .th.on .tn{color:#fff} #kennol-oil-finder.kof2 .kof-reco .th .kof-medal.mini{position:absolute;top:2px;right:2px;width:24px;height:21px} /* ------------------------------------------------------------ SPECIFICATIONS ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-specs p{margin:0 0 14px;font-size:13px;line-height:1.6;overflow-wrap:anywhere} #kennol-oil-finder.kof2 .kof-specs p.norms{font-weight:800;font-size:13.5px;line-height:1.5} #kennol-oil-finder.kof2 .kof-specs p.ptier{font-weight:700;letter-spacing:.06em;text-transform:uppercase} #kennol-oil-finder.kof2 .kof-specs h3{margin:0 0 4px;font-weight:800;font-size:13px} #kennol-oil-finder.kof2 .kof-specs .hexin > :last-child{margin-bottom:0} #kennol-oil-finder.kof2 .kof-packs{display:flex;flex-wrap:wrap;gap:6px} #kennol-oil-finder.kof2 .kof-packs li{padding:5px 10px;border:1px solid rgba(255,255,255,.4);border-radius:8px;background:rgba(0,0,0,.22);font-size:12px;font-weight:800} #kennol-oil-finder.kof2 .kof-packs li b{font-weight:300} /* ------------------------------------------------------------ PRODUITS COMPLEMENTAIRES ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} #kennol-oil-finder.kof2 .kof-compcard{display:grid;justify-items:center;align-content:start;gap:8px;min-height:120px;padding:14px 12px 20px;text-align:center;color:#fff} #kennol-oil-finder.kof2 .kof-compcard img{height:64px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))} #kennol-oil-finder.kof2 .kof-compcard .nm{font-weight:800;font-size:12px;line-height:1.3;text-transform:uppercase} #kennol-oil-finder.kof2 .kof-compcard .go{font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--k-red)} /* ------------------------------------------------------------ FENETRES (remarques, procedures) — seul cas de defilement interne : un contenu plus long que l'ecran dans une fenetre modale ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-modal{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:16px;background:rgba(5,5,6,.66); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} #kennol-oil-finder.kof2 .kof-modalhex{width:min(100%,640px)} #kennol-oil-finder.kof2 .kof-modalhex.wide{width:min(100%,940px)} #kennol-oil-finder.kof2 .kof-modalhex::before{background:linear-gradient(165deg,rgba(40,40,46,.96),rgba(18,18,21,.97))} #kennol-oil-finder.kof2 .kof-modalhead{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px} #kennol-oil-finder.kof2 .kof-modalx{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--k-line);border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:20px;line-height:1;cursor:pointer} #kennol-oil-finder.kof2 .kof-remlist{max-height:60vh;overflow:auto;padding-right:8px;font-size:13.5px;line-height:1.65;color:#E8E8EA} #kennol-oil-finder.kof2 .kof-remlist p{margin:0 0 10px} #kennol-oil-finder.kof2 .kof-remlist b{color:#fff} #kennol-oil-finder.kof2 .kof-pdfgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;max-height:60vh;overflow:auto} #kennol-oil-finder.kof2 .kof-pdf{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border:1px solid var(--k-line-soft);border-radius:12px;background:rgba(0,0,0,.3);color:#fff;text-align:center} #kennol-oil-finder.kof2 .kof-pdf svg{width:34px;height:34px;color:var(--k-red-hot)} #kennol-oil-finder.kof2 .kof-pdf span{font-size:11px;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.04em} /* ------------------------------------------------------------ PIED : badge de version + K ------------------------------------------------------------ */ /* le pied reserve la hauteur du K : rien ne peut passer dessous */ #kennol-oil-finder.kof2 .kof-foot{display:flex;align-items:flex-end;min-height:64px;margin-top:22px} #kennol-oil-finder.kof2 .kof-sysinfo{display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(0,0,0,.6); font-family:ui-monospace,'SF Mono','Cascadia Mono','Courier New',monospace;font-size:10.5px;letter-spacing:.1em;color:#A9A9B0} #kennol-oil-finder.kof2 .kof-sysinfo .sep{opacity:.4} #kennol-oil-finder.kof2 .kof-k{position:absolute;right:0;bottom:0;width:clamp(96px,8vw,150px);aspect-ratio:191 / 99;pointer-events:none; background:url('../img/k-footer.png') right bottom / contain no-repeat} /* ------------------------------------------------------------ LARGEUR DISPONIBLE >= 680 : deux colonnes (tablette, telephone a l'horizontale, fenetre reduite) ------------------------------------------------------------ */ @container kof (min-width:680px){ #kennol-oil-finder.kof2 .kof-band{gap:18px;margin-bottom:20px} #kennol-oil-finder.kof2 .kof-main{grid-template-columns:minmax(250px,320px) minmax(0,1fr);grid-template-rows:auto 1fr;gap:20px;align-items:start} #kennol-oil-finder.kof2 .kof-left{grid-column:1;grid-row:1} #kennol-oil-finder.kof2 .kof-right{grid-column:2;grid-row:1 / span 2} #kennol-oil-finder.kof2 .kof-comp{grid-column:1;grid-row:2} #kennol-oil-finder.kof2 .kof-prodstage{gap:20px} #kennol-oil-finder.kof2 .kof-vdet .vtags li span{display:inline} #kennol-oil-finder.kof2 .kof-card > .hexin{padding:19px 21px 23px} #kennol-oil-finder.kof2 .kof-hero{min-height:clamp(220px,36vh,460px)} } /* LARGEUR DISPONIBLE >= 1090 : trois colonnes pour la reponse (ordinateur) */ @container kof (min-width:1090px){ #kennol-oil-finder.kof2 .kof-main{grid-template-columns:368px minmax(0,1fr)} #kennol-oil-finder.kof2 .kof-prodstage.has-specs{grid-template-columns:minmax(0,1fr) minmax(320px,400px)} } /* sans colonne de gauche (accueil, liste sans filtre) : la reponse prend tout */ #kennol-oil-finder.kof2.kof-noleft .kof-wrap .kof-main{grid-template-columns:minmax(0,1fr)} #kennol-oil-finder.kof2.kof-noleft .kof-wrap .kof-right{grid-column:1;grid-row:auto} #kennol-oil-finder.kof2.kof-noleft .kof-wrap .kof-comp{grid-column:1;grid-row:auto} /* la carte produit s'elargit : actions a droite du bidon */ @container prod (min-width:510px){ #kennol-oil-finder.kof2 .kof-herostage{grid-template-columns:60px minmax(0,1fr) minmax(160px,210px);gap:14px} #kennol-oil-finder.kof2 .kof-herostage.nomedal{grid-template-columns:minmax(0,1fr) minmax(160px,210px)} #kennol-oil-finder.kof2 .kof-acts{grid-column:auto} } @media print{ #kennol-oil-finder.kof2 .kof-bg,#kennol-oil-finder.kof2 .kof-lang,#kennol-oil-finder.kof2 .kof-actions,#kennol-oil-finder.kof2 .kof-sysinfo{display:none !important} } /* ------------------------------------------------------------ FONDUS : textes d'accueil, changement de recherche ------------------------------------------------------------ */ #kennol-oil-finder.kof2 .kof-hero.right{transition:opacity .35s ease,visibility 0s linear .35s} #kennol-oil-finder.kof2 .kof-hero.right.out{opacity:0;visibility:hidden} #kennol-oil-finder.kof2 .kof-main{transition:opacity .19s ease} #kennol-oil-finder.kof2 .kof-main.kof-out{opacity:0} @keyframes kof2-in{from{opacity:0}to{opacity:1}} #kennol-oil-finder.kof2 .kof-prod,#kennol-oil-finder.kof2 .kof-specs{animation:kof2-in .25s ease} #kennol-oil-finder.kof2 .kof-main.kof-in .kof-left .kof-card,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-comp > *,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-topwrap,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-vgrid,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-count{animation:kof2-in .3s ease} @media (prefers-reduced-motion:reduce){#kennol-oil-finder.kof2 .kof-prod,#kennol-oil-finder.kof2 .kof-specs,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-left .kof-card,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-comp > *,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-topwrap,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-vgrid,#kennol-oil-finder.kof2 .kof-main.kof-in .kof-count{animation:none}#kennol-oil-finder.kof2 .kof-main,#kennol-oil-finder.kof2 .kof-hero.right{transition:none}} /* normes : texte courant, organisme en gras, separees par un point rond a mi-hauteur */ #kennol-oil-finder.kof2 .kof-norms{margin-bottom:12px;font-size:12.5px;line-height:1.6;font-weight:300} #kennol-oil-finder.kof2 .kof-norms b{font-weight:800} #kennol-oil-finder.kof2 .kof-norms .nw{white-space:nowrap} #kennol-oil-finder.kof2 .kof-norms .dot{display:inline-block;width:.3em;height:.3em;margin:0 .1em 0 .55em;border-radius:50%;background:currentColor;vertical-align:.2em} #kennol-oil-finder.kof2 .kof-compbox .kof-h2{margin-bottom:10px} /* barre d'organes : decoupee par le petit gabarit (la case blanche du coin suit l'encoche arrondie) */ #kennol-oil-finder.kof2 .kof-appscard .kof-appsbar{-webkit-mask-box-image-source:url('../img/card-mask-sm.svg');-webkit-mask-box-image-slice:20 fill;-webkit-mask-box-image-width:20px;-webkit-mask-box-image-repeat:stretch; mask-border-source:url('../img/card-mask-sm.svg');mask-border-slice:20 fill;mask-border-width:20px;mask-border-repeat:stretch} @supports (-webkit-mask-box-image-source:none) or (mask-border-source:none){ #kennol-oil-finder.kof2 .kof-appscard .kof-appsbar{-webkit-mask-image:none;mask-image:none;border-radius:0} } /* ------------------------------------------------------------ REFLET : uniquement sur la bordure des cartes, au voisinage du curseur (la lueur est decoupee par le trace du lisere ; souris seulement) ------------------------------------------------------------ */ @supports (-webkit-mask-box-image-source:none) or (mask-border-source:none){ #kennol-oil-finder.kof2 .kof-card.kof-lit::after{background:radial-gradient(120px circle at var(--mx,-999px) var(--my,-999px),rgba(255,255,255,.62),rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 72%) border-box no-repeat; -webkit-mask-box-image-source:url('../img/card-edge.svg');-webkit-mask-box-image-slice:48 fill;-webkit-mask-box-image-width:48px;-webkit-mask-box-image-repeat:stretch; mask-border-source:url('../img/card-edge.svg');mask-border-slice:48 fill;mask-border-width:48px;mask-border-repeat:stretch} #kennol-oil-finder.kof2 .kof-sectcard.kof-lit::after,#kennol-oil-finder.kof2 .kof-appscard.kof-lit::after,#kennol-oil-finder.kof2 .kof-compcard.kof-lit::after{ -webkit-mask-box-image-source:url('../img/card-edge-sm.svg');-webkit-mask-box-image-slice:20 fill;-webkit-mask-box-image-width:20px; mask-border-source:url('../img/card-edge-sm.svg');mask-border-slice:20 fill;mask-border-width:20px} } /* ------------------------------------------------------------ PETITS ECRANS : aucun calque anime sous l'interface ------------------------------------------------------------ */ @media (max-width:820px),(max-height:500px){ #kennol-oil-finder.kof2 .kof-hexfield,#kennol-oil-finder.kof2 .kof-bg svg.trails{display:none} }