Outiref

Code source de l'URL : http://mentalolympique.fr/

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="PageSpeed" content="no-transform" />

<!-- Performance: Preload hero image for homepage only -->
<link rel="preload" as="image" href="/images/lane.webp" fetchpriority="high" imagesrcset="/images/lane.webp" imagesizes="100vw">

<script>
// Basic consent mode setup - only initialize dataLayer and defaults
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }

// Set consent defaults - don't load GA yet
gtag('consent', 'default', {
  'ad_user_data': 'denied',
  'ad_personalization': 'denied',
  'ad_storage': 'denied',
  'analytics_storage': 'denied',
  'wait_for_update': 500
});

// Function to load Google Analytics when consent is granted
window.loadGoogleAnalytics = function() {
  if (!window.ga_loaded) {
    window.ga_loaded = true;
    
    // Update consent
    gtag('consent', 'update', {
      'ad_user_data': 'granted',
      'ad_personalization': 'granted', 
      'ad_storage': 'granted',
      'analytics_storage': 'granted'
    });
    
    // Initialize GA
    gtag('js', new Date());
    gtag('config', 'G-818V9JQC9Q');
    
    // Load the script
    var gtagScript = document.createElement('script');
    gtagScript.async = true;
    gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-818V9JQC9Q';
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(gtagScript, firstScript);
    
    console.log('Google Analytics loaded with consent');
  }
};
</script>

<script src="/cookie-consent.js?v=4" defer></script>

<!-- Primary Meta Tags with enhanced robots meta -->
<title>Frédéric Damato | Préparateur Mental, Coach, et Conférencier</title>
<meta name="description" content="Développez la confiance et la performance d&#039;un champion olympique. Coach mental à Rennes, séances à distance pour toute la France.">
<meta name="author" content="Mental Olympique - Frédéric Damato">
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">

<!-- Canonical URL -->
<link rel="canonical" href="https://mentalolympique.fr/" />

<!-- Open Graph / Facebook Meta Tags with enhanced properties -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://mentalolympique.fr/">
<meta property="og:title" content="Frédéric Damato | Préparateur Mental, Coach, et Conférencier">
<meta property="og:description" content="Développez la confiance et la performance d&#039;un champion olympique. Coach mental à Rennes, séances à distance pour toute la France.">
<meta property="og:image" content="https://mentalolympique.fr/images/fred.webp">
<meta property="og:image:alt" content="Frédéric Damato | Préparateur Mental, Coach, et Conférencier">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Mental Olympique">
<meta property="og:locale" content="fr_FR">

<!-- Twitter Meta Tags with enhanced properties -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@MentalOlympique">
<meta name="twitter:creator" content="@MentalOlympique">
<meta name="twitter:title" content="Frédéric Damato | Préparateur Mental, Coach, et Conférencier">
<meta name="twitter:description" content="Développez la confiance et la performance d&#039;un champion olympique. Coach mental à Rennes, séances à distance pour toute la France.">
<meta name="twitter:image" content="https://mentalolympique.fr/images/fred.webp">
<meta name="twitter:image:alt" content="Frédéric Damato | Préparateur Mental, Coach, et Conférencier">

<!-- Additional SEO Meta Tags -->
<meta name="theme-color" content="#1e40af">
<meta name="format-detection" content="telephone=no">
<meta name="referrer" content="strict-origin-when-cross-origin">

<!-- Hreflang for bilingual content (critical for SEO) -->
<link rel="alternate" hreflang="fr" href="https://mentalolympique.fr/">

<link rel="alternate" hreflang="x-default" href="https://mentalolympique.fr/">

<!-- Favicon -->
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png?v=2" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg?v=2" />
<link rel="shortcut icon" href="/favicon/favicon.ico?v=2" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=2" />
<meta name="apple-mobile-web-app-title" content="Mental" />
<link rel="manifest" href="/favicon/site.webmanifest" />

<!-- Sitemap reference -->
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />

<style>
      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1f2937;
    background-color: #fff;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
}

h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

h3 {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
}

p {
    margin: 0 0 1rem 0;
}

