/* ============================================================================ Delahaye Motors — feuille de style (thème CLAIR, inspiré ducati.com) Relevé sur ducati.com : nav BLANCHE flottante, photos pleine largeur ALTERNÉES avec des blocs de contenu clairs, typographie légère et élégante, couleur de marque en accent RARE, boutons rectangulaires en capitales. Les jetons de marque (--accent, typo de titre) sont injectés par page. ========================================================================= */ /* ---------- POLICE CORPORATE OFFICIELLE DUCATI ---------- « Ducati Style Extended » (Dalton Maag pour Ducati Motor Holding, 2017), récupérée de ducati.com — usage concession agréée. AUTO-HÉBERGÉE (pas de Google Fonts) : la police est sous licence Ducati, elle ne doit pas être servie par un tiers. Deux graisses RÉELLES sont déclarées : Regular (400) et Bold (700), récupérées de la sauvegarde de l'ancien ducatitoulouse.fr. ⚠️ Ce sont les SEULES : ne jamais demander 300, 500 ou 900 dessus, le navigateur fabriquerait un faux maigre / faux gras. Le texte courant reste en Inter (Ducati Style Extended est une CHASSE LARGE, faite pour les titres, illisible en paragraphe). ⚠️ Marque déposée Ducati : ne JAMAIS l'appliquer aux univers KTM / CF Moto / Zontes / /* ARCHIVO — auto-heberge. Sert de police de titre aux univers NON-Ducati (la police corporate Ducati est une marque deposee, cf. plus bas). Retirer le lien Google sans rapatrier Archivo aurait fait retomber les titres KTM sur Inter, en silence. */ @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Archivo-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Archivo-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/Archivo-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/Archivo-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/static/fonts/Archivo-900-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('/static/fonts/Archivo-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* INTER — auto-heberge (voir base.html). Sous-ensembles latin + latin-ext, graisses 300 a 800 : le navigateur ne telecharge que ce que la page utilise grace a unicode-range. Regenerable par /tmp/inter.py. */ @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/Inter-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/static/fonts/Inter-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/Inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/Inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Inter-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/Inter-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/Inter-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/Inter-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/Inter-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/Inter-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} BSA / Hero ni au hub Delahaye. */ @font-face{ font-family:'DucatiStyleExt'; src:url('/static/fonts/DucatiStyleExt_W_Rg.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'DucatiStyleExt'; src:url('/static/fonts/DucatiStyleExt_W_Bd.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } :root{ --blanc:#ffffff; --creme:#f7f6f3; --creme2:#efede8; --encre:#15171a; --encre2:#41464c; --gris:#6b7076; --gris-clair:#9aa0a6; --ligne:#e3e1dc; --ligne2:#cfccc5; --noir:#111315; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--blanc);color:var(--encre);font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:1180px;margin:0 auto;padding:0 22px} .wrap-l{max-width:1400px;margin:0 auto;padding:0 22px} .ey{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--accent);margin-bottom:12px} .chapo{font-size:clamp(16px,2.1vw,19px);line-height:1.75;color:var(--encre2);max-width:62ch} p{margin-bottom:1em} p:last-child{margin-bottom:0} /* ---------- en-tête BLANC (code ducati.com) ---------- */ header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.97); backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px} .brand img{height:34px;width:auto} .links{display:none;gap:28px;font-size:12px;font-weight:700;color:var(--encre2); text-transform:uppercase;letter-spacing:.1em} .links a{padding:6px 0;position:relative;transition:color .15s} .links a:hover{color:var(--accent)} .links a.on{color:var(--encre)} .links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)} .nav-r{display:flex;align-items:center;gap:16px} .tel{display:none;font-size:13.5px;font-weight:700;color:var(--encre)} @media(min-width:1060px){.links{display:flex}.tel{display:block}} /* ---------- boutons : rectangulaires, capitales ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12px; padding:15px 26px;border-radius:var(--bouton-rayon,0);text-transform:uppercase;letter-spacing:.11em; transition:background .15s,color .15s,border-color .15s;white-space:nowrap;border:1px solid transparent;cursor:pointer} .btn-accent{background-color:var(--accent);color:#fff; background-image:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 46%,rgba(0,0,0,.16) 100%); box-shadow:0 2px 10px rgba(0,0,0,.22)} .btn-accent:hover{background-color:var(--encre)} .btn-ligne{border-color:var(--encre);color:var(--encre);background:transparent} .btn-ligne:hover{background:var(--encre);color:#fff} .btn-blanc{background:#fff;color:var(--encre)} .btn-blanc:hover{background:var(--accent);color:#fff} /* ---------- hero : photo pleine largeur, texte posé dessus ---------- */ .hero{position:relative;height:min(76vh,660px);display:flex;align-items:flex-end;overflow:hidden;background:var(--noir)} .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.62) 100%)} .hero .in{position:relative;z-index:2;width:100%;padding-bottom:44px;color:#fff} .hero .ey{color:#fff;opacity:.85} .hero h1{font-family:var(--titre-famille);font-weight:var(--titre-poids); text-transform:var(--titre-transform);letter-spacing:var(--titre-espacement); font-size:clamp(34px,6vw,64px);line-height:1.04;max-width:17ch} .hero .actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap} /* ---------- bandeau de chiffres ---------- */ .chiffres{background:var(--creme);border-bottom:1px solid var(--ligne)} .chiffres .grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne)} @media(min-width:820px){.chiffres .grid{grid-template-columns:repeat(4,1fr)}} .chiffres .c{background:var(--creme);padding:26px 18px;text-align:center} .chiffres .n{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--accent)} .chiffres .l{font-size:11.5px;color:var(--gris);margin-top:4px;text-transform:uppercase;letter-spacing:.1em} /* ---------- sections de contenu ---------- */ section{padding:76px 0} section.creme{background:var(--creme)} h2{font-family:var(--titre-famille);font-weight:var(--titre-poids); text-transform:var(--titre-transform);letter-spacing:var(--titre-espacement); font-size:clamp(26px,3.8vw,40px);line-height:1.12;margin-bottom:18px} h3{font-size:19px;font-weight:700;margin-bottom:9px;letter-spacing:-.01em} .sec-h{margin-bottom:34px;max-width:70ch} .sec-h.entre{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none} .lien{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.11em; color:var(--accent);white-space:nowrap;border-bottom:1px solid var(--accent);padding-bottom:3px} /* deux colonnes texte + image */ .duo{display:grid;grid-template-columns:1fr;gap:34px;align-items:center} @media(min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:56px}.duo.inv .txt{order:2}} .duo img{width:100%;aspect-ratio:4/3;object-fit:cover} /* trois arguments */ .trio{display:grid;grid-template-columns:1fr;gap:30px} @media(min-width:820px){.trio{grid-template-columns:repeat(3,1fr);gap:44px}} .trio .it{border-top:3px solid var(--accent);padding-top:20px} .trio p{font-size:14.5px;color:var(--encre2)} /* ---------- cartes véhicule (claires) ---------- */ .cards{display:grid;grid-template-columns:1fr;gap:22px} @media(min-width:620px){.cards{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}} .vo{background:#fff;border:1px solid var(--ligne);display:block;transition:border-color .18s,box-shadow .18s} .vo:hover{border-color:var(--accent);box-shadow:0 10px 32px rgba(0,0,0,.09)} .vo .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--creme2)} .vo .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .vo:hover .ph img{transform:scale(1.04)} .vo .tag{position:absolute;top:0;left:0;font-size:10px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;padding:7px 12px;background:var(--accent);color:#fff} .vo .b{padding:18px 18px 20px} .vo .fam{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair)} .vo h3{font-size:17.5px;font-weight:700;margin:5px 0 8px} .vo .specs{display:flex;gap:14px;font-size:13px;color:var(--gris);flex-wrap:wrap} .vo .foot{display:flex;align-items:flex-end;justify-content:space-between;margin-top:16px; padding-top:15px;border-top:1px solid var(--ligne)} .vo .prix{font-size:21px;font-weight:800;letter-spacing:-.02em} .vo .prix small{display:block;font-size:11px;font-weight:500;color:var(--gris);letter-spacing:.03em;margin-top:2px} .vo .plus{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--accent)} /* ---------- familles ---------- */ .fams{display:flex;gap:10px;flex-wrap:wrap} .fams a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; border:1px solid var(--ligne2);padding:11px 17px;color:var(--encre2);transition:.15s} .fams a:hover{border-color:var(--accent);background:var(--accent);color:#fff} /* ---------- concessions ---------- */ .conc{display:grid;grid-template-columns:1fr;gap:24px} @media(min-width:760px){.conc{grid-template-columns:1fr 1fr}} .conc .c{background:#fff;border:1px solid var(--ligne);padding:30px 28px} .conc .c h3{font-size:21px} .conc .c .adr{color:var(--encre2);font-size:14.5px;line-height:1.8} .conc .c .h{margin-top:16px;padding-top:16px;border-top:1px solid var(--ligne); font-size:12.5px;color:var(--gris)} /* ---------- bandeau final sombre ---------- */ .final{background:var(--noir);color:#fff;padding:74px 0;text-align:center} .final h2{color:#fff;margin-bottom:14px} .final p{color:#b9bcc0;max-width:52ch;margin:0 auto 26px;font-size:15.5px} .final .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---------- pied de page ---------- */ footer{background:var(--creme);border-top:1px solid var(--ligne);padding:54px 0 40px} .fgrid{display:grid;grid-template-columns:1fr;gap:30px} @media(min-width:860px){.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}} .fgrid img{height:30px;margin-bottom:14px} .fgrid h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);margin-bottom:14px} .fgrid a{display:block;color:var(--encre2);font-size:13.5px;padding:5px 0} .fgrid a:hover{color:var(--accent)} .fgrid p{font-size:13.5px;color:var(--gris);max-width:36ch;line-height:1.7} .fbot{border-top:1px solid var(--ligne);margin-top:36px;padding-top:22px;display:flex; justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--gris)} /* ============================================================================ SYSTÈME DUCATI — reproduit d'après le « Guide Site Web Distributeur » v0.9.0 (spec officielle fournie au distributeur : la reprise du design est voulue par la marque). Voir REFONTE_SITES_VITRINES.md § SPEC OFFICIELLE DUCATI. ========================================================================= */ /* --- barre supérieure fine, au-dessus de la carte de nav, posée sur la photo --- */ .topbar{position:absolute;top:0;left:0;right:0;z-index:40;padding:14px 0} .topbar .in{display:flex;justify-content:flex-end;align-items:center;gap:18px; font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff} .topbar a{opacity:.9}.topbar a:hover{opacity:1} .topbar .sep{opacity:.4} /* Un numero de telephone NE SE COUPE JAMAIS en deux lignes : illisible, et le lien d'appel devient deux blocs distincts sous le doigt. Idem pour le lien vers l'autre concession. (Signale par Thibault le 29/08/2026 sur la page Albi.) */ .topbar a[href^="tel:"], .topbar .chg-site{white-space:nowrap} /* Sur telephone, la barre porte QUATRE elements quand on est sur Albi : numero, logo du groupe et renvoi vers Toulouse. A 11 px avec .12em d'interlettrage, ca ne tient pas dans 390 px et ca repliait le numero. On resserre au lieu de replier. */ @media(max-width:620px){ .topbar{padding:10px 0} .topbar .in{gap:9px;font-size:9.5px;letter-spacing:.04em} .topbar .lien-groupe img{height:13px} .topbar .chg-site{font-size:9.5px;letter-spacing:.04em} } /* --- NAV = carte blanche arrondie FLOTTANTE sur la photo (code Ducati) --- */ .navcard{position:absolute;top:52px;left:0;right:0;z-index:50} .navcard .card{background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.18); display:flex;align-items:center;justify-content:space-between;gap:18px; padding:14px 30px;min-height:82px} .navcard .grp{display:none;gap:30px;font-size:11.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--encre2)} .navcard .grp a:hover{color:var(--accent)} .navcard .grp a.on{color:var(--accent)} .navcard .centre{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none} .navcard .centre img{height:38px;width:auto} .navcard .centre .nom{font-size:12.5px;font-weight:600;color:var(--encre);letter-spacing:.01em} .navcard .burger{display:block;font-size:22px;line-height:1;color:var(--encre); -webkit-appearance:none;appearance:none;background:none;border:0;padding:0;cursor:pointer} @media(min-width:1000px){.navcard .grp{display:flex}.navcard .burger{display:none}} /* le hero doit laisser la place à la carte */ .hero.ducati{height:min(88vh,760px)} .hero.ducati .in{padding-bottom:56px} .hero.ducati h1{font-weight:300;letter-spacing:-.01em} .hero .chevron{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:3; color:#fff;opacity:.85;font-size:20px} /* --- titre de section CENTRÉ encadré de deux filets (code Ducati) --- */ .sec-titre{display:flex;align-items:center;gap:22px;justify-content:center;margin-bottom:38px} .sec-titre::before,.sec-titre::after{content:"";height:1px;background:var(--ligne2);flex:1;max-width:170px} .sec-titre span{font-size:15px;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--gris-clair);white-space:nowrap} /* --- BANNIÈRE à liseré rouge (motif récurrent Ducati) --- */ .banniere{display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--ligne); border-left:4px solid var(--accent);overflow:hidden} @media(min-width:760px){.banniere{grid-template-columns:1fr 1fr}} .banniere .txt{padding:34px 32px;display:flex;flex-direction:column;justify-content:center} .banniere h3{font-size:22px;font-weight:700;margin-bottom:10px} .banniere p{font-size:14.5px;color:var(--encre2);margin-bottom:18px} .banniere .cta{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);align-self:flex-start;border-bottom:2px solid var(--accent);padding-bottom:3px} .banniere img{width:100%;height:100%;min-height:220px;object-fit:cover} .banniere.inv .txt{order:2} /* --- cartes modèles (gamme) --- */ .modeles{display:grid;grid-template-columns:1fr 1fr;gap:26px} @media(min-width:900px){.modeles{grid-template-columns:repeat(4,1fr)}} .modeles .m{text-align:center} .modeles .m img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--creme)} .modeles .m .n{font-size:15px;font-weight:600;margin-top:14px} .modeles .m .d{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-top:6px;display:inline-block} /* --- bandeau noir de pied (code Ducati) --- */ .bandeau-marque{background:#0d0e10;color:#fff;padding:26px 0;text-align:center} .bandeau-marque .in{display:flex;align-items:center;justify-content:center;gap:18px; font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8d9095} .bandeau-marque strong{color:#fff;font-weight:800;letter-spacing:.2em} .bandeau-marque .bar{width:1px;height:20px;background:#3a3d42} /* ============================================================================ MISE EN PAGE FORMAT DUCATI (page marque) — d'après le Guide Distributeur ========================================================================= */ .pt0{padding-top:0} .centre-cta{text-align:center;margin-top:40px} /* --- COUVERTURE plein écran, nom du distributeur posé en bas --- */ .couverture{position:relative;height:min(90vh,780px);overflow:hidden;background:var(--noir)} .couverture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%} .couverture .voile{position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.66) 100%)} .couverture .in{position:absolute;left:0;right:0;bottom:0;padding-bottom:54px;z-index:2} /* Le nom du distributeur en couverture porte SON poids : sur les maquettes Ducati il est plus gras que les titres de section (retour Thibault 2026-08-25). Repli sur --titre-poids pour les marques qui n'ont pas de graisse dédiée. */ /* `nom-dist` est porte par un

depuis le 2026-08-27 : on neutralise les marges par defaut du navigateur pour que le rendu soit identique. */ .nom-dist{margin:0;color:#fff;font-family:var(--titre-famille); font-weight:var(--titre-poids-couverture,var(--titre-poids)); text-transform:var(--titre-transform);letter-spacing:var(--titre-espacement); font-size:clamp(30px,5.5vw,58px);line-height:1.05} .nom-dist span{color:var(--accent-clair)} .couverture .chevron{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3; color:#fff;font-size:34px;line-height:1;opacity:.85;text-decoration:none;animation:bob 2s infinite} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}} /* --- CONTENU MIS EN AVANT (slider) : image + cadre blanc superposé --- */ .mea{position:relative;background:var(--creme);padding:34px 0 46px} .mea img{width:100%;aspect-ratio:1330/510;object-fit:cover} .mea .cadre{position:relative;margin:-90px 20px 0;background:#fff;border-left:4px solid var(--accent); padding:26px 30px;max-width:520px;box-shadow:0 14px 40px rgba(0,0,0,.12)} @media(min-width:760px){.mea .cadre{margin:-110px 0 0 60px}} .mea .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.16em; text-transform:uppercase;color:var(--accent);margin-bottom:10px} .mea h2{font-size:clamp(22px,3vw,30px);margin-bottom:10px} .mea p{font-size:14.5px;color:var(--encre2);margin-bottom:18px} /* --- SERVICE : image + texte + onglets --- */ .service{display:grid;grid-template-columns:1fr;gap:36px;align-items:center} @media(min-width:880px){.service{grid-template-columns:1fr 1fr;gap:56px}} .service img{width:100%;aspect-ratio:1600/1000;object-fit:cover} .service h2{margin-bottom:16px} .service p{color:var(--encre2);font-size:14.5px;margin-bottom:12px} .onglets{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px} /* --- HISTOIRE : image portrait 665×760 + texte --- */ .histoire{display:grid;grid-template-columns:1fr;gap:36px;align-items:center} @media(min-width:880px){.histoire{grid-template-columns:0.8fr 1fr;gap:56px}} .histoire img{width:100%;aspect-ratio:665/760;object-fit:cover;max-height:560px} .histoire h2{margin-bottom:16px} .histoire p{color:var(--encre2);font-size:14.5px;margin-bottom:12px} /* concessions : liens */ .conc .liens{margin-top:16px;display:flex;gap:18px} .conc .c h3 span{color:var(--gris);font-weight:400;font-size:15px} /* --- FINAL plein écran --- */ .final{position:relative;overflow:hidden;background:var(--noir);min-height:420px;display:flex;align-items:center} .final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.55} .final .voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.25))} .final .in{position:relative;z-index:2;width:100%;padding:70px 0;color:#fff} .final h2{color:#fff;margin-bottom:14px} .final p{color:#d7d9dc;max-width:52ch;margin-bottom:24px;font-size:15px} .final .actions{display:flex;gap:12px;flex-wrap:wrap} /* --- EN-TÊTE FLOTTANT : ne prend AUCUNE hauteur dans le flux (height:0), ses enfants se superposent à la couverture — c'est ce qui donne la carte posée sur la photo. --- */ .entete{position:sticky;top:0;z-index:60;height:0;overflow:visible} .topbar{position:static;padding:16px 0 0} .topbar .in{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)} .navcard{position:static;padding-top:14px} .navcard .card{position:relative} .navcard .grp{flex:1} .navcard .grp.gauche{justify-content:flex-start} .navcard .grp.droite{justify-content:flex-end} /* la couverture démarre en haut de page ; on lui réserve la hauteur de l'en-tête en interne */ .couverture{padding-top:150px} @media(max-width:999px){.couverture{padding-top:120px}} /* au défilement, la carte devient compacte et opaque pour rester lisible sur fond clair */ .entete.compacte .topbar{display:none} .entete.compacte .navcard{padding-top:0} .entete.compacte .navcard .card{border-radius:0;min-height:66px;box-shadow:0 3px 18px rgba(0,0,0,.12)} .entete.compacte .centre img{height:28px} .entete.compacte .centre .nom{display:none} /* bouclier de marque dans la nav : plus haut que le wordmark du groupe */ .navcard .centre img{height:46px} .entete.compacte .centre img{height:32px} /* logo d'enseigne (bouclier + ville) : format vertical, plus haut */ .navcard .centre img{height:60px} .entete.compacte .centre img{height:40px} /* ⚠️ PLAFOND DE LARGEUR OBLIGATOIRE. La hauteur de 60 px a été réglée sur le logo Ducati, qui est VERTICAL. Un logo en bandeau (Zontes fait 7,6:1, CFMOTO 4,7:1) atteignait alors 450 px de large : il chassait le bouton « Demander un essai » sur deux lignes et écrasait la barre. Constaté à l'œil le 2026-09-06. */ .navcard .centre img{max-width:172px;object-fit:contain} /* ⚠️ Les libellés de nav ne doivent JAMAIS passer à la ligne : « Demander un essai » se coupait en deux sous les logos en bandeau, ce qui déséquilibrait toute la barre. */ .navcard .grp a{white-space:nowrap} .entete.compacte .centre img{max-width:150px} /* Le nom de l'enseigne s'affiche SAUF quand le logo le porte déjà (cas Ducati, dont le fichier contient « Toulouse » / « Albi »). Sans cette bascule, les univers KTM, CF Moto et Zontes perdaient la mention de la ville sous le logo. */ .entete.logo-ville .navcard .centre .nom{display:none} .fgrid img{height:64px} /* bannière de page intérieure : moins haute que la couverture d'accueil */ /* ⚠️ RATIO, PAS UNE HAUTEUR FIXE : une bande fixe rogne d'autant plus que l'ecran est large (4,35:1 a 2000 px, d'ou les pilotes decapites sur la page Contact). Avec un ratio, le cadrage est identique partout — ce qu'on valide est ce qui s'affiche. */ /* ⚠️ `aspect-ratio` + `min-height` FAIT DEBORDER : sur telephone la largeur du bloc etait recalculee depuis la hauteur minimale (938 px pour une fenetre de 390) et la page defilait lateralement. On borne donc la largeur, et sur petit ecran on revient a une hauteur simple — la fenetre y est etroite, le recadrage n'a rien d'extreme. */ /* ⚠️ Sur tres grand ecran la bande paraissait trop large (Thibault) : le ratio se degradait des que la hauteur butait sur son plafond. On adoucit le ratio ET on borne la LARGEUR — au-dela, la banniere se centre au lieu de s'etirer. */ /* ne doit pas introduire de boite : sans `display:contents` il casse le positionnement absolu de l'image dans la couverture. */ .couverture.banniere-page picture{display:contents} .couverture.banniere-page{height:auto;width:100%;aspect-ratio:5/2; max-width:2100px;margin-inline:auto;max-height:min(78vh,760px)} @media(max-width:760px){ .couverture.banniere-page{aspect-ratio:auto;height:min(48vh,340px)} } .couverture.banniere-page .nom-dist{font-size:clamp(26px,4.4vw,46px)} .texte-seul .txt{max-width:74ch;margin:0 auto} /* ============================================================================ PAGE GAMME (Modèles) — reprend la logique de ducati.fr : sommaire de familles, puis une section par famille avec des cartes modèle (specs + prix à partir de). ⚠️ C'est un CATALOGUE DE MODÈLES, jamais un stock de véhicules neufs (cf. GUIDELINES_DUCATI_SITE.md §5.1). Aucune notion de disponibilité ici. ========================================================================= */ /* L'en-tête est en height:0 et FLOTTE au-dessus du contenu (cf. .entete) : toute page qui ne commence pas par une photo doit lui réserver sa hauteur, comme .couverture. */ .gamme-tete{padding:150px 0 34px;background:var(--blanc)} @media(max-width:999px){.gamme-tete{padding-top:120px}} /* sur fond clair, la barre du haut (blanche + ombre portée) devient illisible */ .entete.claire .topbar .in{color:var(--encre2);text-shadow:none} .entete.claire .topbar .in a{opacity:1} /* Barre du haut CLAIRE : le logo du groupe doit redevenir SOMBRE. Sans cette regle il restait blanc sur fond blanc, donc invisible (26/08/2026). */ .entete.claire .lien-groupe img{filter:brightness(0);opacity:.75} .entete.claire .lien-groupe:hover img{opacity:1} .gamme-tete h1{font-family:var(--titre-famille);font-weight:var(--titre-poids); letter-spacing:var(--titre-espacement);font-size:clamp(30px,5vw,52px);line-height:1.06; margin-bottom:16px;max-width:20ch} .gamme-tete .actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap} /* sommaire des familles, collant sous l'en-tête */ .fam-nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96); border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne); backdrop-filter:blur(6px)} .fam-nav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none} .fam-nav .wrap::-webkit-scrollbar{display:none} .fam-nav a{padding:14px 14px;font-size:12px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--gris);white-space:nowrap;border-bottom:2px solid transparent} .fam-nav a:hover{color:var(--encre);border-bottom-color:var(--accent)} /* titre de section centré encadré de deux filets (motif Ducati) */ .fam{padding:56px 0} .fam.creme{background:var(--creme)} .sec-t{display:flex;align-items:center;gap:18px;margin-bottom:34px} .sec-t::before,.sec-t::after{content:"";height:1px;background:var(--ligne2);flex:1} .sec-t span{font-family:var(--titre-famille);font-weight:var(--titre-poids); font-size:clamp(20px,3vw,30px);color:var(--gris);letter-spacing:.02em} .modeles{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:640px){.modeles{grid-template-columns:repeat(2,1fr)}} @media(min-width:1040px){.modeles{grid-template-columns:repeat(3,1fr)}} .mod{background:var(--blanc);border:1px solid var(--ligne);padding:22px; display:flex;flex-direction:column} .fam.creme .mod{background:var(--blanc)} .mod-img{margin:-22px -22px 16px;background:var(--creme2)} .mod-img img{width:100%;aspect-ratio:630/390;object-fit:contain} .mod h3{font-family:var(--titre-famille);font-weight:var(--titre-poids); font-size:21px;letter-spacing:0;margin-bottom:14px} .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne); border:1px solid var(--ligne);margin-bottom:16px} .specs>div{background:var(--blanc);padding:10px 8px;text-align:center} .specs dt{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gris-clair); margin-bottom:3px} .specs dd{font-size:14px;font-weight:700;color:var(--encre)} .prix{margin:0 0 16px;line-height:1.4} .prix .ap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris)} .prix strong{font-size:20px;font-weight:800;letter-spacing:-.01em;display:inline-block} .prix .mens{display:block;font-size:12px;color:var(--gris)} .mod-cta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px} .btn.pt{padding:9px 15px;font-size:11px} .gamme-pied{padding:64px 0 72px;background:var(--noir);color:#fff;text-align:center} .gamme-pied h2{color:#fff;margin-bottom:14px} .gamme-pied .chapo{color:#c8c5be;margin:0 auto;max-width:60ch} .gamme-pied .actions{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap} .gamme-pied .avert{margin-top:30px;font-size:11.5px;color:#8b8880;max-width:80ch; margin-left:auto;margin-right:auto;line-height:1.6} /* --- PANNEAU DES FAMILLES sous la nav (grille de ducati.fr) --------------- */ /* ⚠️ Le panneau est un FRÈRE de .card, pas un enfant : sans position:relative ici, il s'ancrait sur .entete — qui est en height:0 — donc top:100% valait 0 et le panneau recouvrait la nav (logo compris). L'ancre doit être le conteneur de la carte. */ .navcard .wrap-l{position:relative} .pan{position:absolute;left:22px;right:22px;top:calc(100% + 8px);z-index:70; background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22); padding:26px 30px 20px} .pan-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} @media(min-width:640px){.pan-grille{grid-template-columns:repeat(4,1fr)}} @media(min-width:1000px){.pan-grille{grid-template-columns:repeat(7,1fr)}} .pan-fam{display:flex;flex-direction:column;align-items:center;gap:5px; padding:14px 8px;border-radius:10px;text-align:center} .pan-fam:hover{background:var(--creme)} .pan-fam img{height:56px;width:100%;object-fit:contain} /* emplacement réservé tant que la banque de visuels officiels n'est pas branchée */ .pan-vide{height:56px;width:100%;border-radius:8px;background:var(--creme2)} .pan-nom{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--encre)} .pan-nb{font-size:10.5px;color:var(--gris-clair);letter-spacing:.04em} .pan-pied{display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:16px;padding-top:16px;border-top:1px solid var(--ligne)} .navcard .grp a.deplie{color:var(--accent)} @media(max-width:999px){.pan{padding:18px 16px 14px}.pan-fam img,.pan-vide{height:44px}} /* --- BLOC ESSAIS (page Contact) : ce qu'on peut faire essayer, par concession ------- */ .bloc-essais{padding:56px 0;background:var(--creme)} .essais-sites{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:760px){.essais-sites{grid-template-columns:repeat(2,1fr)}} .essais-site{background:#fff;border:1px solid var(--ligne);border-left:4px solid var(--accent); padding:22px 24px} .essais-site h3{font-family:var(--titre-famille);font-weight:var(--titre-poids); font-size:19px;margin-bottom:12px} .essais-site ul{list-style:none;margin:0 0 12px;padding:0;columns:1} @media(min-width:520px){.essais-site ul{columns:2;column-gap:22px}} .essais-site li{font-size:14px;padding:5px 0;border-bottom:1px solid var(--ligne); break-inside:avoid;color:var(--encre2)} .essais-nb{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin:0} .bloc-essais .actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap} .bloc-essais .avert{margin-top:16px;font-size:11.5px;color:var(--gris);line-height:1.6} /* --- MINI-PAGE MODELE ------------------------------------------------------ */ .mod-hero{padding:150px 0 44px;background:var(--creme)} @media(max-width:999px){.mod-hero{padding-top:120px}} .fil{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--gris);display:inline-block;margin-bottom:20px} .fil:hover{color:var(--accent)} .mod-hero-in{display:grid;grid-template-columns:1fr;gap:26px;align-items:center} @media(min-width:900px){.mod-hero-in{grid-template-columns:1fr 1.15fr;gap:46px}} .mod-hero h1{font-family:var(--titre-famille);font-weight:var(--titre-poids); letter-spacing:var(--titre-espacement);font-size:clamp(30px,5vw,50px);line-height:1.05; margin-bottom:16px} .mod-hero .prix{margin-bottom:22px} .mod-hero .prix strong{font-size:26px} .mod-hero-img img{width:100%;aspect-ratio:3/2;object-fit:contain} .mod-hero .actions{display:flex;gap:10px;flex-wrap:wrap} .mod-specs{padding:40px 0 46px;background:#fff} .specs.grand{grid-template-columns:repeat(3,1fr);max-width:640px} .specs.grand>div{padding:20px 10px} .specs.grand dt{font-size:10.5px} .specs.grand dd{font-size:21px} .mod-specs .avert{margin-top:20px;font-size:11.5px;color:var(--gris);line-height:1.6;max-width:80ch} /* carte de modele entierement cliquable (sommaire + « reste de la famille ») */ .mod{position:relative} .mod-lien{position:absolute;inset:0;z-index:1} .mod h3,.mod .specs,.mod .prix,.mod .mod-cta,.mod .mod-img{position:relative;z-index:2} .mod:hover{border-color:var(--ligne2);box-shadow:0 8px 26px rgba(0,0,0,.07)} /* --- 2e niveau du menu : les modeles d'une famille -------------------------- */ .pan-fam{background:none;border:0;font:inherit;cursor:pointer;width:100%} .pan-retour{background:none;border:0;font:inherit;cursor:pointer;color:var(--gris); font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:0 0 14px} .pan-retour:hover{color:var(--accent)} .pan-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:6px} @media(min-width:640px){.pan-liste{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.pan-liste{grid-template-columns:repeat(4,1fr)}} .pan-mod{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px} .pan-mod:hover{background:var(--creme)} .pan-mod img{height:44px;width:66px;object-fit:contain;flex:none} .pan-vide.petit{height:44px;width:66px;flex:none;border-radius:6px} .pan-mod-n{font-size:13px;font-weight:600;color:var(--encre);line-height:1.25} .pan-mod-p{font-size:11px;color:var(--gris-clair);display:block} .pan-mod>span:not(.pan-vide){display:flex;flex-direction:column;gap:2px} /* --- BANNIERE dynamique en tete de mini-page --------------------------------- */ /* Le bandeau imposait une bande de 520px a une image 16/9 : object-fit:cover la RECOUPAIT donc une seconde fois, apres le recadrage fait a la generation, et tranchait les motos (Diavel, 26/08/2026). On adopte le ratio de l image : plus aucun recadrage a l affichage, rien ne peut etre coupe. */ .mod-banniere{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--noir)} /* object-position : on garde le BAS de la photo. Par defaut (centre) le bandeau tranchait les motos, qui sont presque toujours dans la moitie basse du cadre (constate sur le Diavel le 26/08/2026). */ .mod-banniere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 68%; object-position:center 45%} .mod-banniere .voile{position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.60) 100%)} .mod-banniere .in{position:absolute;left:0;right:0;bottom:0;padding-bottom:40px;z-index:2} .mod-banniere .ey{color:#fff;opacity:.85} .mod-banniere .nom-dist{color:#fff} .mod-hero.apres-banniere{padding-top:44px} /* titre repris par la bannière : on le garde pour les lecteurs d'écran et le référencement */ .visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); white-space:nowrap} /* --- TIROIR MOBILE : sans lui, le burger n'ouvrait rien et la nav etait inaccessible --- */ @media(max-width:999px){ /* ⚠️ Le tiroir est deplace dans a l'ouverture (fiabilite du defilement iOS) : il n'est alors plus descendant de .entete. Les regles doivent viser #panneau-modeles directement, pas « .entete.menu-mobile .pan ». */ body.tiroir #panneau-modeles{position:fixed;left:0;right:0;top:auto;bottom:0; max-height:84vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch; overscroll-behavior:contain;border-radius:16px 16px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.28);padding:18px 16px 24px;z-index:9000;background:#fff} body.tiroir #panneau-modeles .pan-grille{grid-template-columns:repeat(2,1fr)} body.tiroir #panneau-modeles .pan-liste{grid-template-columns:1fr} .entete.menu-mobile .navcard .card{flex-wrap:wrap;row-gap:6px} /* les groupes de liens, masques par defaut sous 1000px, reapparaissent dans le tiroir */ .entete.menu-mobile .navcard .grp{display:flex;flex-direction:column;align-items:flex-start; gap:0;width:100%;order:3;border-top:1px solid var(--ligne);padding-top:6px} .entete.menu-mobile .navcard .grp a{padding:13px 2px;width:100%;font-size:13px; border-bottom:1px solid var(--ligne)} .entete.menu-mobile .navcard .grp a:last-child{border-bottom:0} /* VOILE : assombrit la page derriere le tiroir. Il ne sert pas qu'a faire joli — c'est lui qui REND VISIBLE le fait qu'on peut toucher a cote pour sortir, et il empeche d'atteindre par megarde un lien de la page masquee. Il capte le clic : l'evenement se declenche sur , que le gestionnaire ci-dessus fait refermer. */ body.tiroir::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45); z-index:8500} /* l'en-tete repasse AU-DESSUS du voile, sinon la croix serait grisee et intouchable */ body.tiroir .entete{position:relative;z-index:8600} /* Le burger devient une VRAIE CROIX. Avant il pivotait d'un quart de tour et donnait trois barres verticales : ni un menu, ni une fermeture. Possible depuis que les barres sont dessinees en CSS et non plus heritees du caractere ☰. */ .entete.menu-mobile .navcard .burger{transform:none} .entete.menu-mobile .navcard .burger::before{box-shadow:none; transform:translateY(-50%) rotate(45deg)} .entete.menu-mobile .navcard .burger::after{content:"";position:absolute;top:50%;left:0; width:var(--larg-burger);height:2.5px;border-radius:2px;background:currentColor; transform:translateY(-50%) rotate(-45deg)} /* MOBILE — burger a GAUCHE, enseigne a DROITE (demande Thibault 29/08/2026). La carte est en `justify-content:space-between` et ne montre que ces deux elements sous 1000 px : il suffit d'inverser leur `order`, sans toucher au HTML (donc sans rien changer au bureau, ou les deux groupes de liens reapparaissent). */ .navcard .burger{order:-1} .navcard .centre{order:2} /* Agrandi : le glyphe passe de 22 a 30 px et la cible tactile atteint 48 px, au-dessus du minimum de 44 px recommande pour le pouce. `flex:none` empeche la carte de l'ecraser, `justify-content` recentre le glyphe dans sa cible elargie. */ .navcard .burger{flex:none;min-width:48px;min-height:48px;position:relative; font-size:0;margin-left:-2px;--larg-burger:28px} .navcard .burger::before{content:"";position:absolute;top:50%;left:0; transform:translateY(-50%);width:var(--larg-burger);height:2.5px;border-radius:2px; background:currentColor;box-shadow:0 -8px 0 currentColor,0 8px 0 currentColor} /* le panneau des familles devient une feuille pleine largeur, defilable */ .entete.menu-mobile .pan{position:fixed;left:0;right:0;top:auto;bottom:0; max-height:62vh;overflow-y:auto;border-radius:16px 16px 0 0; box-shadow:0 -14px 40px rgba(0,0,0,.28);padding:18px 16px 24px} .entete.menu-mobile .pan-grille{grid-template-columns:repeat(2,1fr)} .entete.menu-mobile .pan-fam{padding:10px 6px} .entete.menu-mobile .pan-nom{font-size:10.5px;word-break:break-word;hyphens:auto} .entete.menu-mobile .pan-fam img,.entete.menu-mobile .pan-vide{height:48px} /* rien ne doit deborder du tiroir */ .entete.menu-mobile .pan{overflow-x:hidden} .entete.menu-mobile .pan-liste{grid-template-columns:1fr} .entete.menu-mobile .pan-mod{padding:12px 10px} } /* ⚠️ L'attribut HTML `hidden` ne masque que via la feuille du navigateur (`[hidden]{display:none}`), qu'une regle de meme specificite ecrase — c'est ce qui arrivait a `.pan-grille{display:grid}` : `hidden` etait bien pose mais la grille des familles RESTAIT AFFICHEE, empilee au-dessus de la liste des modeles. Sur mobile, le panneau devenait illisible et le defilement incomprehensible. Constate le 2026-08-26. */ [hidden]{display:none !important} @media(max-width:999px){ /* defilement tactile fiable dans la feuille : sans overscroll-behavior, le geste « fuit » vers la page derriere des qu'on atteint le haut ou le bas de la liste */ .entete.menu-mobile .pan{-webkit-overflow-scrolling:touch;overscroll-behavior:contain; max-height:72vh} } /* --- OCCASIONS : mise en avant unique sur l'accueil + page dediee ------------- */ .vo-mea{padding:60px 0;background:var(--creme)} .vo-mea-in{display:grid;grid-template-columns:1fr;gap:26px;align-items:center} @media(min-width:900px){.vo-mea-in{grid-template-columns:1.1fr 1fr;gap:48px}} .vo-mea-ph{position:relative;display:block;overflow:hidden} .vo-mea-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s} .vo-mea-ph:hover img{transform:scale(1.03)} .vo-mea-ph .tag{position:absolute;top:14px;left:14px;background:var(--accent);color:#fff; font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px} .vo-mea h2{font-family:var(--titre-famille);font-weight:var(--titre-poids); font-size:clamp(24px,3.4vw,36px);line-height:1.12;margin-bottom:14px} .vo-mea .actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap} .vo-carte .mod-img{position:relative} .vo-carte .mod-img img{aspect-ratio:4/3;object-fit:cover} .vo-carte .tag{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff; font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px} .vo-site{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris); margin-bottom:6px} .vo-carte .specs{grid-template-columns:repeat(2,1fr)} .vo-carte .prix strong{font-size:19px} /* --- Le tiroir mobile contient TOUT : liens, puis familles, puis modeles ------- */ .pan-nav, .pan-titre{display:none} /* desktop : la nav est dans la carte */ @media(max-width:999px){ /* on n'etale plus les liens dans la carte : ils seraient recouverts par la feuille */ .entete.menu-mobile .navcard .grp{display:none} /* poignee de feuille : indique que ca se tire et que ca defile */ #panneau-modeles::before{content:"";display:block;width:38px;height:4px;border-radius:2px; background:var(--ligne2);margin:-6px auto 14px} .pan-nav{display:flex;flex-direction:column;margin:0 0 4px} .pan-nav a{position:relative;padding:15px 30px 15px 2px;font-size:15px;font-weight:600; color:var(--encre);border-bottom:1px solid var(--ligne);letter-spacing:-.01em} .pan-nav a::after{content:"›";position:absolute;right:8px;top:50%; transform:translateY(-52%);color:var(--gris-clair);font-size:19px;font-weight:400} .pan-nav a:active{background:var(--creme)} .pan-nav a.tel{color:var(--accent);font-weight:700;letter-spacing:.03em;border-bottom:0} .pan-nav a.tel::after{content:"›"} .pan-titre{display:block;font-size:10px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gris-clair);padding:20px 2px 12px} /* tuiles de famille : une vraie carte, image cadree et titre lisible */ body.tiroir #panneau-modeles .pan-grille{gap:10px} body.tiroir #panneau-modeles .pan-fam{background:var(--creme);border-radius:12px; padding:0 0 12px;overflow:hidden;gap:0;text-align:center} body.tiroir #panneau-modeles .pan-fam img{height:82px;width:100%;object-fit:cover; display:block;margin-bottom:10px} body.tiroir #panneau-modeles .pan-vide{height:82px;width:100%;border-radius:0; margin-bottom:10px} body.tiroir #panneau-modeles .pan-nom{font-size:11.5px;letter-spacing:.08em; line-height:1.25;padding:0 6px} body.tiroir #panneau-modeles .pan-nb{font-size:10.5px;margin-top:3px} /* 2e niveau : lignes lisibles avec vignette */ body.tiroir #panneau-modeles .pan-mod{border-bottom:1px solid var(--ligne); border-radius:0;padding:11px 4px} body.tiroir #panneau-modeles .pan-mod img{height:46px;width:70px;border-radius:6px; object-fit:cover} body.tiroir #panneau-modeles .pan-mod-n{font-size:14px} body.tiroir #panneau-modeles .pan-retour{padding:4px 2px 14px;font-size:11px} .entete.menu-mobile .pan{max-height:84vh} } /* --- Filtres de marque de la page occasions ---------------------------------- */ .vo-filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .vo-f{background:#fff;border:1px solid var(--ligne);cursor:pointer;font:inherit; font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--encre2);padding:9px 14px;border-radius:999px} .vo-f span{color:var(--gris-clair);font-weight:600;margin-left:3px} .vo-f:hover{border-color:var(--ligne2)} .vo-f.on{background:var(--accent);border-color:var(--accent);color:#fff} .vo-f.on span{color:rgba(255,255,255,.75)} .vo-vide{color:var(--gris);font-size:14px;padding:20px 0} /* ───────────────────────────────────────────────────────────────────────────── FORMULAIRE DE CONTACT (bloc « formulaire » de page.html) Site statique : la soumission part en POST vers /api/contact. Mobile d'abord — une seule colonne sous 720px, cibles tactiles ≥ 46px. ───────────────────────────────────────────────────────────────────────────── */ .form-contact{max-width:820px;margin:34px auto 0} .form-contact .fgrid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:720px){.form-contact .fgrid{grid-template-columns:1fr 1fr}} .form-contact label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--encre2)} .form-contact label.plein{margin-top:18px} .form-contact .req{color:var(--accent)} .form-contact input,.form-contact select,.form-contact textarea{ display:block;width:100%;margin-top:7px;padding:13px 14px; font:inherit;font-size:16px; /* 16px : evite le zoom automatique d'iOS au focus */ text-transform:none;letter-spacing:normal;font-weight:400;color:var(--encre); background:var(--blanc);border:1px solid #d7d4cd;border-radius:3px; transition:border-color .15s,box-shadow .15s} .form-contact textarea{resize:vertical;min-height:130px} .form-contact input:focus,.form-contact select:focus,.form-contact textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(204,0,0,.12)} .form-contact input:user-invalid,.form-contact textarea:user-invalid{border-color:#c0392b} /* Pot de miel : invisible a l'oeil, mais rempli par les robots. On evite display:none, que certains robots savent detecter. ⚠️ NE PAS revenir a « left:-9999px » : ca creait un debordement horizontal de la page sur mobile (scrollWidth > clientWidth, constate en emulation iPhone le 26/08/2026). Le motif ci-dessous (clip-path) sort l'element du rendu SANS toucher a la mise en page. */ /* ⚠️ REGLE GENERALE, pas limitee au formulaire de contact. Elle l'etait, et le pot de miel ajoute a la NEWSLETTER le 28/08 serait apparu comme un champ « Societe » bien visible — exactement ce que Thibault avait demande de retirer. Un piege qui se voit n'est plus un piege : c'est un champ de trop. */ .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap} .form-contact .consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px; text-transform:none;letter-spacing:normal;font-size:13.5px;font-weight:400; line-height:1.6;color:var(--encre2)} .form-contact .consent input{width:auto;margin:2px 0 0;flex:0 0 auto; min-width:18px;min-height:18px;accent-color:var(--accent)} .form-contact .factions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px; align-items:center} .form-contact button{cursor:pointer;border:0;font:inherit} .form-contact button[disabled]{opacity:.55;cursor:progress} .form-contact .fmsg{margin:16px 0 0;font-size:14.5px;line-height:1.6;min-height:1.2em} .form-contact .fmsg.ok{color:#1a7f4b;font-weight:600} .form-contact .fmsg.ko{color:#c0392b;font-weight:600} /* Titres de section sur petit écran : le « white-space:nowrap » ci-dessus (voulu pour garder le motif « ——— TITRE ——— » de la charte Ducati sur une seule ligne) faisait DÉBORDER la page dès que le titre était long — ex. « Comment pouvons-nous vous aider ? » qui atteignait 398 px pour un écran de 390 (constaté en émulation iPhone le 26/08/2026). On autorise le retour à la ligne sous 760 px et on resserre un peu l'interlettrage : le motif reste lisible, la page ne défile plus latéralement. */ @media(max-width:760px){ .sec-titre{gap:12px} .sec-titre span{white-space:normal;text-align:center;letter-spacing:.12em;font-size:13px} } /* --- Bloc « Ducati Approved » de la page Occasions --- */ .approved{background:var(--creme);padding:70px 0} .approved-t{text-align:center;margin:0 0 14px} .approved-c{margin:0 auto 44px;text-align:center} /* Variante 4 colonnes de .trio (le label a quatre arguments, pas trois). */ .trio.quatuor{grid-template-columns:1fr} @media(min-width:640px){.trio.quatuor{grid-template-columns:repeat(2,1fr);gap:34px}} @media(min-width:1080px){.trio.quatuor{grid-template-columns:repeat(4,1fr);gap:32px}} .approved-serv{margin-top:52px;padding:26px 28px;background:var(--blanc); border-left:3px solid var(--accent)} .approved-serv h3{margin:0 0 10px;font-size:17px} .approved-serv p{margin:0;font-size:14.5px;color:var(--encre2);line-height:1.7} .approved-res{margin:26px auto 0;max-width:74ch;text-align:center; font-size:13.5px;line-height:1.7;color:var(--gris)} .approved .actions{justify-content:center;margin-top:30px} /* Page modèle SANS photo de corps : la classe .sans-photo existait dans le gabarit mais n'avait aucune règle — la grille restait à deux colonnes et laissait un grand vide à droite (constaté le 26/08/2026, après le retrait de la photo dupliquée). On repasse sur une colonne : le prix et les boutons remontent naturellement. */ .mod-hero.sans-photo .mod-hero-in{grid-template-columns:1fr;max-width:760px} /* --- Liste des VERSIONS d'une famille (fiche famille, depuis le 26/08/2026) --- Une ligne par version : nom, specs, prix. Sur mobile la ligne s'empile ; le prix reste en bas a droite pour rester lisible d'un coup d'oeil. */ .fam-versions{padding:64px 0;background:var(--blanc)} .vers{border-top:1px solid var(--ligne2)} .vers-l{display:grid;grid-template-columns:1fr;gap:10px;padding:22px 0; border-bottom:1px solid var(--ligne2);align-items:center} @media(min-width:860px){ .vers-l{grid-template-columns:1.1fr 1.5fr auto;gap:30px} } .vers-n h3{margin:0;font-size:19px;font-family:var(--titre-famille); font-weight:var(--titre-poids);letter-spacing:var(--titre-espacement)} .vers-s{display:block;margin-top:3px;font-size:12.5px;color:var(--gris)} .vers-neuf{display:inline-block;margin-top:6px;padding:2px 8px;border-radius:2px; background:var(--accent);color:#fff;font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase} .vers-specs{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0} .vers-specs div{margin:0} .vers-specs dt{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--gris-clair);margin:0} .vers-specs dd{margin:2px 0 0;font-size:14.5px;color:var(--encre)} .vers-p{font-size:19px;white-space:nowrap} @media(min-width:860px){.vers-p{text-align:right}} .vers-p .ap{font-size:13px;color:var(--gris)} .fam-versions .avert{margin-top:26px} /* Carte de famille SANS visuel (le visuel a ete retire parce qu'il montrait la mauvaise moto) : sans cette regle la carte s'etire a la hauteur de ses voisines et laisse un grand blanc. On la laisse remonter en haut de la grille. */ .mod.sans-img{align-self:start} /* --- Filtres de la page Occasions (26/08/2026) --- */ .vo-selects{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end; margin:18px 0 6px;padding:18px 0;border-top:1px solid var(--ligne2); border-bottom:1px solid var(--ligne2)} .vo-selects label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--gris)} .vo-selects select{display:block;margin-top:6px;padding:9px 11px;font:inherit;font-size:15px; text-transform:none;letter-spacing:normal;font-weight:400;color:var(--encre); background:var(--blanc);border:1px solid #d7d4cd;border-radius:3px;min-width:170px} .vo-selects select:focus{outline:none;border-color:var(--accent)} .vo-raz{align-self:flex-end;background:none;border:0;cursor:pointer;font:inherit; font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--accent);padding:10px 0;text-decoration:underline} .vo-compte{margin:12px 0 22px;font-size:13.5px;color:var(--gris)} @media(max-width:700px){ .vo-selects{gap:12px} .vo-selects label{flex:1 1 46%} .vo-selects select{min-width:0;width:100%;font-size:16px} /* 16px : pas de zoom iOS */ .vo-raz{flex:1 1 100%;text-align:left} } /* --- Bandeau modele avec bloc d'info EN SURIMPRESSION (modele ducati.com, 26/08/2026) --- */ .mod-banniere.avec-info{display:block} .ban-voile{position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 34%,rgba(0,0,0,0) 62%)} .ban-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 0 40px} .ban-info .wrap{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end; justify-content:space-between} .ban-txt{color:#fff;max-width:60ch} .ban-ey{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.86);margin-bottom:10px} .ban-info h1{margin:0;color:#fff;font-family:var(--titre-famille); font-weight:var(--titre-poids-couverture,700);letter-spacing:var(--titre-espacement); text-transform:var(--titre-transform); font-size:clamp(34px,5.4vw,64px);line-height:1.02} .ban-prix{margin:12px 0 0;color:rgba(255,255,255,.92);font-size:clamp(15px,1.8vw,19px)} .ban-cta{display:flex;flex-wrap:wrap;gap:10px} @media(max-width:760px){ /* CAUSE DU CHEVAUCHEMENT (signale le 29/08/2026) : le bandeau est en 16/9, soit 219 px de haut sur un ecran de 390. Le bloc d'info y etait ancre EN BAS (position:absolute) alors qu'il contient un sur-titre, un h1, un prix et deux boutons — bien plus que 219 px. Il debordait donc VERS LE HAUT, jusqu'a passer au-dessus de l'ecran (h1 mesure a y=-6) et sous la barre du telephone. Correctif : sur telephone le bloc revient dans le flux. Le bandeau prend alors la hauteur de son contenu — il ne PEUT PLUS deborder, quelle que soit la longueur du nom de famille ou du prix. Le padding haut reserve l'en-tete. */ .mod-banniere{aspect-ratio:auto} .ban-voile{background:linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.58) 30%, rgba(0,0,0,.58) 72%, rgba(0,0,0,.44) 100%)} .ban-info{position:relative;z-index:2;padding:156px 0 30px} .ban-info .wrap{flex-direction:column;align-items:flex-start;gap:18px} /* Les boutons s'etiraient sur toute la largeur : ils ne se lisaient plus comme des boutons mais comme des bandeaux pleine largeur. Ils reprennent leur taille. */ .ban-cta{width:auto} .ban-cta .btn{flex:0 1 auto} } /* Curseurs de filtre (v2) : le libelle affiche la valeur en direct, le curseur part au maximum donc il ne filtre rien tant qu'on n'y touche pas. */ .vo-slider{min-width:230px;flex:1 1 230px} .vo-slider b{color:var(--accent);font-weight:700;text-transform:none;letter-spacing:normal; font-size:12.5px;margin-left:6px} .vo-slider input[type=range]{display:block;width:100%;margin-top:12px;accent-color:var(--accent); height:22px;cursor:pointer} /* Retour vers le site du groupe, dans la barre du haut. Le logo reste discret : on est dans l'univers Ducati, ce lien est une sortie, pas une signature. */ .lien-groupe{display:inline-flex;align-items:center;gap:8px} /* Le logo Delahaye est bleu fonce : illisible sur la barre du haut, qui est posee sur la photo de couverture et dont le texte est blanc. On le passe en blanc plein. (Ce n'est pas un « filtre » au sens de la charte Ducati : ce logo n'est pas un visuel Ducati.) */ .lien-groupe img{height:19px;width:auto;display:block; filter:brightness(0) invert(1);opacity:.85} .lien-groupe:hover img{opacity:1} @media(max-width:560px){.lien-groupe span{display:none}} /* --- Cartes de la page contact --- */ .cartes{display:grid;grid-template-columns:1fr;gap:34px} @media(min-width:860px){.cartes{grid-template-columns:1fr 1fr;gap:40px}} .carte-bloc h3{margin:0 0 8px;font-size:19px} .carte-bloc .adr{font-size:14.5px;line-height:1.7;color:var(--encre2);margin-bottom:14px} .carte-bloc iframe{display:block;width:100%;height:300px;border:1px solid var(--ligne2); border-radius:3px;background:var(--creme2)} .carte-bloc .lien{display:inline-block;margin-top:12px} /* Le CTA d'essai de la nav : c'est l'action de conversion n°1 du site, il doit se voir. */ .nav-essai{color:var(--accent)!important;font-weight:700} /* --- Pages legales : lisibilite avant tout, on vient y chercher une info precise --- */ .legal{padding:150px 0 80px} @media(max-width:999px){.legal{padding-top:120px}} .legal h1{font-family:var(--titre-famille);font-weight:var(--titre-poids); font-size:clamp(30px,4vw,44px);margin:0 0 8px} .legal-maj{color:var(--gris);font-size:13px;margin:0 0 42px} .legal h2{font-size:19px;margin:38px 0 12px;padding-top:22px; border-top:1px solid var(--ligne2)} .legal p{max-width:74ch;font-size:15.5px;line-height:1.75;color:var(--encre2);margin:0 0 12px} .legal-dl{margin:16px 0 0;max-width:74ch} .legal-dl div{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0; border-bottom:1px solid var(--ligne2)} @media(min-width:640px){.legal-dl div{grid-template-columns:230px 1fr;gap:18px}} .legal-dl dt{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--gris);margin:0} .legal-dl dd{margin:0;font-size:15.5px;color:var(--encre)} .legal-liens a{text-decoration:underline} /* --- Actualites --- */ .actus{display:grid;grid-template-columns:1fr;gap:34px;max-width:80ch} .actu-date{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:8px} .actu h3{margin:0 0 12px;font-size:23px;font-family:var(--titre-famille); font-weight:var(--titre-poids);letter-spacing:var(--titre-espacement)} .actu p{font-size:15.5px;line-height:1.75;color:var(--encre2);margin:0 0 12px;max-width:74ch} /* Chapô centré : .chapo a une max-width mais pas de marge auto — le bloc restait calé à gauche et seul son texte était centré, doù un décalage visible sous un titre centré /* Chapô centré : .chapo a une max-width mais pas de marge auto — le bloc restait calé à gauche et seul son texte était centré, d'où un décalage visible sous un titre centré (constaté sur la page Contact le 26/08/2026). */ .chapo[style*="center"],.approved-c{margin-left:auto;margin-right:auto} /* ============================================================================ FICHE D'UN VEHICULE D'OCCASION (//occasions//) Ajoutee le 26/08/2026 avec la fiche elle-meme. Sans elle, la liste de caracteristiques retombait sur le
brut du navigateur : un terme par ligne. Angles droits partout : code visuel commun a Ducati et au reste du site. ============================================================================ */ /* La nav est une carte FLOTTANTE posee sur le contenu : sans degagement en haut, l'entete de la fiche passait dessous. */ .vo-fiche{padding:150px 0 76px} @media(max-width:999px){.vo-fiche{padding-top:118px}} .fil{font-size:13px;color:var(--gris);margin-bottom:22px} .fil a{color:var(--gris);text-decoration:none} .fil a:hover{color:var(--accent)} .vo-haut{display:grid;grid-template-columns:1fr;gap:30px;align-items:start} /* ⚠️ Un element de grille a `min-width:auto` : il refuse de se comprimer sous la largeur de son contenu. La bande de vignettes (defilement horizontal) imposait donc 574 px a la colonne sur une fenetre de 390, et toute la page debordait lateralement. */ .vo-haut>*{min-width:0} .vo-gal,.vo-vignettes{min-width:0;max-width:100%} @media(min-width:960px){.vo-haut{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr);gap:44px}} .vo-grande{background:var(--noir);overflow:hidden;position:relative;display:block; width:100%;padding:0;border:0;cursor:zoom-in} /* Repere discret : sans lui, rien ne dit que la photo s'agrandit. */ .vo-loupe{position:absolute;right:10px;bottom:10px;z-index:2;color:#fff;font-size:15px; background:rgba(0,0,0,.55);padding:6px 9px;line-height:1} /* ── PLEIN ECRAN ── l'image y est ENTIERE : c'est tout l'objet de la vue. Le cadre 3/2 de la vignette rogne forcement (une source 5/4 perd ses cotes, un portrait perd le haut et le bas) ; ici, `contain`, rien n'est coupe. */ .vo-plein{position:fixed;inset:0;z-index:9800;background:rgba(8,8,10,.96); display:flex;align-items:center;justify-content:center;padding:48px 16px} .vo-plein[hidden]{display:none} .vo-plein img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .vo-plein button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0; cursor:pointer;font-size:26px;line-height:1;padding:12px 16px} .vo-plein button:hover{background:rgba(255,255,255,.2)} .vo-fermer{top:12px;right:12px;font-size:20px !important} .vo-prec{left:10px;top:50%;transform:translateY(-50%)} .vo-suiv{right:10px;top:50%;transform:translateY(-50%)} .vo-compteur{position:absolute;bottom:14px;left:50%;transform:translateX(-50%); color:#fff;font-size:13px;letter-spacing:.08em;opacity:.75} @media(max-width:639px){ .vo-plein{padding:56px 8px} .vo-plein .vo-prec,.vo-plein .vo-suiv{font-size:22px;padding:10px 12px} } /* Idem pour la grande photo de la fiche : c'est LA photo du vehicule, elle ne doit pas etre tronquee. Le plein ecran reste l'affichage sans cadre du tout. */ .vo-grande img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain; background:var(--creme2)} /* Bande de vignettes : defilement horizontal plutot qu'une grille qui casse la page quand un vehicule a douze photos et le suivant deux. */ .vo-vignettes{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px; scrollbar-width:thin} .vo-vign{flex:0 0 auto;width:104px;padding:0;border:2px solid transparent;background:none; cursor:pointer;line-height:0} .vo-vign img{width:104px;height:70px;object-fit:cover;display:block} .vo-vign.on{border-color:var(--accent)} .vo-vign:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .vo-ey{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent); font-weight:600} .vo-info h1{font-family:var(--titre-famille);font-weight:var(--titre-poids); letter-spacing:var(--titre-espacement);font-size:clamp(26px,3.2vw,38px); line-height:1.12;margin:8px 0 14px} .vo-prix{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:0} .vo-prix-sur-demande{font-size:22px;color:var(--gris)} .vo-mention{color:var(--gris);font-size:14px;margin:6px 0 22px} /* Caracteristiques : deux colonnes terme/valeur, filet entre les lignes. */ .vo-specs{margin:0 0 26px;border-top:1px solid var(--ligne)} .vo-specs div{display:flex;justify-content:space-between;gap:18px;align-items:baseline; padding:11px 0;border-bottom:1px solid var(--ligne)} /* La valeur peut etre longue (« Dark Stealth Yellow ») : elle doit pouvoir revenir a la ligne au lieu de deborder du cadre sur telephone. */ .vo-specs dd{min-width:0;overflow-wrap:anywhere} .vo-specs dt{flex:0 0 auto} .vo-specs dt{color:var(--gris);font-size:14px;margin:0} .vo-specs dd{margin:0;font-weight:600;text-align:right} .vo-actions{display:flex;flex-wrap:wrap;gap:10px} .vo-texte,.vo-equip,.vo-voisines{margin-top:58px} .vo-texte p{max-width:76ch;margin:0 auto 14px;color:var(--encre)} .vo-equip ul{list-style:none;padding:0;margin:0 auto;max-width:900px; display:grid;grid-template-columns:1fr;gap:8px 26px} @media(min-width:700px){.vo-equip ul{grid-template-columns:1fr 1fr}} .vo-equip li{padding-left:20px;position:relative;color:var(--encre)} .vo-equip li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px; background:var(--accent)} .vo-retour{margin-top:46px} .vo-retour a{color:var(--gris);text-decoration:none;font-size:14px} .vo-retour a:hover{color:var(--accent)} /* La carte d'occasion est un LIEN depuis le 26/08/2026 : elle ne doit pas se comporter comme du texte souligne. */ /* ⚠️ height:auto INDISPENSABLE : le gabarit pose height="600" sur l'image (reservation de place, Core Web Vitals), et une hauteur explicite DESACTIVE aspect-ratio. Sans cette ligne, toute photo de carte est etiree a 600 px de haut, desktop compris. */ /* ⚠️ CONTAIN, pas cover : la phototheque est majoritairement en PORTRAIT, et un cadre 3/2 en `cover` n'en montrait qu'un fragment. Le fond neutre encadre l'image ; la hauteur reste fixe, donc la grille ne danse pas. */ .vo-carte .mod-img img{height:auto;aspect-ratio:3/2;object-fit:contain; background:var(--creme2)} a.vo-carte{text-decoration:none;color:inherit;display:block} a.vo-carte:hover .mod-img img{transform:scale(1.03)} .vo-carte .mod-img{overflow:hidden} .vo-carte .mod-img img{transition:transform .35s ease} /* Cible d'ancre decalee : sans ca, la nav flottante recouvre le haut de la section quand on arrive depuis une fiche vehicule. */ .ancre{display:block;position:relative;top:-120px;visibility:hidden} /* Choix de l'application d'itineraire (Plans / Google Maps / Waze). */ /* ─── MISE EN AVANT : LES TROIS PLUS CHERES ────────────────────────────────── La plus chere en grand, les deux suivantes dessous. Le prix est POSE SUR la photo, en bas : c'est l'information qu'on cherche en premier sur une occasion, et la mettre dans le texte oblige a chercher a quelle moto il se rapporte. */ .vo-mea-ph{position:relative;display:block} .mea-prix{position:absolute;left:0;bottom:0;background:var(--accent);color:#fff; font-weight:700;font-size:15px;letter-spacing:.03em;padding:9px 16px;line-height:1} .mea-prix.pt{font-size:12.5px;padding:7px 11px} .mea-col{display:flex;flex-direction:column;gap:22px;justify-content:center} .mea-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px} .mea-p{position:relative;display:block;line-height:0;overflow:hidden} .mea-p img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block; transition:transform .5s ease} .mea-p:hover img{transform:scale(1.04)} /* Le libelle est pose en bas a droite, sur un degrade : lisible quelle que soit la photo, sans bandeau opaque qui masquerait la moto (charte Ducati : pas de cadre superpose). */ .mea-lib{position:absolute;right:0;bottom:0;left:0;color:#fff;font-size:12px; font-weight:600;letter-spacing:.04em;text-align:right;padding:26px 12px 9px; background:linear-gradient(to top,rgba(0,0,0,.72),transparent);line-height:1.2} /* ─── DEUX VISUELS SOUS LE BANDEAU D'UNE FAMILLE ─────────────────────────────── */ .fam-duo{padding:52px 0 8px} .duo-g{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:900px){.duo-g{grid-template-columns:1fr 1fr;gap:22px}} .duo-i{position:relative;padding:0;border:0;background:none;cursor:zoom-in;line-height:0; overflow:hidden;min-width:0} .duo-i img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block; transition:transform .5s ease} .duo-i:hover img{transform:scale(1.03)} .duo-loupe{position:absolute;right:12px;bottom:12px;width:34px;height:34px;border-radius:50%; background:rgba(0,0,0,.5);color:#fff;font-size:15px;line-height:34px;text-align:center; opacity:0;transition:opacity .2s} .duo-i:hover .duo-loupe{opacity:1} @media(hover:none){.duo-loupe{opacity:1}} /* ─── LA CONCESSION REFAITE (accueil) ────────────────────────────────────────── */ .shr-txt{max-width:62ch;margin:0 auto 30px;text-align:center} .shr-txt h2{margin-bottom:14px} .shr-txt p{color:var(--encre2);line-height:1.75;font-size:16.5px} .shr{display:grid;gap:14px} .shr-grande{position:relative;display:block;width:100%;padding:0;border:0;background:none; cursor:zoom-in;overflow:hidden;line-height:0} .shr-grande img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block; transition:transform .5s ease} .shr-grande:hover img{transform:scale(1.02)} .shr-loupe{position:absolute;right:14px;bottom:14px;width:38px;height:38px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;font-size:17px;line-height:38px;text-align:center} /* Bande qui defile au doigt. `scroll-snap` fait tout le travail : aucun script, et le comportement natif du telephone (inertie, rebond) est conserve. */ .shr-bande{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px; overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none;padding-bottom:2px} .shr-bande::-webkit-scrollbar{display:none} @media(min-width:760px){.shr-bande{grid-auto-columns:1fr;overflow:visible}} .shr-vign{padding:0;border:0;background:none;cursor:zoom-in;scroll-snap-align:center; line-height:0;min-width:0} .shr-vign img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block; transition:opacity .2s} .shr-vign:hover img{opacity:.85} /* Visionneuse plein ecran. z-index au-dessus de tout, y compris la carte de navigation. */ /* Fond PLEIN, pas translucide : a 96 % la page transparaissait encore et distrayait de la photo. Une visionneuse doit isoler ce qu'on regarde. */ .shr-plein{position:fixed;inset:0;z-index:9800;background:#0b0c0d; display:flex;align-items:center;justify-content:center;padding:34px 12px} .shr-plein[hidden]{display:none} .shr-plein img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-out} .shr-plein button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0; cursor:pointer;border-radius:50%;width:46px;height:46px;font-size:24px;line-height:1; display:flex;align-items:center;justify-content:center;transition:background .15s} .shr-plein button:hover{background:rgba(255,255,255,.25)} .shr-x{top:14px;right:14px} .shr-p{left:12px;top:50%;transform:translateY(-50%)} .shr-n{right:12px;top:50%;transform:translateY(-50%)} .shr-cpt{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#fff; font-size:12px;letter-spacing:.12em;opacity:.75} @media(max-width:639px){ .shr-plein{padding:12px 6px} .shr-plein button{width:40px;height:40px;font-size:21px} .shr-p{left:6px}.shr-n{right:6px} } /* ─── PAGE CONCESSION ─────────────────────────────────────────────────────────── ⚠️ CES REGLES MANQUAIENT PUREMENT ET SIMPLEMENT (constate le 26/08/2026 sur la page d'Albi, retour de Thibault : « chelou ton site pour Albi, c'est pas joli »). Le gabarit `concession.html` posait bien `conc-grid` / `conc-carte` / `conc-list`, mais AUCUN style n'existait en face : la page s'affichait en HTML brut — titres nus, puces par defaut, aucun rythme — au milieu d'un site par ailleurs habille. Ne pas les supprimer. Le vocabulaire reprend celui de `.essais-site` (carte blanche, filet, liseré d'accent) pour que la page parle la meme langue que le reste. */ .conc-grid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:6px} @media(min-width:820px){.conc-grid{grid-template-columns:1fr 1fr;gap:26px}} .conc-carte{background:#fff;border:1px solid var(--ligne);border-left:4px solid var(--accent); padding:24px 26px} .conc-carte h3{font-family:var(--titre-famille);font-weight:var(--titre-poids); font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris); margin:0 0 16px} .conc-carte>p{font-size:16px;line-height:1.65;color:var(--encre);margin:0 0 12px} .conc-tel a{font-size:19px;font-weight:600;letter-spacing:.02em;color:var(--encre); border-bottom:1px solid var(--ligne2);padding-bottom:2px} .conc-tel a:hover{color:var(--accent);border-color:var(--accent)} .conc-h{font-size:14.5px;color:var(--encre2);line-height:1.85} .conc-manque{font-size:13px;color:var(--gris);font-style:italic} /* Liste de services : jamais de puce par defaut sur ce site — un filet et un tiret rouge. */ .conc-list{list-style:none;margin:0;padding:0} .conc-list li{font-size:15px;color:var(--encre2);padding:9px 0 9px 18px;position:relative; border-bottom:1px solid var(--ligne)} .conc-list li:last-child{border-bottom:0} .conc-list li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px; background:var(--accent)} .itin{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-top:18px; padding-top:16px;border-top:1px solid var(--ligne)} .itin-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)} .itin a{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent); padding-bottom:2px} .itin a:hover{color:var(--encre);border-color:var(--encre)} /* Retour vers l'autre concession, pose par enseigne.js quand l'enseigne affichee n'est pas celle par defaut. Sans lui, on ne sait plus ou l'on est. */ .chg-site{margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase; opacity:.8;text-decoration:none} .chg-site:hover{opacity:1;text-decoration:underline} /* Galerie de photos (page D.O.C.). Vignettes carrees en `cover` : les sources melangent portrait et paysage, la grille les uniformise sans jamais deformer une image. */ .galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:700px){.galerie{grid-template-columns:repeat(3,1fr);gap:14px}} .galerie figure{margin:0;overflow:hidden;background:var(--noir)} .galerie img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover; transition:transform .4s ease} .galerie figure:hover img{transform:scale(1.04)} /* ============================================================================ OCCASIONS SUR TELEPHONE — deux motos par rang (Thibault, 26/08/2026) A une seule par rang, voir 22 motos demandait un defilement interminable. ⚠️ Scope a .vo-liste : .modeles sert aussi aux cartes de la gamme. ============================================================================ */ @media(max-width:639px){ .vo-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} /* ⚠️ min-width:0 : sans lui un titre long elargit sa colonne et la page deborde. */ .vo-liste>*{min-width:0} .vo-liste .mod h3{overflow-wrap:anywhere} /* A ~183 px de large, la carte d'origine est illisible : on la compacte. */ .vo-liste .mod{padding:12px} .vo-liste .mod-img{margin:-12px -12px 10px} .vo-liste .vo-site{font-size:10px;letter-spacing:.06em} .vo-liste .mod h3{font-size:15px;line-height:1.2;margin-bottom:6px} /* caracteristiques empilees : deux colonnes ne tiennent pas a cette largeur */ /* ⚠️ .specs est une grille BORDEE de trois colonnes, pensee pour une carte large : il faut aussi retirer la bordure et le fond, sinon il reste un cadre autour d'une ligne unique. */ .vo-liste .specs{display:block;margin:0 0 8px;border:0;background:none;gap:0} .vo-liste .specs>div{display:flex;justify-content:space-between;gap:8px; padding:2px 0;text-align:left;background:none} .vo-liste .specs dt,.vo-liste .specs dd{font-size:11.5px} .vo-liste .prix{margin:0} .vo-liste .prix strong{font-size:16px} .vo-liste .prix .mens{display:block;font-size:10.5px} /* le bouton devient une mention : a cette largeur il mangeait la carte */ .vo-liste .mod-cta{margin-top:8px} .vo-liste .mod-cta{display:block} .vo-liste .mod-cta .btn{padding:0;border:0;background:none;font-size:11px; color:var(--accent);letter-spacing:.04em;white-space:normal;display:inline} } /* Horaires sous l'adresse, dans le bloc carte de la page Contact. */ .adr-h{color:var(--gris);font-size:13px} /* Reseaux sociaux du pied de page. Une seule icone si une seule adresse est renseignee : le bloc s'adapte, il n'y a pas de trou. */ .reseaux{display:flex;gap:14px;margin-bottom:16px} .reseaux a{color:inherit;opacity:.75;line-height:0;transition:opacity .2s} .reseaux a:hover{opacity:1;color:var(--accent)} /* ── INSCRIPTION NEWSLETTER ── deux colonnes en bureau, empilees sur telephone. */ .news{display:grid;grid-template-columns:1fr;gap:26px;align-items:start} @media(min-width:860px){.news{grid-template-columns:1fr 1fr;gap:48px}} .news-txt h3{font-size:21px;font-weight:700;margin-bottom:10px} .news-txt p{color:var(--gris);max-width:46ch} .news-form{display:flex;flex-direction:column;gap:14px} .news-form label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)} .news-form input[type=email],.news-form select{width:100%;padding:12px 14px;font-size:15px; border:1px solid var(--ligne);background:#fff;color:var(--encre);margin-top:6px} .news-form .consent{display:flex;gap:10px;align-items:flex-start;text-transform:none; letter-spacing:0;font-size:12.5px;line-height:1.5;color:var(--gris)} .news-form .consent input{margin-top:3px;flex:0 0 auto} .news-form button{align-self:flex-start} .news-form .fmsg{font-size:13px;color:var(--gris);margin:0} /* Les deux autres sites du groupe, en pied : logos cliquables. Hauteur normalisee pour que deux logos de proportions differentes ne se disputent pas la ligne. */ /* ⚠️ DANS une colonne du pied depuis le 26/08/2026 (et non plus en pleine largeur) : les logos s'empilent, la colonne fait 1fr. Pas de filet — la colonne en a deja un au-dessus via le titre. `.fgrid img{height:64px}` s'applique aussi ici : les regles `.fsites img` ci-dessous sont plus bas dans la feuille, elles gagnent. */ .fsites{display:flex;flex-direction:column;align-items:flex-start;gap:18px; padding:20px 0 0} /* Pleine opacite : le logo du groupe est NOIR (demande de Thibault) — a .72 il rendait gris, ce qui n'est pas la meme chose. */ .fsites a{line-height:0;opacity:1;transition:opacity .2s} .fsites a:hover{opacity:.6} /* Hauteurs distinctes : le logo du Store porte DEUX lignes de texte, a hauteur egale il se lit deux fois moins bien que celui du groupe. */ .fsites img{height:26px!important;width:auto;display:block;max-width:100%} .fsites a:last-child img{height:34px!important} @media(max-width:859px){.fsites{flex-direction:row;align-items:center;gap:28px; padding-top:16px}} /* ── FAQ (accordéon details/summary — service, contact, occasions). Zéro JS : l'accordéon est natif, le texte reste indexable page fermée. */ .faq{max-width:820px} .faq-it{border-bottom:1px solid var(--trait,#ddd6c8);padding:4px 0} .faq-it summary{cursor:pointer;font-weight:700;padding:14px 28px 14px 0;list-style:none; position:relative;font-size:16.5px} .faq-it summary::-webkit-details-marker{display:none} .faq-it summary::after{content:"+";position:absolute;right:2px;top:50%; transform:translateY(-50%);font-weight:400;font-size:22px;color:var(--accent)} .faq-it[open] summary::after{content:"–"} .faq-it p{margin:0 0 16px;color:var(--encre2);font-size:15px;line-height:1.65; max-width:60ch} /* Lien « toutes nos occasions » sous les cartes VO d'une page famille. */ .vo-tout{margin-top:18px} .conc-zone{margin-top:26px;max-width:70ch}