/* ============================================================ mh Éducation Canine — Feuille de style principale Palette : #FF6600 orange | #4D4D4D gris | #FFFFFF blanc Typographie : Montserrat (titres) + Roboto (corps) ============================================================ */ /* ---------- Fonts : chargement via dans le de chaque page ---------- */ /* (l'@import a été retiré pour éviter le render-blocking — voir ) */ /* ---------- Reset & Variables ---------- */ :root { --orange: #FF6600; --orange-dark: #D95500; --orange-light: #FFF2EA; --grey: #4D4D4D; --grey-soft: #666666; --border: #D0D0D0; --bg-alt: #F0F0F0; --white: #FFFFFF; --dark: #1A1A1A; --dark-footer: #2D2D2D; --success: #166534; --success-bg: #f0fdf4; --success-border:#bbf7d0; --error: #9b1c1c; --error-bg: #fff5f5; --error-border: #fecaca; --success-btn: #2D9E5F; --font-title: 'Montserrat', sans-serif; --font-body: 'Roboto', sans-serif; --radius: 4px; --radius-md: 8px; --shadow-sm: 0 1px 4px rgba(0,0,0,.07); --shadow: 0 4px 20px rgba(0,0,0,.09); --max-w: 1160px; --transition: .2s ease; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } /* ---------- Accessibilité : skip-to-content + reduced-motion ---------- */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 9999; background: var(--orange); color: var(--white); padding: 12px 20px; border-radius: var(--radius); font-family: var(--font-title); font-weight: 700; font-size: .85rem; text-decoration: none; transition: top .15s ease; } .skip-link:focus { top: 16px; outline: 3px solid #fff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } body { font-family: var(--font-body); color: var(--grey); background: var(--white); line-height: 1.7; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-title); color: var(--grey); line-height: 1.2; font-weight: 800; } h1 { font-size: clamp(2rem, 5vw, 3.2rem); } h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); } h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 700; } p { margin-bottom: 1rem; } p:last-child { margin-bottom: 0; } /* ---------- Container ---------- */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius); font-family: var(--font-title); font-weight: 700; font-size: .9rem; letter-spacing: .03em; cursor: pointer; border: 2px solid transparent; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); white-space: normal; word-break: break-word; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); } .btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); } .btn-outline { background: transparent; color: var(--orange); border-color: var(--orange); } .btn-outline:hover { background: var(--orange); color: var(--white); } .btn-outline-white { background: transparent; color: var(--white); border-color: var(--white); } .btn-outline-white:hover { background: var(--white); color: var(--orange); } .btn-sm { padding: 12px 20px; font-size: .82rem; } /* ---------- Section layout ---------- */ .section { padding: 88px 0; } .section-alt { background: var(--bg-alt); } .section-alternate-bg { background: var(--white); } .section-dark { background: var(--orange); color: var(--white); } .section-dark h2, .section-dark h3 { color: var(--white); } /* .section-orange : alias de .section-dark (conservé pour rétrocompat) */ .section-orange { background: var(--orange); color: var(--white); } .section-orange h2, .section-orange h3 { color: var(--white); } .section-header { text-align: center; max-width: 680px; margin: 0 auto 56px; } .section-tag { display: inline-block; font-family: var(--font-title); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; } .section-tag-white { color: rgba(255,255,255,.85); } .section-header h2 { margin-bottom: 16px; } .section-header p { font-size: 1.05rem; color: var(--grey-soft); } /* ---------- Lisibilité des contenus dans les blocs à fond ORANGE ---------- */ /* Tout section-tag à l'intérieur d'un bloc orange doit être blanc, jamais orange */ .section-dark .section-tag, .section-orange .section-tag, .balades-highlight .section-tag, .cta-band .section-tag { color: rgba(255,255,255,.85); } /* Paragraphes dans les blocs orange : blanc translucide pour rester lisibles */ .section-dark p, .section-orange p, .cta-band p { color: rgba(255,255,255,.88); } /* Exception : le formulaire (.contact-form) est sur fond blanc même à l'intérieur d'un bloc orange — son texte doit rester gris sombre pour être lisible. */ .section-dark .contact-form p, .section-orange .contact-form p, .section-dark .contact-form label, .section-orange .contact-form label { color: var(--grey); } .section-dark .contact-form .form-note, .section-orange .contact-form .form-note { color: var(--grey-soft); } /* Liens téléphone/email dans les blocs orange : blanc + soulignement, jamais orange-sur-orange */ .section-dark a[href^="tel:"], .section-dark a[href^="mailto:"], .section-orange a[href^="tel:"], .section-orange a[href^="mailto:"] { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; } .section-dark a[href^="tel:"]:hover, .section-dark a[href^="mailto:"]:hover, .section-orange a[href^="tel:"]:hover, .section-orange a[href^="mailto:"]:hover { text-decoration-color: var(--white); } /* Lien désactivé (numéro placeholder neutralisé par JS) */ .tel-pending { opacity: .55 !important; cursor: not-allowed !important; pointer-events: none; } /* Boutons primaires (orange) à l'intérieur d'un bloc orange : passent en blanc/orange */ .balades-highlight .btn-primary, .section-dark .btn-primary, .section-orange .btn-primary, .cta-band .btn-primary { background: var(--white); color: var(--orange); border-color: var(--white); } .balades-highlight .btn-primary:hover, .section-dark .btn-primary:hover, .section-orange .btn-primary:hover, .cta-band .btn-primary:hover { background: var(--orange-light); color: var(--orange-dark); border-color: var(--orange-light); } /* Exception : le bouton submit du formulaire reste sur fond orange (le formulaire lui-même est sur fond blanc, donc orange-sur-blanc = OK). */ .section-dark .contact-form .btn-primary, .section-orange .contact-form .btn-primary { background: var(--orange); color: var(--white); border-color: var(--orange); } .section-dark .contact-form .btn-primary:hover, .section-orange .contact-form .btn-primary:hover { background: var(--orange-dark); color: var(--white); border-color: var(--orange-dark); } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--white); border-bottom: 1px solid var(--border); transition: box-shadow var(--transition); } .site-header.scrolled { box-shadow: var(--shadow); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 120px; gap: 24px; } .logo-link { display: flex; align-items: center; flex-shrink: 0; } .logo-link img, .logo-link .logo-header { height: 100px; width: auto; display: block; } .main-nav { display: flex; align-items: center; gap: 2px; } .nav-link { font-family: var(--font-title); font-size: .78rem; font-weight: 600; color: var(--grey); padding: 7px 9px; border-radius: var(--radius); white-space: nowrap; transition: color var(--transition), background var(--transition); } .nav-link:hover, .nav-link.active { color: var(--orange); background: var(--orange-light); } .nav-link-cta { background: var(--white) !important; color: var(--orange) !important; border: 1.5px solid var(--orange); padding: 8px 14px !important; white-space: nowrap; font-weight: 700; border-radius: var(--radius); transition: background var(--transition), color var(--transition); } .nav-link-cta:hover { background: var(--orange) !important; color: var(--white) !important; } .header-phones { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .75rem; font-weight: 500; color: var(--grey-soft); flex-shrink: 0; } .header-phones a { color: var(--grey); font-weight: 700; font-family: var(--font-title); font-size: .8rem; } .header-phones a:hover { color: var(--orange); } .phone-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-soft); font-weight: 400; margin-right: 6px; } /* Hamburger */ .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; border: none; background: none; min-height: 48px; min-width: 48px; justify-content: center; align-items: center; } .hamburger span { display: block; width: 24px; height: 2px; background: var(--grey); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav */ .mobile-nav { display: none; position: fixed; top: 120px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--border); padding: 16px 24px 24px; z-index: 999; flex-direction: column; gap: 4px; box-shadow: var(--shadow); } .mobile-nav.open { display: flex; } .mobile-nav .nav-link { display: block; padding: 12px 16px; border-radius: var(--radius-md); } .mobile-nav .nav-link-cta { text-align: center; margin-top: 8px; } .mobile-phones { padding: 12px 16px 0; border-top: 1px solid var(--border); margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .mobile-phones a { font-weight: 700; font-family: var(--font-title); font-size: .9rem; color: var(--grey); } .mobile-phones a:hover { color: var(--orange); } /* ---------- Hero ---------- */ .hero { min-height: 100vh; padding: 176px 0 80px; display: flex; align-items: center; background: var(--dark); position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: var(--dark); } .hero-bg-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 1; mix-blend-mode: normal; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,15,15,.90) 0%, rgba(20,20,20,.78) 55%, rgba(10,10,10,.60) 100%); } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-content { } .hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,102,0,.18); border: 1px solid rgba(255,102,0,.5); color: var(--orange); padding: 7px 16px; border-radius: 40px; font-family: var(--font-title); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 24px; } .hero h1 { color: var(--white); margin-bottom: 20px; } .hero h1 em { font-style: normal; color: var(--orange); } .hero-sub { font-size: 1.1rem; color: rgba(255,255,255,.75); margin-bottom: 28px; max-width: 520px; } .hero-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; } .hero-zone { font-size: .75rem; font-weight: 600; font-family: var(--font-title); letter-spacing: .04em; padding: 5px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 40px; color: rgba(255,255,255,.75); } .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 40px; } .hero-proof { display: flex; gap: 28px; } .hero-proof-item { text-align: center; } .hero-proof-num { font-family: var(--font-title); font-size: 1.6rem; font-weight: 900; color: var(--orange); } .hero-proof-label { font-size: .72rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; } .hero-visual { position: relative; } .hero-img-wrap { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/2; } .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .hero-badge { position: absolute; bottom: -20px; left: -20px; background: var(--white); color: var(--orange); padding: 18px 22px; border-radius: var(--radius-md); font-family: var(--font-title); font-weight: 700; font-size: .8rem; line-height: 1.3; box-shadow: 0 8px 32px rgba(0,0,0,.18); } .hero-badge span { display: block; font-size: 1.4rem; font-weight: 900; color: var(--grey); } /* ---------- Trust band ---------- */ .trust-band { background: var(--orange-light); padding: 0; } .trust-band-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; } .trust-item { display: flex; align-items: center; gap: 10px; padding: 20px 28px; border-right: 1px solid rgba(255,102,0,.2); } .trust-item:last-child { border-right: none; } .trust-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--orange); } .trust-text { font-family: var(--font-title); font-size: .8rem; font-weight: 700; color: var(--grey); } /* ---------- Balades éducatives highlight ---------- */ .balades-highlight { background: var(--orange); color: var(--white); } .balades-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .balades-img-wrap { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/2; position: relative; } .balades-img-wrap img { width: 100%; height: 100%; object-fit: cover; } /* Overlay "photo à venir" — retirer .img-placeholder quand les vraies photos arrivent */ .img-placeholder { position: relative; } .img-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.52) 0%, rgba(0,0,0,.10) 45%, transparent 100%); pointer-events: none; } .img-placeholder-label { position: absolute; bottom: 12px; left: 14px; font-family: var(--font-title); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); pointer-events: none; z-index: 2; } .balades-content .section-tag { letter-spacing: .12em; } .balades-content h2 { color: var(--grey); margin-bottom: 16px; } .balades-content p { color: var(--grey-soft); } /* Override pour blocs à fond orange : titre + paragraphe en blanc */ .balades-highlight .balades-content h2, .section-dark .balades-content h2, .section-orange .balades-content h2 { color: var(--white); } .balades-highlight .balades-content p, .section-dark .balades-content p, .section-orange .balades-content p { color: rgba(255,255,255,.88); } .balades-list { margin: 24px 0 32px; display: flex; flex-direction: column; gap: 10px; } /* Couleur de texte par défaut : grise (lisible sur fonds clairs/gris) */ .balades-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; color: var(--grey); } .balades-list li::before { content: ''; display: block; width: 18px; height: 18px; background: var(--orange); border-radius: 50%; flex-shrink: 0; margin-top: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } /* Override : fond orange (home, blocs prédiag) → texte blanc et pastille blanche pour rester visibles */ .balades-highlight .balades-list li, .section-dark .balades-list li, .section-orange .balades-list li { color: rgba(255,255,255,.92); } .balades-highlight .balades-list li::before, .section-dark .balades-list li::before, .section-orange .balades-list li::before { background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6600'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } /* ---------- Services grid ---------- */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .service-card { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; } .service-card:hover { border-color: var(--orange); box-shadow: 0 8px 32px rgba(255,102,0,.1); } .service-card-img { aspect-ratio: 3/2; overflow: hidden; } .service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .service-card:hover .service-card-img img { transform: scale(1.04); } .service-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; } .service-card-icon { width: 40px; height: 40px; margin-bottom: 14px; color: var(--orange); } .service-card h3 { margin-bottom: 10px; } .service-card p { font-size: .9rem; color: var(--grey-soft); flex: 1; margin-bottom: 20px; } .service-card-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: .8rem; font-weight: 700; color: var(--orange); letter-spacing: .03em; transition: gap var(--transition); } .service-card-link:hover { gap: 10px; } .service-card.featured { border-color: var(--orange); background: linear-gradient(135deg, #fff 0%, #fff8f4 100%); } .service-card.featured .service-card-body { border-top: 3px solid var(--orange); } .service-badge { display: inline-block; background: var(--orange); color: var(--white); font-family: var(--font-title); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 40px; margin-bottom: 10px; } /* ---------- Méthode steps ---------- */ .method-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; counter-reset: steps; } .method-step { position: relative; } .step-num { font-family: var(--font-title); font-size: 3rem; font-weight: 900; color: var(--orange); line-height: 1; margin-bottom: 16px; opacity: .25; } .method-step h3 { margin-bottom: 10px; } .method-step p { font-size: .9rem; color: var(--grey-soft); } /* ---------- Zones ---------- */ .zones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .zone-group { } .zone-group h3 { margin-bottom: 16px; } .zone-list { display: flex; flex-wrap: wrap; gap: 8px; } .zone-tag { font-family: var(--font-title); font-size: .78rem; font-weight: 600; padding: 6px 14px; background: var(--orange-light); border: 1px solid rgba(255,102,0,.2); border-radius: 40px; color: var(--orange); } .zones-text { margin-top: 32px; font-size: .95rem; color: var(--grey-soft); } /* ---------- About ---------- */ .about-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } .about-img-wrap { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4; } .about-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .credentials { display: flex; flex-direction: column; gap: 12px; margin: 28px 0; } .credential-item { display: flex; align-items: center; gap: 12px; font-size: .9rem; } .credential-icon { width: 36px; height: 36px; background: var(--orange-light); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .credential-icon svg { width: 18px; height: 18px; color: var(--orange); } /* ---------- Testimonials ---------- */ .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .testimonial-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); } .testimonial-stars { display: flex; gap: 3px; margin-bottom: 16px; color: var(--orange); } .testimonial-text { font-size: .95rem; color: var(--grey); font-style: italic; margin-bottom: 20px; line-height: 1.7; } .testimonial-author { display: flex; align-items: center; gap: 12px; } .author-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--orange-light); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 800; font-size: .85rem; color: var(--orange); flex-shrink: 0; } .author-name { font-family: var(--font-title); font-weight: 700; font-size: .85rem; } .author-location { font-size: .75rem; color: var(--grey-soft); } /* ---------- Tarifs ---------- */ .tarifs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .tarif-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px; text-align: center; transition: border-color var(--transition), box-shadow var(--transition); } .tarif-card:hover { border-color: var(--orange); box-shadow: var(--shadow); } .tarif-icon { width: 48px; height: 48px; margin: 0 auto 16px; color: var(--orange); } .tarif-card h3 { margin-bottom: 8px; } .tarif-price { font-family: var(--font-title); font-size: 1.8rem; font-weight: 900; color: var(--orange); margin: 12px 0 4px; } .tarif-unit { font-size: .8rem; color: var(--grey-soft); margin-bottom: 16px; } .tarif-card p { font-size: .88rem; color: var(--grey-soft); } /* ---------- Form ---------- */ .prediag-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .prediag-intro h2 { margin-bottom: 16px; } .prediag-intro p { color: rgba(255,255,255,.75); margin-bottom: 24px; } .prediag-points { display: flex; flex-direction: column; gap: 12px; } .prediag-point { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: rgba(255,255,255,.8); } .prediag-point::before { content: ''; display: block; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='15.5' rx='5.5' ry='4.5' fill='white'/%3E%3Ccircle cx='4.5' cy='10' r='2.2' fill='white'/%3E%3Ccircle cx='9.5' cy='6.5' r='2.2' fill='white'/%3E%3Ccircle cx='14.5' cy='6.5' r='2.2' fill='white'/%3E%3Ccircle cx='19.5' cy='10' r='2.2' fill='white'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-top: 1px; } /* ---------- VCard / QR Code contact block ---------- */ .vcf-block { margin-top: 28px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 24px; } .vcf-block-label { font-family: var(--font-title); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; } .vcf-qr { display: flex; align-items: center; gap: 16px; } .vcf-qr img { border-radius: var(--radius); border: 3px solid rgba(255,255,255,.15); flex-shrink: 0; } .vcf-qr-caption { font-size: .82rem; color: rgba(255,255,255,.7); line-height: 1.6; } .vcf-qr-caption strong { display: block; font-family: var(--font-title); font-size: .88rem; color: var(--white); margin-bottom: 4px; } .vcf-btn-mobile { display: none; } .vcf-btn-download { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--white); color: var(--orange); font-family: var(--font-title); font-weight: 700; font-size: .88rem; padding: 13px 20px; border-radius: var(--radius); text-decoration: none; transition: background var(--transition), color var(--transition); } .vcf-btn-download:hover { background: var(--orange-light); color: var(--orange-dark); } @media (max-width: 768px) { .vcf-qr { display: none; } .vcf-btn-mobile { display: block; } } .contact-form { background: var(--white); border-radius: var(--radius-md); padding: 36px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .form-group label { font-family: var(--font-title); font-size: .78rem; font-weight: 700; color: var(--grey); letter-spacing: .04em; text-transform: uppercase; } .form-group input, .form-group select, .form-group textarea { padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-body); font-size: .95rem; color: var(--grey); background: var(--bg-alt); transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,102,0,.12); } .form-group textarea { resize: vertical; min-height: 100px; } .form-note { font-size: .78rem; color: var(--grey-soft); margin-top: 10px; } .form-note a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; } .form-note a:hover { color: var(--orange-dark); } .form-submit { width: 100%; justify-content: center; margin-top: 8px; } .input-error { border-color: var(--error) !important; box-shadow: 0 0 0 3px rgba(155,28,28,.15) !important; } .form-feedback { padding: 12px 16px; border-radius: var(--radius); font-size: .9rem; font-weight: 500; margin-bottom: 16px; } .form-feedback--success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); } .form-feedback--error { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); } .btn-submitted { background: var(--success-btn) !important; border-color: var(--success-btn) !important; } /* ---------- FAQ ---------- */ .faq-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item:last-child { border-bottom: none; } .faq-question { width: 100%; text-align: left; padding: 20px 24px; background: var(--white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-title); font-size: .95rem; font-weight: 700; color: var(--grey); transition: background var(--transition), color var(--transition); } .faq-question:hover { background: var(--orange-light); color: var(--orange); } .faq-question.open { background: var(--orange-light); color: var(--orange); } .faq-chevron { display: none; } .faq-question::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--orange); flex-shrink: 0; font-weight: 400; transition: content var(--transition); } .faq-question.open::after { content: '−'; } .faq-answer { display: none; padding: 0 24px 20px; font-size: .92rem; color: var(--grey-soft); line-height: 1.75; } .faq-answer.open { display: block; } /* ---------- Footer ---------- */ .site-footer { background: var(--dark-footer); color: rgba(255,255,255,.7); padding: 64px 0 0; } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); } /* Logo footer — SVG officiel charte (mh #928F86 + Éducation Canine #FF6600) Affiché sur un encart blanc arrondi pour un rendu plus net sur le fond foncé du footer. Couleurs de charte strictement préservées. */ .footer-brand .logo-footer { height: 64px; width: auto; margin-bottom: 20px; display: block; background: var(--white); padding: 12px 16px; border-radius: var(--radius-md); box-sizing: content-box; } .footer-brand p { font-size: .88rem; margin-bottom: 16px; max-width: 260px; } .footer-phones-block { display: flex; flex-direction: column; gap: 6px; } .footer-phone { display: flex; align-items: center; gap: 8px; font-size: .88rem; } .footer-phone a { color: var(--orange); font-family: var(--font-title); font-weight: 700; transition: color var(--transition); } .footer-phone a:hover { color: var(--white); } .site-footer .obf-mail { color: rgba(255,255,255,.5); } .site-footer .obf-mail:hover { color: rgba(255,255,255,.8); } .site-footer address { font-size: .78rem; color: rgba(255,255,255,.55); font-style: normal; margin-top: 6px; } .footer-ide { font-size: .74rem; color: rgba(255,255,255,.55); margin-top: 6px; } .footer-phone-label { font-size: .7rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; } /* Footer headings — must override the global h3 { color: var(--grey) } */ .site-footer h3 { font-family: var(--font-title); font-size: .78rem; font-weight: 800; color: var(--white); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; opacity: 1; } .footer-col h3 { font-family: var(--font-title); font-size: .78rem; font-weight: 800; color: var(--white); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; } .footer-links { display: flex; flex-direction: column; gap: 8px; } .footer-links a { font-size: .88rem; transition: color var(--transition); } .footer-links a:hover { color: var(--orange); } .footer-zones-list { display: flex; flex-wrap: wrap; gap: 6px; } .footer-zone { font-size: .75rem; padding: 4px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 40px; color: rgba(255,255,255,.6); } .footer-bottom { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .78rem; } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a:hover { color: var(--orange); } /* ---------- Page hero (sous-pages) ---------- */ .page-hero { padding: 192px 0 72px; background: var(--dark); position: relative; overflow: hidden; } .page-hero-bg { position: absolute; inset: 0; background: var(--dark); } .page-hero-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 1; mix-blend-mode: normal; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,10,10,.90) 0%, rgba(15,15,15,.82) 55%, rgba(5,5,5,.65) 100%); } .page-hero-content { position: relative; z-index: 1; max-width: 720px; } .page-hero-content .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .78rem; color: rgba(255,255,255,.5); margin-bottom: 16px; } .page-hero-content .breadcrumb a { color: rgba(255,255,255,.5); } .page-hero-content .breadcrumb a:hover { color: var(--orange); } .page-hero-content .breadcrumb span { color: rgba(255,255,255,.25); } .page-hero-content h1 { color: var(--white); margin-bottom: 16px; } .page-hero-content p { font-size: 1.05rem; color: rgba(255,255,255,.72); } /* .page-hero-cred retiré : remplacé par .hero-tag (pill badge) */ /* ---------- Breadcrumb & dividers ---------- */ .divider { height: 1px; background: var(--border); } .orange-line { width: 48px; height: 3px; background: var(--orange); margin: 16px 0 24px; border-radius: 2px; } .orange-line-center { margin: 16px auto 24px; } .balades-highlight .orange-line, .section-orange .orange-line, .section-dark .orange-line { background: var(--white); } /* ---------- CTA band ---------- */ .cta-band { background: var(--orange); padding: 60px 0; } .cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-band h2 { color: var(--white); margin: 0; } .cta-band p { color: rgba(255,255,255,.88); margin-top: 6px; } /* ---------- Mentions légales / CGU ---------- */ .legal-content { max-width: 760px; margin: 0 auto; } .legal-content h2 { margin-top: 40px; margin-bottom: 12px; font-size: 1.2rem; } .legal-content h3 { margin-top: 24px; margin-bottom: 8px; font-size: 1rem; color: var(--orange); } .legal-content p, .legal-content li { font-size: .95rem; color: var(--grey-soft); } .legal-content ul { margin-left: 20px; list-style: disc; margin-bottom: 1rem; } /* ---------- Plan du site ---------- */ .sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .sitemap-col h3 { margin-bottom: 12px; font-size: 1rem; } .sitemap-col ul { display: flex; flex-direction: column; gap: 6px; } .sitemap-col ul li a { font-size: .9rem; color: var(--grey-soft); transition: color var(--transition); } .sitemap-col ul li a:hover { color: var(--orange); } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; } .hero-inner { grid-template-columns: 1fr; } .hero-visual { display: none; } .hero { min-height: 85vh; padding: 140px 0 64px; } .hero-overlay { background: rgba(0,0,0,.7); } .about-inner { grid-template-columns: 1fr; } .about-img-wrap { aspect-ratio: 16/6; } .balades-inner { grid-template-columns: 1fr; } .zones-grid { grid-template-columns: 1fr; } .prediag-inner { grid-template-columns: 1fr; } } @media (max-width: 768px) { .section { padding: 64px 0; } .main-nav, .header-phones { display: none; } .hamburger { display: flex; } .header-inner { height: 64px; } .logo-link .logo-header, .logo-link img { height: 44px; } .mobile-nav { top: 64px; } .hero { padding: 88px 0 48px; min-height: auto; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bottom { flex-direction: column; align-items: flex-start; } .trust-band-inner { flex-direction: column; align-items: flex-start; } .trust-item { border-right: none; border-bottom: 1px solid rgba(255,102,0,.15); padding: 14px 20px; width: 100%; } .trust-item:last-child { border-bottom: none; } .form-row { grid-template-columns: 1fr; } .hero-proof { flex-wrap: wrap; gap: 20px; } .cta-band-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .container { padding: 0 16px; } .footer-inner { grid-template-columns: 1fr; } h1 { font-size: 1.8rem; } h2 { font-size: 1.5rem; } } /* ---------- Focus visible ---------- */ .btn:focus-visible, .nav-link:focus-visible, .nav-link-cta:focus-visible, .service-card-link:focus-visible, .hamburger:focus-visible, .footer-social a:focus-visible, .footer-links a:focus-visible, .footer-phone a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--radius); } .faq-question:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; } .skip-link:focus { outline: 3px solid var(--white); outline-offset: 2px; } /* ---------- Hero téléphones mobile ---------- */ .hero-contact-mobile { display: none; } @media (max-width: 768px) { .hero-contact-mobile { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .hero-contact-mobile a { font-family: var(--font-title); font-weight: 700; font-size: .88rem; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 10px; text-decoration: none; } .hero-contact-mobile a:hover { color: var(--white); } .hero-contact-mobile .phone-flag { font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 400; flex-shrink: 0; } } /* ---------- Réseaux sociaux ---------- */ .footer-social { display: flex; gap: 10px; margin-top: 16px; align-items: center; } .footer-social a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.65); transition: background var(--transition), color var(--transition); flex-shrink: 0; } .footer-social a:hover { background: var(--orange); color: var(--white); } .social-contact-block { display: flex; gap: 12px; align-items: center; margin-top: 20px; } .social-contact-block a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-title); font-weight: 700; font-size: .85rem; color: var(--grey); transition: border-color var(--transition), color var(--transition), background var(--transition); flex: 1; text-decoration: none; } .social-contact-block a:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); } .social-contact-block svg { flex-shrink: 0; color: var(--orange); } /* ---------- Utility ---------- */ .text-orange { color: var(--orange); } .section-cta-center { text-align: center; margin-top: 40px; } .container--narrow { max-width: 820px; } .tarif-note { text-align: center; font-size: .88rem; color: var(--grey-soft); margin-top: 24px; } .faq-list--narrow { max-width: 780px; margin: 0 auto; } .faq-list--narrow-820 { max-width: 820px; margin: 0 auto; } .btn--mt { margin-top: 8px; } .btn--mt-lg { margin-top: 24px; } .btn--full { width: 100%; justify-content: center; } .section-intro-text { margin-top: 20px; } .zone-subtext { font-size: .9rem; color: var(--grey-soft); margin-bottom: 16px; } .zone-group + .zone-group { margin-top: 28px; } .zones-text { margin-top: 28px; } /* ---------- Page hero image ---------- */ .page-hero-img { object-position: center 25%; } /* ---------- About portrait ---------- */ .about-portrait { border-radius: 8px; } .page-credentials { margin-top: 24px; } /* ---------- Contact phones block ---------- */ .contact-phones-block { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-title); font-weight: 700; font-size: 1rem; } .obf-mail { font-weight: 500; font-size: .9rem; } .footer-zones-list { margin-bottom: 20px; } /* ---------- Info card (a-propos diplômes) ---------- */ .info-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 40px; } .info-card { background: var(--white); border-radius: 10px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,.06); border-top: 3px solid var(--orange); } .info-card-icon { width: 48px; height: 48px; background: rgba(255,102,0,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .info-card h3 { font-size: 1rem; margin-bottom: 8px; } .info-card p { font-size: .88rem; color: var(--grey-soft); } /* ---------- Work card (service detail, balades items) ---------- */ .work-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; } .work-card { border: 1px solid var(--border); border-radius: 8px; padding: 28px; } .work-card h3 { margin-bottom: 10px; } .work-card p { font-size: .9rem; color: var(--grey-soft); } /* ---------- Zone card (zones-intervention page) ---------- */ .zone-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 40px; } .zone-card { background: var(--white); border-radius: 12px; padding: 32px; box-shadow: 0 2px 16px rgba(0,0,0,.07); border-top: 4px solid var(--orange); } .zone-card h3 { font-size: 1.2rem; margin-bottom: 6px; } .zone-card-subtitle { font-size: .88rem; color: var(--grey-soft); margin-bottom: 20px; } .zone-card-list { list-style: none; padding: 0; margin: 0 0 24px; color: var(--grey-soft); font-size: .9rem; } .zone-card-list li { padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; } .zone-card-list li:last-child { border-bottom: none; padding-bottom: 0; } .zone-check { color: var(--orange); } .zone-note-box { margin-top: 28px; padding: 24px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); } .zone-note-box p { font-size: .9rem; margin: 0; color: var(--grey-soft); } /* ---------- Service detail card (services page) ---------- */ .service-detail-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 40px; } .service-detail-card { background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(0,0,0,.07); border-top: 3px solid var(--orange); } .service-detail-card--plain { border-top-color: transparent; } .service-detail-card-img { aspect-ratio: 3/2; overflow: hidden; } .service-detail-card-img img { width: 100%; height: 100%; object-fit: cover; } .service-detail-card-body { padding: 28px; } .service-detail-card-body h3 { font-size: 1.3rem; margin-bottom: 12px; } .service-detail-card-body p { color: var(--grey-soft); margin-bottom: 16px; } .service-detail-list { list-style: none; padding: 0; margin: 0 0 20px; color: var(--grey-soft); font-size: .9rem; } .service-detail-list li { padding: 6px 0; border-bottom: 1px solid var(--border); } .service-detail-list li:last-child { border-bottom: none; } /* ---------- Tarif card enhanced (tarifs page) ---------- */ .tarif-card-featured { position: relative; border-top: 4px solid var(--orange); } .tarif-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange); color: var(--white); font-family: var(--font-title); font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 14px; border-radius: 40px; white-space: nowrap; } .tarif-details-list { text-align: left; margin-top: 16px; display: flex; flex-direction: column; gap: 6px; } .tarif-details-list li { font-size: .85rem; color: var(--grey-soft); display: flex; align-items: flex-start; gap: 8px; } .tarif-check { flex-shrink: 0; margin-top: 2px; } /* ---------- Contact page detail cards ---------- */ .contact-detail-cards { display: flex; flex-direction: column; gap: 24px; margin-top: 8px; } .contact-detail-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); border-top: 3px solid var(--orange); } .contact-detail-card--plain { border-top-color: var(--border); } .contact-detail-label { font-family: var(--font-title); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-soft); margin-bottom: 8px; } .contact-detail-phone { font-family: var(--font-title); font-size: 1.4rem; font-weight: 900; color: var(--orange); } .contact-method-steps { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; } .contact-h2 { margin-bottom: 24px; } .contact-zone-gap { margin-top: 28px; } /* ---------- Plan du site ---------- */ .sitemap-zones-section { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--border); } .sitemap-zones-title { margin-bottom: 24px; } .sitemap-zones-desc { color: var(--grey-soft); margin-bottom: 24px; } .zone-tag--link { text-decoration: none; } /* ---------- Politique de confidentialité ---------- */ .legal-iframe-wrap { margin: 16px 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md); } .legal-iframe { border: 0; width: 100%; height: 140px; } /* ========================================================================== Phase 4 — CRO : Zones tactiles & Optimisation Conversion ========================================================================== */ /* ---- Navigation mobile : zones tactiles 48px ---- */ .mobile-nav .nav-link { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; } /* Le CTA "Pré-diagnostic" hérite de nav-link-cta qui force padding:8px — on surcharge */ .mobile-nav .nav-link-cta { justify-content: center; min-height: 48px !important; padding: 12px 16px !important; } /* ---- Liens téléphone hero mobile et nav mobile ---- */ .hero-contact-mobile a, .mobile-phones a { min-height: 48px; display: flex; align-items: center; } /* ---- Boutons principaux : hauteur min 48px sur mobile ---- */ @media (max-width: 768px) { .btn { min-height: 48px; } /* Liens footer : zone tactile agrandie sans modifier le design */ .footer-links a { min-height: 44px; display: flex; align-items: center; } /* Inputs & select : garantir 48px de hauteur minimale sur mobile */ .form-group input, .form-group select, .form-group textarea { min-height: 48px; } } /* ---- CTA "Pré-diagnostic" — renforcement visuel nav desktop ---- Ajout d'un léger box-shadow pour le faire ressortir davantage du header */ .nav-link-cta { box-shadow: 0 0 0 0 transparent; transition: background var(--transition), color var(--transition), box-shadow var(--transition); } .nav-link-cta:hover { box-shadow: 0 2px 8px rgba(255, 102, 0, 0.25); } /* ---- Feedback formulaire : positionné sous le bouton (ne masque plus rien) ---- */ .form-feedback { margin-top: 12px; margin-bottom: 0; } /* ---- Focus-visible — compléments CRO ---- */ .hero-contact-mobile a:focus-visible, .mobile-phones a:focus-visible, .obf-mail:focus-visible, .zone-tag--link:focus-visible, .contact-detail-phone:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: var(--radius); }