a {
    text-decoration: none;
    color: inherit; /* optional: keeps link color same as surrounding text */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.header {
    background: #1f2937;
    color: #fff;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
}

.logo-accent {
    color: #D28B65;
}

.nav-links {
    display: none;
    gap: 2rem;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: .875rem;
    transition: color .2s;
}

.nav-links a:hover {
    color: #D28B65;
}

.menu-btn {
    background: 0 0;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

@media (min-width: 768px) {
    .nav-links {
        display: flex;
    }
    .menu-btn {
        display: none;
    }
}

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(37, 99, 235, .9), rgba(30, 64, 175, .8));
    z-index: 1;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

.hero-content {
    max-width: 800px;
    padding: 2rem;
    animation: fadeInUp 1s ease-out;
    position: relative;
    z-index: 2;
}

.hero h1 {
    margin-bottom: 1.5rem;
}

.hero-accent {
    color: #D28B65;
}

.hero p {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    margin-bottom: 2rem;
    opacity: .95;
}

.cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.cta-buttons .btn {
  width: 100%;
  text-align: center;
}

@media (min-width: 640px) {
  .cta-buttons {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .cta-buttons .btn {
    width: auto; /* reset so buttons fit their text */
  }
}

.btn {
    display: inline-block;
    padding: .875rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all .3s;
    border: 2px solid transparent;
    min-width: 200px;
}

.btn-primary {
    background: #D28B65;
    color: #002B7F;
    border-color: #D28B65;
}

.btn-primary:hover {
    background: #D28B65;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, .3);
}

.btn-outline {
    background: 0 0;
    color: #fff;
    border-color: #fff;
}

.btn-outline:hover {
    background: #fff;
    color: #1f2937;
}

.section {
    padding: 5rem 0;
}

.section-alt {
    background: #f8fafc;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #D28B65;
}

.services-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.service-card {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    text-align: center;
    transition: all .3s;
    border-top: 4px solid #2563eb;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .15);
}

.service-icon {
    width: 64px;
    height: 64px;
    background: rgba(37, 99, 235, .1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.service-icon svg {
    width: 30px;
    height: 30px;
}

.service-card h3 {
    color: #1f2937;
    margin-bottom: 1rem;
}

.service-card p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.service-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
}

.service-link:hover {
    color: #1d4ed8;
}

.about {
    display: grid;
    gap: 3rem;
    grid-template-columns: 1fr;
    align-items: start;
}

@media (min-width: 1024px) {
    .about {
        grid-template-columns: 1fr 2fr;
    }
}

.about-image {
    text-align: center;
}

.about-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.about-content h2 {
    color: #1e40af;
    margin-bottom: 1.5rem;
}

.about-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.specialties {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr;
    margin: 1.5rem 0;
}

@media (min-width: 640px) {
    .specialties {
        grid-template-columns: repeat(2, 1fr);
    }
}

.specialty {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.check-icon {
    color: #D28B65;
    font-weight: 700;
}

.highlight {
    color: #1e40af;
    font-weight: 600;
}

.testimonials {
    background: #D28B65;
    color: #1f2937;
}

.testimonials .section-title {
    color: #1f2937;
}

.testimonials-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.testimonial-card {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    transition: all .3s;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.testimonial-info h3 {
    font-weight: 700;
    margin-bottom: .25rem;
}

.testimonial-role {
    color: #6b7280;
    font-size: .875rem;
}

.stars {
    color: #fbbf24;
    margin-top: .25rem;
}

.testimonial-text {
    font-style: italic;
    color: #4b5563;
}

.contact-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.contact-card {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    text-align: center;
    transition: all .3s;
    text-decoration: none;
    color: inherit;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    text-decoration: none;
    color: inherit;
}

.contact-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.phone-icon {
    background: rgba(59, 130, 246, .1);
}

.whatsapp-icon {
    background: rgba(34, 197, 94, .1);
}

.email-icon {
    background: rgba(239, 68, 68, .1);
}

.contact-card h3 {
    margin-bottom: .5rem;
}

.contact-details {
    color: #6b7280;
    margin-bottom: 1rem;
    font-size: .875rem;
}

.contact-action {
    color: #2563eb;
    font-weight: 600;
}

.footer {
    background: #1f2937;
    color: #fff;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-section h3 {
    color: #fff;
    margin-bottom: 1rem;
}

.footer-section a {
    color: #d1d5db;
    text-decoration: none;
    transition: color .2s;
}

.footer-section a:hover {
    color: #D28B65;
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, .1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}

.social-links a:hover {
    background: #D28B65;
    transform: translateY(-2px);
}

.social-links svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 1rem;
    text-align: center;
    color: #9ca3af;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: #1f2937;
    z-index: 1000;
    padding: 5rem 2rem 2rem;
    transition: left .3s;
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1rem 0;
    border-bottom: 1px solid #374151;
    font-size: 1.125rem;
}

.mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 2rem;
    background: 0 0;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

.text-center {
    text-align: center;
}

.mb-2 {
    margin-bottom: .5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}
    </style>

<!-- Enhanced Structured Data with improved geographic coverage -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "WebPage",
            "@id": "https://mentalolympique.fr/#webpage",
            "name": "Fr\u00e9d\u00e9ric Damato | Pr\u00e9parateur Mental, Coach, et Conf\u00e9rencier",
            "url": "https://mentalolympique.fr/",
            "description": "Développez la confiance et la performance d\'un champion olympique. Coach mental à Rennes, séances à distance pour toute la France.",
            "inLanguage": "fr-FR",
            "isPartOf": {
                "@type": "WebSite",
                "@id": "https://mentalolympique.fr/#website",
                "name": "Mental Olympique",
                "url": "https://mentalolympique.fr/",
                "description": "Préparation mentale et coaching avec Frédéric Damato, ancien intervenant aux Jeux Olympiques",
                "inLanguage": "fr-FR",
                "publisher": {
                    "@type": "Person",
                    "@id": "https://mentalolympique.fr/#person"
                }
            },
            "primaryImageOfPage": {
                "@type": "ImageObject",
                "url": "https://mentalolympique.fr/images/fred.webp",
                "width": 1200,
                "height": 630
            },
            "datePublished": "2011-01-01T00:00:00+02:00",
            "dateModified": "2026-03-13T02:54:55+01:00"
        },
        {
            "@type": "Person",
            "@id": "https://mentalolympique.fr/#person",
            "name": "Frédéric Damato",
            "jobTitle": "Préparateur Mental, Coach et Conférencier",
            "description": "Coach mental et préparateur mental expérimenté, ancien intervenant aux Jeux Olympiques (Londres 2012 à Paris 2024). Accompagnement sportifs, étudiants et professionnels partout en France.",
            "url": "https://mentalolympique.fr",
            "image": "https://mentalolympique.fr/images/fred.webp",
            "email": "mailto:fred.damato@mentalolympique.fr",
            "telephone": "+33676381491",
            "address": {
                "@type": "PostalAddress",
                "streetAddress": "4 square de Narvik",
                "addressLocality": "Rennes",
                "postalCode": "35200",
                "addressRegion": "Bretagne",
                "addressCountry": "FR"
            },
            "knowsLanguage": ["fr", "en"],
            "serviceArea": [
                {
                    "@type": "City",
                    "name": "Rennes",
                    "description": "Séances en présentiel"
                },
                {
                    "@type": "Country",
                    "name": "France",
                    "description": "Séances à distance en visioconférence"
                }
            ],
            "sameAs": [
                "https://www.linkedin.com/in/frederic-damato/",
                "https://x.com/MentalOlympique",
                "https://www.instagram.com/mentalolympique/",
                "https://www.facebook.com/Mentalolympique/",
                "https://www.tiktok.com/@mental_olympique",
                "https://www.youtube.com/@mentalolympique"
            ]
        },
        {
            "@type": "Service",
            "name": "Coaching Mental pour Sportifs et Adultes",
            "description": "Accompagnement personnalisé en préparation mentale pour sportifs, étudiants, professionnels et particuliers. Séances en présentiel à Rennes et à distance partout en France.",
            "provider": {
                "@type": "Person",
                "@id": "https://mentalolympique.fr/#person"
            },
            "areaServed": [
                {
                    "@type": "City",
                    "name": "Rennes",
                    "description": "Séances en présentiel"
                },
                {
                    "@type": "Country",
                    "name": "France",
                    "description": "Séances à distance en visioconférence"
                }
            ],
            "hasOfferCatalog": {
                "@type": "OfferCatalog",
                "name": "Services de coaching mental",
                "itemListElement": [
                    {
                        "@type": "Offer",
                        "itemOffered": {
                            "@type": "Service",
                            "name": "Préparation Mentale Sportive",
                            "description": "Développement des capacités mentales pour performer en compétition"
                        }
                    },
                    {
                        "@type": "Offer",
                        "itemOffered": {
                            "@type": "Service",
                            "name": "Coaching en Développement Personnel",
                            "description": "Atteinte d'objectifs professionnels et personnels"
                        }
                    },
                    {
                        "@type": "Offer",
                        "itemOffered": {
                            "@type": "Service",
                            "name": "Ateliers et Conférences",
                            "description": "Interventions sur mesure pour entreprises et équipes"
                        }
                    }
                ]
            },
            "availableChannel": {
                "@type": "ServiceChannel",
                "serviceLocation": {
                    "@type": "Place",
                    "address": {
                        "@type": "PostalAddress",
                        "addressLocality": "Rennes",
                        "addressCountry": "FR"
                    }
                },
                "availableLanguage": ["fr", "en"]
            }
        }
    ]
}
</script>    
    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Que fait un coach mental ?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Un coach mental (ou préparateur mental) aide à développer vos capacités mentales pour performer dans les moments clés, gérer le stress efficacement, atteindre vos objectifs professionnels et personnels, et mieux gérer vos émotions. Mon accompagnement s'adresse aux athlètes, étudiants, décideurs et toute personne souhaitant transformer ses blocages en leviers de performance."
      }
    },
    {
      "@type": "Question",
      "name": "À qui s'adressent vos services de coaching mental ?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "J'accompagne les athlètes de tous âges, les étudiants, les décideurs et toute personne souhaitant transformer ses blocages mentaux en leviers de performance durable. Mes services s'adressent aussi bien aux sportifs de compétition qu'aux professionnels et particuliers."
      }
    },
    {
      "@type": "Question",
      "name": "Où se déroulent les séances et dans quelles langues ?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Les séances ont lieu en présentiel à Rennes ou à distance en visioconférence. Je propose un accompagnement en français et en anglais, selon vos préférences et votre emploi du temps."
      }
    },
    {
      "@type": "Question",
      "name": "Proposez-vous des séances à distance ?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Oui, j'accompagne des clients partout en France et à l'international en visioconférence. Les séances à distance sont aussi efficaces qu'en présentiel, comme en témoignent mes clients situés à Dubaï et ailleurs dans le monde."
      }
    },
    {
      "@type": "Question",
      "name": "Quelles sont vos spécialités en préparation mentale ?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Mes spécialités incluent la gestion du stress et des émotions, le développement de la confiance en soi, la création de routines de performance, la préparation à la compétition et l'accompagnement pour les enjeux de très haut niveau, avec une expérience olympique (JO Londres 2012 > Paris 2024)."
      }
    },
    {
      "@type": "Question",
      "name": "Comment prendre contact pour un premier échange ?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Vous pouvez me contacter directement par téléphone au 06 76 38 14 91, via WhatsApp, ou par email à fred.damato@mentalolympique.fr. Je réponds rapidement à toutes vos questions pour évaluer comment mon accompagnement peut répondre à vos besoins."
      }
    }
  ]
}
</script>

<style>
/* Blog Section Styles */
.blog-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.blog-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981);
}

.section-title-blog {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.125rem;
    max-width: 600px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

/* NEW BLOG LAYOUT - Big Square on Left, Two Individual Squares on Right */
.blog-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Left Column - Latest Article (Big Square) */
.latest-article-large {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.latest-article-large:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    border-color: #3b82f6;
}

.large-article-image-container {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.large-article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s ease;
    display: block;
    max-width: 100%;
}

.latest-article-large:hover .large-article-image {
    transform: scale(1.05);
    transform-origin: center top;
}

.large-article-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.large-article-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.large-article-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #64748b;
    font-size: 0.875rem;
}

.large-article-date {
    background: #f1f5f9;
    color: #334155;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.large-article-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.large-article-excerpt {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex: 1;
}

.large-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.large-article-tag {
    background: #eff6ff;
    color: #1e40af;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.large-article-tag:hover {
    background: #dbeafe;
    transform: translateY(-1px);
}

.large-article-cta {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.large-read-more-btn {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: white;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    justify-content: center;
}

.large-read-more-btn:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.large-read-more-btn::after {
    content: '→';
    transition: transform 0.3s ease;
}

.large-read-more-btn:hover::after {
    transform: translateX(3px);
}

/* Right Column - Two Individual Article Cards (Original Layout) */
.small-articles-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ORIGINAL BLOG CARD LAYOUT FOR OTHER ARTICLES */
.blog-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
    flex: 1;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #3b82f6;
}

.blog-card-image {
    height: 180px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    max-width: 100%;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-content {
    padding: 1.5rem;
}

.blog-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.blog-card-excerpt {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.blog-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #64748b;
}

.blog-card-link {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.blog-card-link:hover {
    gap: 8px;
    color: #1e40af;
    text-decoration: underline;
}

.blog-card-link:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 2px;
}

.view-more-container {
    text-align: center;
    margin-top: 3rem;
}

.view-more-btn {
    background: #1E40AF;
    color: #FFFFFF;
    padding: 12px 32px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border: 2px solid #1E40AF;
}

.view-more-btn:hover {
    background: #1d4ed8;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
    border-color: #1d4ed8;
}

.view-more-btn:focus-visible,
.large-read-more-btn:focus-visible,
.blog-card-link:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 4px;
}

/* FIX FOR ABOUT IMAGE */
.about-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    display: block;
    margin: 0 auto;
}

/* Ensure images don't inherit problematic global img rules */
.large-article-image,
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-width: 100%;
    border: 0;
    box-shadow: none;
}

/* For portrait-oriented images */
@media (orientation: portrait) {
    .large-article-image,
    .blog-card-image img {
        object-position: 50% 20%;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .blog-grid-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 600px;
    }
    
    .large-article-image-container {
        height: 250px;
    }
    
    .blog-card-image {
        height: 200px;
    }
}

@media (max-width: 768px) {
    .section-title-blog {
        font-size: 2rem;
    }
    
    .blog-section {
        padding: 3rem 0;
    }
    
    .large-article-image-container {
        height: 200px;
    }
    
    .large-article-content {
        padding: 1.25rem;
    }
    
    .large-article-title {
        font-size: 1.25rem;
    }
    
    .blog-card-image {
        height: 180px;
    }
    
    .blog-card-content {
        padding: 1.25rem;
    }
    
    .blog-card-title {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .blog-section {
        padding: 2rem 0;
    }
    
    .section-subtitle {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .large-article-badge {
        top: 10px;
        left: 10px;
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    .large-article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .blog-card-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
</style>

  </head>
  <body>
     <header class="header" role="banner">
    <div class="container">
        <nav class="nav" role="navigation" aria-label="Navigation principale">
            <a href="/" class="logo" aria-label="Fred Damato - Retour à l'accueil">
                Fred <span class="logo-accent">DAMATO</span>
            </a>
            
            <div class="nav-links">
                <a href="/">Accueil</a>
                
                <!-- Preparation Mentale Dropdown -->
                <div class="dropdown">
                    <div class="dropdown-main">
                        <a href="/preparation-mentale/" class="nav-link-with-dropdown">Préparation Mentale</a>
                        <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Ouvrir le menu préparation mentale">
                            <span class="dropdown-chevron">
                                <svg viewbox="0 0 640 640" width="12" height="12" fill="currentColor">
                                    <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                                </svg>
                            </span>
                        </button>
                    </div>
                    <div class="dropdown-menu" role="menu" aria-label="Sous-menu préparation mentale">
                        <a href="/preparation-mentale/adultes" role="menuitem">Adultes</a>
                        <a href="/preparation-mentale/ados" role="menuitem">-17 ans</a>
                        <a href="/preparation-mentale/enfants" role="menuitem">-13 ans</a>
                        <a href="/preparation-mentale/parents" role="menuitem">Parents</a>
                        <a href="/preparation-mentale/pros" role="menuitem">Pros</a>
                        <a href="/preparation-mentale/etudiants" role="menuitem">Étudiants</a>
                        <a href="/preparation-mentale/tarif-1-seance" role="menuitem">Tarif 1 séance</a>
                    </div>
                </div>
                
                <!-- Coaching Dropdown -->
                <div class="dropdown">
                    <div class="dropdown-main">
                        <a href="/coaching/" class="nav-link-with-dropdown">Coaching</a>
                        <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Ouvrir le menu coaching">
                            <span class="dropdown-chevron">
                                <svg viewbox="0 0 640 640" width="12" height="12" fill="currentColor">
                                    <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                                </svg>
                            </span>
                        </button>
                    </div>
                    <div class="dropdown-menu" role="menu" aria-label="Sous-menu coaching">
                        <a href="/coaching" role="menuitem">Développement Personnel</a>
                        <a href="/coaching/distance" role="menuitem">À Distance</a>
                        <a href="/coaching/boost" role="menuitem">Séance BOOST</a>
                        <a href="/coaching/tarifs" role="menuitem">Tarifs</a>
                        <a href="/coaching/english" role="menuitem">Mental Coaching</a>
                    </div>
                </div>
                
                <!-- Infos Dropdown -->
                <div class="dropdown">
                    <div class="dropdown-main">
                        <a href="/infos-pratiques/" class="nav-link-with-dropdown">Infos</a>
                        <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Ouvrir le menu informations">
                            <span class="dropdown-chevron">
                                <svg viewbox="0 0 640 640" width="12" height="12" fill="currentColor">
                                    <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                                </svg>
                            </span>
                        </button>
                    </div>
                    <div class="dropdown-menu dropdown-menu-right" role="menu" aria-label="Sous-menu informations">
                        <a href="/infos-pratiques" role="menuitem">Tarifs</a>
                        <a href="/infos-pratiques/deontologie" role="menuitem">Déontologie</a>
                        <a href="/infos-pratiques/archives" role="menuitem">Archives</a>
                        <a href="/infos-pratiques/references" role="menuitem">Références</a>
                        <a href="/infos-pratiques/faq" role="menuitem">FAQ</a>
                        <a href="/articles/" role="menuitem">Explorer</a>
                    </div>
                </div>
                
                <!-- Avis Dropdown -->
                <div class="dropdown">
                    <div class="dropdown-main">
                        <a href="/avis/" class="nav-link-with-dropdown">Avis</a>
                        <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Ouvrir le menu avis">
                            <span class="dropdown-chevron">
                                <svg viewbox="0 0 640 640" width="12" height="12" fill="currentColor">
                                    <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                                </svg>
                            </span>
                        </button>
                    </div>
                    <div class="dropdown-menu dropdown-menu-right" role="menu" aria-label="Sous-menu avis">
                        <a href="/avis/" role="menuitem">Sportifs</a>
                        <a href="/avis/parents" role="menuitem">Parents</a>
                        <a href="/avis/personnel" role="menuitem">Développement Personnel</a>
                        <a href="/avis/entraineurs" role="menuitem">Entraineurs</a>
                    </div>
                </div>
                
                <a href="/blogs">Blog</a>
            </div>
            
            <button class="menu-btn" onclick="toggleMobileMenu()" aria-label="Ouvrir le menu de navigation" aria-expanded="false" aria-controls="mobileMenu">
                ☰
            </button>
        </nav>
    </div>
    
    <!-- Mobile Menu -->
    <div id="mobileMenu" class="mobile-menu" role="dialog" aria-modal="true" aria-label="Menu mobile">
        <button class="mobile-menu-close" onclick="toggleMobileMenu()" aria-label="Fermer le menu">×</button>
        
        <a href="/" onclick="toggleMobileMenu()">Accueil</a>
        
        <!-- Mobile Preparation Mentale Dropdown -->
        <div class="mobile-menu-item">
            <div class="mobile-menu-header">
                <a href="/preparation-mentale/" onclick="toggleMobileMenu()">Préparation Mentale</a>
                <button class="mobile-dropdown-toggle" aria-expanded="false" aria-controls="mobile-submenu-preparation" aria-label="Ouvrir le sous-menu Préparation Mentale">
                    <span class="mobile-chevron">
                        <svg viewbox="0 0 640 640" width="10" height="10" fill="currentColor">
                            <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                        </svg>
                    </span>
                </button>
            </div>
            <div id="mobile-submenu-preparation" class="mobile-submenu" role="menu" aria-label="Sous-menu préparation mentale">
                <a href="/preparation-mentale/adultes" onclick="toggleMobileMenu()" role="menuitem">Adultes</a>
                <a href="/preparation-mentale/ados" onclick="toggleMobileMenu()" role="menuitem">-17 ans</a>
                <a href="/preparation-mentale/enfants" onclick="toggleMobileMenu()" role="menuitem">-13 ans</a>
                <a href="/preparation-mentale/parents" onclick="toggleMobileMenu()" role="menuitem">Parents</a>
                <a href="/preparation-mentale/pros" onclick="toggleMobileMenu()" role="menuitem">Pros</a>
                <a href="/preparation-mentale/etudiants" onclick="toggleMobileMenu()" role="menuitem">Étudiants</a>
                <a href="/preparation-mentale/tarif-1-seance" onclick="toggleMobileMenu()" role="menuitem">Tarif 1 séance</a>
            </div>
        </div>
        
        <!-- Mobile Coaching Dropdown -->
        <div class="mobile-menu-item">
            <div class="mobile-menu-header">
                <a href="/coaching/" onclick="toggleMobileMenu()">Coaching</a>
                <button class="mobile-dropdown-toggle" aria-expanded="false" aria-controls="mobile-submenu-coaching" aria-label="Ouvrir le sous-menu Coaching">
                    <span class="mobile-chevron">
                        <svg viewbox="0 0 640 640" width="10" height="10" fill="currentColor">
                            <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                        </svg>
                    </span>
                </button>
            </div>
            <div id="mobile-submenu-coaching" class="mobile-submenu" role="menu" aria-label="Sous-menu coaching">
                <a href="/coaching" onclick="toggleMobileMenu()" role="menuitem">Développement Personnel</a>
                <a href="/coaching/distance" onclick="toggleMobileMenu()" role="menuitem">À Distance</a>
                <a href="/coaching/boost" onclick="toggleMobileMenu()" role="menuitem">Séance BOOST</a>
                <a href="/coaching/tarifs" onclick="toggleMobileMenu()" role="menuitem">Tarifs</a>
                <a href="/coaching/english" onclick="toggleMobileMenu()" role="menuitem">Mental Coaching</a>
            </div>
        </div>
        
        <!-- Mobile Infos Dropdown -->
        <div class="mobile-menu-item">
            <div class="mobile-menu-header">
                <a href="/infos-pratiques/" onclick="toggleMobileMenu()">Infos</a>
                <button class="mobile-dropdown-toggle" aria-expanded="false" aria-controls="mobile-submenu-infos" aria-label="Ouvrir le sous-menu Infos">
                    <span class="mobile-chevron">
                        <svg viewbox="0 0 640 640" width="10" height="10" fill="currentColor">
                            <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                        </svg>
                    </span>
                </button>
            </div>
            <div id="mobile-submenu-infos" class="mobile-submenu" role="menu" aria-label="Sous-menu informations">
                <a href="/infos-pratiques" onclick="toggleMobileMenu()" role="menuitem">Tarifs</a>
                <a href="/infos-pratiques/deontologie" onclick="toggleMobileMenu()" role="menuitem">Déontologie</a>
                <a href="/infos-pratiques/archives" onclick="toggleMobileMenu()" role="menuitem">Archives</a>
                <a href="/infos-pratiques/references" onclick="toggleMobileMenu()" role="menuitem">Références</a>
                <a href="/infos-pratiques/faq" onclick="toggleMobileMenu()" role="menuitem">FAQ</a>
                <a href="/articles/" onclick="toggleMobileMenu()" role="menuitem">Explorer</a>
            </div>
        </div>
        
        <!-- Mobile Avis Dropdown -->
        <div class="mobile-menu-item">
            <div class="mobile-menu-header">
                <a href="/avis/" onclick="toggleMobileMenu()">Avis</a>
                <button class="mobile-dropdown-toggle" aria-expanded="false" aria-controls="mobile-submenu-avis" aria-label="Ouvrir le sous-menu Avis">
                    <span class="mobile-chevron">
                        <svg viewbox="0 0 640 640" width="10" height="10" fill="currentColor">
                            <path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/>
                        </svg>
                    </span>
                </button>
            </div>
            <div id="mobile-submenu-avis" class="mobile-submenu" role="menu" aria-label="Sous-menu avis">
                <a href="/avis/" onclick="toggleMobileMenu()" role="menuitem">Sportifs</a>
                <a href="/avis/parents" onclick="toggleMobileMenu()" role="menuitem">Parents</a>
                <a href="/avis/personnel" onclick="toggleMobileMenu()" role="menuitem">Développement Personnel</a>
                <a href="/avis/entraineurs" onclick="toggleMobileMenu()" role="menuitem">Entraineurs</a>
            </div>
        </div>
        
        <a href="/blogs" onclick="toggleMobileMenu()">Blog</a>
    </div>
</header>

<style>
/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-main {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-link-with-dropdown {
    color: #fff;
    text-decoration: none;
    font-size: .875rem;
    transition: color .2s;
}

.nav-link-with-dropdown:hover {
    color: #D28B65;
}

.dropdown-toggle {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.25rem;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.dropdown-toggle:hover {
    color: #D28B65;
}

.dropdown-chevron {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown.active .dropdown-chevron {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    border: 1px solid #e5e7eb;
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s;
}

.dropdown-menu a:hover {
    background: #f8fafc;
    color: #D28B65;
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

/* Mobile Menu Dropdown Styles */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.mobile-dropdown-toggle {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mobile-chevron {
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu-item.active .mobile-chevron {
    transform: rotate(180deg);
}

.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-left: 1rem;
}

.mobile-menu-item.active .mobile-submenu {
    max-height: 500px;
}

.mobile-submenu a {
    display: block;
    padding: 0.75rem 0;
    color: #d1d5db;
    text-decoration: none;
    font-size: 0.875rem;
    border-bottom: 1px solid #374151;
}

.mobile-submenu a:hover {
    color: #D28B65;
}

.mobile-submenu a:last-child {
    border-bottom: none;
}

/* Ensure nav-links display properly with dropdowns */
@media (min-width: 768px) {
    .nav-links {
        display: flex;
        gap: 2rem;
        align-items: center;
    }
    
    .nav-links > a {
        color: #fff;
        text-decoration: none;
        font-size: .875rem;
        transition: color .2s;
    }
    
    .nav-links > a:hover {
        color: #D28B65;
    }
}

/* Mobile menu base styles */
.mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: #1f2937;
    z-index: 1000;
    padding: 5rem 2rem 2rem;
    transition: left .3s;
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1rem 0;
    border-bottom: 1px solid #374151;
    font-size: 1.125rem;
}

.mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 2rem;
    background: 0 0;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}
</style>

<script>
// Desktop dropdown functionality
function initDropdowns() {
    const dropdowns = document.querySelectorAll('.dropdown');
    
    dropdowns.forEach(dropdown => {
        const toggle = dropdown.querySelector('.dropdown-toggle');
        
        // Click functionality
        toggle.addEventListener('click', function(e) {
            e.stopPropagation();
            const isActive = dropdown.classList.contains('active');
            
            // Close all other dropdowns
            dropdowns.forEach(otherDropdown => {
                if (otherDropdown !== dropdown) {
                    otherDropdown.classList.remove('active');
                }
            });
            
            // Toggle current dropdown
            dropdown.classList.toggle('active');
            toggle.setAttribute('aria-expanded', !isActive);
        });
        
        // Hover functionality for desktop
        dropdown.addEventListener('mouseenter', function() {
            if (window.innerWidth >= 768) {
                dropdown.classList.add('active');
                toggle.setAttribute('aria-expanded', 'true');
            }
        });
        
        dropdown.addEventListener('mouseleave', function() {
            if (window.innerWidth >= 768) {
                dropdown.classList.remove('active');
                toggle.setAttribute('aria-expanded', 'false');
            }
        });
    });
    
    // Close dropdowns when clicking outside
    document.addEventListener('click', function() {
        dropdowns.forEach(dropdown => {
            dropdown.classList.remove('active');
            dropdown.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');
        });
    });
}

// Mobile menu functionality
function toggleMobileMenu() {
    const mobileMenu = document.getElementById('mobileMenu');
    const menuBtn = document.querySelector('.menu-btn');
    const isExpanded = menuBtn.getAttribute('aria-expanded') === 'true';
    
    mobileMenu.classList.toggle('active');
    menuBtn.setAttribute('aria-expanded', !isExpanded);
    menuBtn.setAttribute('aria-label', isExpanded ? 'Ouvrir le menu de navigation' : 'Fermer le menu de navigation');
}

// Mobile dropdown functionality
function initMobileDropdowns() {
    const mobileDropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle');
    
    mobileDropdownToggles.forEach(toggle => {
        toggle.addEventListener('click', function(e) {
            e.stopPropagation();
            const menuItem = this.closest('.mobile-menu-item');
            const isActive = menuItem.classList.contains('active');
            
            // Close all other mobile dropdowns
            document.querySelectorAll('.mobile-menu-item').forEach(item => {
                if (item !== menuItem) {
                    item.classList.remove('active');
                }
            });
            
            // Toggle current dropdown
            menuItem.classList.toggle('active');
            this.setAttribute('aria-expanded', !isActive);
        });
    });
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
    initDropdowns();
    initMobileDropdowns();
    
    // Close mobile menu when clicking on a link
    document.querySelectorAll('#mobileMenu a').forEach(link => {
        link.addEventListener('click', function() {
            if (window.innerWidth < 768) {
                toggleMobileMenu();
            }
        });
    });
});

// Handle window resize
window.addEventListener('resize', function() {
    // Close all dropdowns on mobile
    if (window.innerWidth < 768) {
        document.querySelectorAll('.dropdown').forEach(dropdown => {
            dropdown.classList.remove('active');
        });
    }
});
</script>    
    <section class="hero" style="background: url('/images/lane.webp') no-repeat center center / cover;">
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <h1>
      Préparateur Mental <br /><span class="hero-accent">Coach et Conférencier</span>
    </h1>
    <p>
      Développez un <strong class="hero-accent">Mental Olympique</strong>
    </p>
    <div class="cta-buttons">
      <a href="#contact" class="btn btn-primary">Contactez-moi</a>
      <a href="#services" class="btn btn-outline">Découvrez mes Services</a>
    </div>
  </div>
</section>
    
    <section
      id="services"
      class="section section-alt"
      aria-labelledby="services-title"
    >
      <div class="container">
        <h2 id="services-title" class="section-title">Mes Services</h2>
        <div class="services-grid" role="list" aria-label="Liste des services proposés">
  <div class="service-card" role="listitem">
    <a href="/preparation-mentale" aria-label="En savoir plus sur la préparation mentale" target="_blank">
      <div class="service-icon" aria-hidden="true">
        <svg viewbox="0 0 512 512">
          <path fill="#2563eb" d="M4.1 38.2C1.4 34.2 0 29.4 0 24.6C0 11 11 0 24.6 0L133.9 0c11.2 0 21.7 5.9 27.4 15.5l68.5 114.1c-48.2 6.1-91.3 28.6-123.4 61.9L4.1 38.2zm503.7 0L405.6 191.5c-32.1-33.3-75.2-55.8-123.4-61.9L350.7 15.5C356.5 5.9 366.9 0 378.1 0L487.4 0C501 0 512 11 512 24.6c0 4.8-1.4 9.6-4.1 13.6zM80 336a176 176 0 1 1 352 0A176 176 0 1 1 80 336zm184.4-94.9c-3.4-7-13.3-7-16.8 0l-22.4 45.4c-1.4 2.8-4 4.7-7 5.1L168 298.9c-7.7 1.1-10.7 10.5-5.2 16l36.3 35.4c2.2 2.2 3.2 5.2 2.7 8.3l-8.6 49.9c-1.3 7.6 6.7 13.5 13.6 9.9l44.8-23.6c2.7-1.4 6-1.4 8.7 0l44.8 23.6c6.9 3.6 14.9-2.2 13.6-9.9l-8.6-49.9c-.5-3 .5-6.1 2.7-8.3l36.3-35.4c5.6-5.4 2.5-14.8-5.2-16l-50.1-7.3c-3-.4-5.7-2.4-7-5.1l-22.4-45.4z"/>
        </svg>
      </div>
      <h3>Préparation Mentale</h3>
      <p>
        Développez vos capacités mentales pour performer dans les moments
        clés de compétition et gérer le stress efficacement.
      </p>
      <div class="service-link">En savoir plus →</div>
    </a>
  </div>
  
  <div class="service-card" role="listitem">
    <a href="/coaching" aria-label="En savoir plus sur le coaching en développement personnel">
      <div class="service-icon" aria-hidden="true">
        <svg viewbox="0 0 448 512">
          <path fill="#2563eb" d="M370.7 96.1C346.1 39.5 289.7 0 224 0S101.9 39.5 77.3 96.1C60.9 97.5 48 111.2 48 128l0 64c0 16.8 12.9 30.5 29.3 31.9C101.9 280.5 158.3 320 224 320s122.1-39.5 146.7-96.1c16.4-1.4 29.3-15.1 29.3-31.9l0-64c0-16.8-12.9-30.5-29.3-31.9zM336 144l0 16c0 53-43 96-96 96l-32 0c-53 0-96-43-96-96l0-16c0-26.5 21.5-48 48-48l128 0c26.5 0 48 21.5 48 48zM189.3 162.7l-6-21.2c-.9-3.3-3.9-5.5-7.3-5.5s-6.4 2.2-7.3 5.5l-6 21.2-21.2 6c-3.3 .9-5.5 3.9-5.5 7.3s2.2 6.4 5.5 7.3l21.2 6 6 21.2c.9 3.3 3.9 5.5 7.3 5.5s6.4-2.2 7.3-5.5l6-21.2 21.2-6c3.3-.9 5.5-3.9 5.5-7.3s-2.2-6.4-5.5-7.3l-21.2-6zM112.7 316.5C46.7 342.6 0 407 0 482.3C0 498.7 13.3 512 29.7 512l98.3 0 0-64c0-17.7 14.3-32 32-32l128 0c17.7 0 32 14.3 32 32l0 64 98.3 0c16.4 0 29.7-13.3 29.7-29.7c0-75.3-46.7-139.7-112.7-165.8C303.9 338.8 265.5 352 224 352s-79.9-13.2-111.3-35.5zM176 448c-8.8 0-16 7.2-16 16l0 48 32 0 0-48c0-8.8-7.2-16-16-16zm96 32a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/>
        </svg>
      </div>
      <h3>Coaching en Développement Personnel</h3>
      <p>
        Atteignez vos objectifs professionnels et personnels en apprenant
        à mieux gérer vos émotions et à penser enfin à vous.
      </p>
      <div class="service-link">En savoir plus →</div>
    </a>
  </div>
  
  <div class="service-card" role="listitem">
    <a href="/articles/interventions-preparation-mentale" aria-label="En savoir plus sur les ateliers et conférences">
      <div class="service-icon" aria-hidden="true">
        <svg viewbox="0 0 640 512">
          <path fill="#2563eb" d="M144 0a80 80 0 1 1 0 160A80 80 0 1 1 144 0zM512 0a80 80 0 1 1 0 160A80 80 0 1 1 512 0zM0 298.7C0 239.8 47.8 192 106.7 192l42.7 0c15.9 0 31 3.5 44.6 9.7c-1.3 7.2-1.9 14.7-1.9 22.3c0 38.2 16.8 72.5 43.3 96c-.2 0-.4 0-.7 0L21.3 320C9.6 320 0 310.4 0 298.7zM405.3 320c-.2 0-.4 0-.7 0c26.6-23.5 43.3-57.8 43.3-96c0-7.6-.7-15-1.9-22.3c13.6-6.3 28.7-9.7 44.6-9.7l42.7 0C592.2 192 640 239.8 640 298.7c0 11.8-9.6 21.3-21.3 21.3l-213.3 0zM224 224a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zM128 485.3C128 411.7 187.7 352 261.3 352l117.3 0C452.3 352 512 411.7 512 485.3c0 14.7-11.9 26.7-26.7 26.7l-330.7 0c-14.7 0-26.7-11.9-26.7-26.7z"/>
        </svg>
      </div>
      <h3>Conférences, Ateliers et Speeches</h3>
      <p>
        Des interventions sur mesure, inspirées des enjeux du sport de
        haut niveau, pour renforcer la cohésion, la confiance en soi et la
        gestion des émotions.
      </p>
      <div class="service-link">En savoir plus →</div>
    </a>
  </div>
</div>
      </section>
    
        <section id="about" class="section">
  <div class="container">
    <div class="about">
      <div class="about-image">
        <a href="/infos-pratiques/a-propos" target="_blank">
          <img
            src="/images/fred.webp"
                        alt="Frédéric Damato, préparateur mental"
            class="about-img"
            loading="lazy"
            width="400"
            height="400"
            data-pagespeed-no-transform=""
            data-no-lazy="1"
          />
        </a>
      </div>
      <div class="about-content">
        <h2><a href="/infos-pratiques/a-propos" class="text-primary">Frédéric Damato</a></h2>
        <p>
          <strong>
            <a href="/infos-pratiques/a-propos" class="text-primary">Préparateur Mental depuis 2011 • Intervenant aux Jeux
            Olympiques • Coach en Développement Personnel</a>
          </strong>
        </p>
        <p>
          J'aide <a class="highlight" href="/avis" target="_blank">les Athlètes</a>, 
          <a class="highlight" href="/avis/parents">de tous Âges</a>, 
          <a class="highlight" href="/temoignage/examens">les Étudiants</a> 
          et <a class="highlight" href="/coaching/dirigeants-cadres">les Décideurs</a> 
          à transformer leurs blocages mentaux en leviers de Performance
          durable.
          <a href="/infos-pratiques/a-propos" class="text-primary font-medium" target="_blank">En savoir plus →</a>
        </p>
        <div class="mb-4">
          <div class="specialty">
            <span class="check-icon">🎯</span>
            <span>
              Plus de 700 personnes accompagnées, hors conférences,
              ateliers et équipes Pro
            </span>
          </div>
          <div class="specialty">
            <span class="check-icon">🏅</span>
            <span>Expérience olympique (JO Londres 2012 > Paris 2024)</span>
          </div>
          <div class="specialty">
            <span class="check-icon">🌍</span>
            <span>
              Séances en 
              <a href="/preparation-mentale" class="text-primary">Français</a> 
              & 
              <a href="/coaching/english" class="text-primary">Anglais</a>, 
              en 
              <a href="/contact/" class="text-primary">Présentiel à Rennes</a> 
              ou 
              <a href="/coaching/distance" class="text-primary" target="_blank">à Distance</a>
            </span>
          </div>
        </div>
        <h3>Mes spécialités :</h3>
        <div class="specialties">
          <div class="specialty">
            <span class="check-icon">✓</span>
            <span>
            <a href="/articles/stress" class="highlight">Gestion du Stress</a> & 
            <a href="/articles/emotions" class="highlight">des Émotions</a>
            </span>
          </div>
          <div class="specialty">
            <span class="check-icon">✓</span>
            <span>
              <a href="/articles/confiance" class="highlight" target="_blank">Confiance en Soi</a> & 
              <a href="/articles/routines" class="highlight">Routines de Performance</a>
            </span>
          </div>
          <div class="specialty">
            <span class="check-icon">✓</span>
            <a href="/preparation-mentale/evenements" class="highlight" target="_blank">Préparation à la Compétition</a>
          </div>
          <div class="specialty">
            <span class="check-icon">✓</span>
            <a href="/preparation-mentale/pros" class="highlight">Enjeux de très Haut Niveau</a>
          </div>
        </div>
        <p>
          <strong>
            Mon Objectif : vous aider à développer un <a href="/avis" class="text-primary">Mental Olympique</a> !
          </strong>
        </p>
        <div style="margin-top:3rem; text-align:center">
          <a href="/infos-pratiques/media" class="text-primary">
            <img
              src="/images/media-600.webp"
              srcset="/images/media-600.webp 600w,                      /images/media-1200.webp 1200w"
              sizes="(max-width: 600px) 100vw, 600px"
              alt="Médias partenaires - France TV, Capital, Ouest France, BBC, Management, JDE"
              loading="lazy"
              width="600"
              height="200"
              style="max-width:600px; height:auto; width:100%"
              data-pagespeed-no-transform=""
              data-no-lazy="1"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

    <section id="testimonials" class="section testimonials">
      <div class="container">
        <h2 class="section-title">Témoignages</h2>
        <div class="testimonials-grid">
          <a href="/temoignage/basket" class="testimonial-card" target="_blank">
            <div class="testimonial-header">
              <div class="testimonial-info">
                <h3>Hervé</h3>
                <div class="testimonial-role">Papa de basketeur, Dubaï</div>
                <div class="stars" aria-label="5 étoiles sur 5">★★★★★</div>
              </div>
            </div>
            <div class="testimonial-text">
              "Mon fils a pris confiance en ses forces et a réalisé l'une de ses
              meilleures performances."
            </div>
          </a>
          <a href="/temoignage/football" class="testimonial-card">
            <div class="testimonial-header">
              <div class="testimonial-info">
                <h3>Flavio</h3>
                <div class="testimonial-role">Sportif (Football)</div>
                <div class="stars" aria-label="5 étoiles sur 5">★★★★★</div>
              </div>
            </div>
            <div class="testimonial-text">
              "Je ne pensais pas que le mental jouait autant sur les
              performances avant de travailler avec Frédéric."
            </div>
          </a>
          <a href="/temoignage/christophe" class="testimonial-card">
            <div class="testimonial-header">
              <div class="testimonial-info">
                <h3>Christophe</h3>
                <div class="testimonial-role">Développement Personnel</div>
                <div class="stars" aria-label="5 étoiles sur 5">★★★★★</div>
              </div>
            </div>
            <div class="testimonial-text">
              "J'ai sollicité Frédéric pour un accompagnement en développement
              personnel. Un vrai Boost dans ma vie."
            </div>
          </a>
        </div>
      </div>
    </section>
    
    <!-- NEW BLOG LAYOUT SECTION -->
        <section id="blog-section" class="blog-section">
        <div class="container">
            <h2 class="section-title-blog">C’est tout frais ! 
<br>Mon dernier article de Blog</h2>
            <p class="section-subtitle">Tout savoir sur la préparation mentale, le développement personnel, les coulisses du sport de haut niveau et un max de sujets que je partage avec passion et avec vous !</p>
            
            <div class="blog-grid-layout">
                <!-- Left Column - Latest Article (Big Square) -->
                                <div class="latest-article-large">
                    <div class="large-article-image-container">
                        <span class="large-article-badge">Dernier article</span>
                                                <img 
                            src="/images/blog/noah-maillot-jaune.webp" 
                                                        alt="Préparation mentale du sportif : pourquoi et quand commencer ?" 
                            class="large-article-image" 
                            loading="lazy" 
                            width="600" 
                            height="300"
                            data-pagespeed-no-transform=""
                            data-no-lazy="1"
                        >
                                            </div>
                    <div class="large-article-content">
                        <div class="large-article-meta">
                            <span class="large-article-date">01/03/2026</span>
                        </div>
                        <h3 class="large-article-title">Préparation mentale du sportif : pourquoi et quand commencer ?</h3>
                        <p class="large-article-excerpt">
                            La préparation mentale permet au sportif d'être plus régulier, plus confiant et plus efficace en compétition. Découvrez à quel âge commencer et comment le mental évolue avec la progression sportive.                        </p>
                        
                                                <div class="large-article-tags">
                                                        <span class="large-article-tag">préparation mentale</span>
                                                        <span class="large-article-tag">sportifs</span>
                                                        <span class="large-article-tag">enfants</span>
                                                    </div>
                                                
                        <div class="large-article-cta">
                            <a href="/blog/preparation-mentale-sportif-pourquoi-quand-commencer" class="large-read-more-btn">Lire l'article complet</a>
                        </div>
                    </div>
                </div>
                                
                <!-- Right Column - Two Individual Article Cards (Original Layout) -->
                <div class="small-articles-column">
                                                                    <article class="blog-card">
                            <div class="blog-card-image">
                                                                <img 
                                    src="/images/blog/distance-presentiel.webp" 
                                                                        alt="Préparation mentale à distance ou en présentiel : quelles différences ?" 
                                    loading="lazy" 
                                    width="400" 
                                    height="180"
                                    data-pagespeed-no-transform=""
                                    data-no-lazy="1"
                                >
                                                            </div>
                            <div class="blog-card-content">
                                <h4 class="blog-card-title">Préparation mentale à distance ou en présentiel : quelles différences...</h4>
                                <p class="blog-card-excerpt">
                                    La séance de préparation mentale à distance suscite encore des questions légitimes chez les...                                </p>
                                <div class="blog-card-meta">
                                    <time datetime="2026-01-11">
                                        11/01/2026                                    </time>
                                    <a href="/blog/distance-presentiel" 
                                       class="blog-card-link" 
                                       aria-label="Lire l'article : Préparation mentale à distance ou en présentiel : quelles différences ?">
                                       Lire l'article →
                                    </a>
                                </div>
                            </div>
                        </article>
                                                <article class="blog-card">
                            <div class="blog-card-image">
                                                                <img 
                                    src="/images/blog/lacher-prise.webp" 
                                                                        alt="Le lâcher-prise est notre plus grande force mentale" 
                                    loading="lazy" 
                                    width="400" 
                                    height="180"
                                    data-pagespeed-no-transform=""
                                    data-no-lazy="1"
                                >
                                                            </div>
                            <div class="blog-card-content">
                                <h4 class="blog-card-title">Le lâcher-prise est notre plus grande force mentale</h4>
                                <p class="blog-card-excerpt">
                                    Décryptage du lâcher-prise comme compétence clé en préparation mentale : stopper la quête de...                                </p>
                                <div class="blog-card-meta">
                                    <time datetime="2025-05-19">
                                        19/05/2025                                    </time>
                                    <a href="/blog/lacher-prise" 
                                       class="blog-card-link" 
                                       aria-label="Lire l'article : Le lâcher-prise est notre plus grande force mentale">
                                       Lire l'article →
                                    </a>
                                </div>
                            </div>
                        </article>
                                                            </div>
            </div>
            
                        <div class="view-more-container">
                <a href="/blogs" class="view-more-btn">
                    <span>Voir tous les articles</span>
                </a>
            </div>
                    </div>
    </section>
        
    <section id="contact" class="section section-alt">
      <div class="container">
        <h2 class="section-title">
          Vous cherchez votre Coach Mental à Distance ou à Rennes ?
        </h2>
        <p class="text-center mb-4">
          Posez-moi votre question et je vous réponds très vite !
        </p>
        <div class="contact-grid">
          <a href="tel:+33676381491" class="contact-card"
            ><div class="contact-icon phone-icon">
              <svg viewbox="0 0 512 512" width="30" height="30">
                <path
                  fill="#3b82f6"
                  d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"
                />
              </svg>
            </div>
            <h3>Téléphone</h3>
            <div class="contact-details">06 76 38 14 91</div>
            <div class="contact-action">Appeler maintenant</div></a
><a
            href="https://wa.me/33676381491?text=Bonjour%20Frédéric,%20je%20souhaiterais%20en%20savoir%20plus%20sur%20vos%20services"
            class="contact-card"
            ><div class="contact-icon whatsapp-icon">
              <svg viewbox="0 0 448 512" width="36" height="36">
                <path
                  fill="#22c55e"
                  d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"
                />
              </svg>
            </div>
            <h3>WhatsApp</h3>
            <div class="contact-details">Message direct</div>
            <div class="contact-action">Envoyer un message</div></a
><a href="/contact/" class="contact-card"
            ><div class="contact-icon email-icon">
              <svg viewbox="0 0 512 512" width="32" height="32">
                <path
                  fill="#ef4444"
                  d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
                />
              </svg>
            </div>
            <h3>Email</h3>
            <div class="contact-details">fred.damato@mentalolympique.fr</div>
            <div class="contact-action">Envoyer un email</div></a
>
        </div>
      </div>
    </section>
    
     <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3><span style="color:#D28B65">Mental </span><span style="color:#ffffff">Olympique</span></h3>
            <span style="color:#ffffff">
              Développez un Mental Olympique avec un Expert en Préparation
              Mentale à Rennes ou à Distance.
            </span>
            <div class="social-links">
              <a
                href="https://www.linkedin.com/in/frederic-damato/"
                aria-label="LinkedIn"
                ><svg viewbox="0 0 448 512" width="20" height="20">
                  <path
                    fill="#ffffff"
                    d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
                  /></svg></a
><a href="https://x.com/MentalOlympique" aria-label="Twitter"
                ><svg viewbox="0 0 512 512" width="20" height="20">
                  <path
                    fill="#ffffff"
                    d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
                  /></svg></a
><a
                href="https://www.instagram.com/mentalolympique/"
                aria-label="Instagram"
                ><svg viewbox="0 0 448 512" width="20" height="20">
                  <path
                    fill="#ffffff"
                    d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
                  /></svg></a
><a
                href="https://www.facebook.com/Mentalolympique/"
                aria-label="Facebook"
                ><svg viewbox="0 0 320 512" width="20" height="20">
                  <path
                    fill="#ffffff"
                    d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"
                  /></svg></a
><a
                href="https://www.tiktok.com/@mental_olympique"
                aria-label="TikTok"
                ><svg viewbox="0 0 448 512" width="20" height="20">
                  <path
                    fill="#ffffff"
                    d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"
                  /></svg></a
><a
                href="https://www.youtube.com/@mentalolympique"
                aria-label="YouTube"
                ><svg viewbox="0 0 576 512" width="20" height="20">
                  <path
                    fill="#ffffff"
                    d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
                  /></svg
></a>
            </div>
          </div>
          <div class="footer-section">
            <h3 style="color:#ffffff">Adresse & Contacts</h3>
            <address style="font-style:normal">
              <div class="mb-2" style="color:#ffffff">4, square de Narvik</div>
              <div class="mb-2" style="color:#ffffff">35200 Rennes</div>
              <div class="mb-2" style="color:#ffffff">France</div>
              <div class="mb-2">
                <a href="tel:+33676381491" style="color:#ffffff">06 76 38 14 91</a>
              </div>
              <div>
                <a href="/contact/" style="color:#ffffff"
                  >fred.damato@mentalolympique.fr</a
>
              </div>
            </address>
          </div>
          <div class="footer-section">
            <h3 style="color:#ffffff">Liens utiles</h3>
            <div style="display:flex;flex-direction:column;gap:.5rem">
              <a href="/politique-de-confidentialite" style="color:#ffffff">Politique de Confidentialité</a>
              <a href="/cookies" style="color:#ffffff">Cookies</a>
              <a href="/politique-juridique" style="color:#ffffff">Politique Juridique</a>
              <a href="/accessibilite" style="color:#ffffff">Accessibilité</a>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <span style="color:#ffffff">&copy; 2011-2026 Mental Olympique. Tous droits réservés.</span>
        </div>
      </div>
    </footer>    
    <script>
      // Mobile menu toggle
          function toggleMenu() {
            const menu = document.getElementById('mobileMenu');
            const menuButton = document.querySelector('.menu-btn');
            const isOpen = menu.classList.contains('active');

            menu.classList.toggle('active');
            menuButton.setAttribute('aria-expanded', !isOpen);

            if (!isOpen) {
              document.body.style.overflow = 'hidden';
            } else {
              document.body.style.overflow = '';
            }
          }

          // Smooth scrolling for anchor links
          document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
              e.preventDefault();
              const target = document.querySelector(this.getAttribute('href'));
              if (target) {
                const headerHeight = document.querySelector('.header').offsetHeight;
                const targetPosition = target.offsetTop - headerHeight;
                window.scrollTo({
                  top: targetPosition,
                  behavior: 'smooth'
                });
              }
            });
          });

          // Close mobile menu when clicking on a link
          document.querySelectorAll('.mobile-menu a').forEach(link => {
            link.addEventListener('click', () => {
              toggleMenu();
            });
          });

          // Close menu with Escape key
          document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
              const menu = document.getElementById('mobileMenu');
              if (menu.classList.contains('active')) {
                toggleMenu();
              }
            }
          });
          
          // Force image loading - prevent lazy loading issues
          document.addEventListener('DOMContentLoaded', function() {
            // Preload critical images
            const criticalImages = document.querySelectorAll('.large-article-image, .blog-card-image img');
            criticalImages.forEach(img => {
              if (img.complete === false) {
                img.loading = 'eager';
                // Force reload if image is broken
                img.addEventListener('error', function() {
                  this.src = '/images/blog/default-thumbnail.webp';
                });
              }
            });
            
            // Prevent image optimization plugins from interfering
            document.querySelectorAll('img').forEach(img => {
              img.setAttribute('data-pagespeed-no-transform', '');
              img.setAttribute('data-no-lazy', '1');
              img.setAttribute('data-skip-lazy', '');
            });
          });
    </script>
  </body>
</html>