/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1.7;
    background: #fafafa;
    color: #1a1a1a;
    font-weight: 400;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* Header et Navigation */
.nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0;}
.breadcrumb { font-size:.875rem; color:#6b7280; margin:.75rem 0 1.25rem; }
.breadcrumb ol { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.breadcrumb a { color:inherit; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb .sep { user-select:none; opacity:.7; }
.breadcrumb [aria-current="page"] { color:#111827; font-weight:600; }
@media (max-width:480px){
  .breadcrumb { font-size:.8rem; overflow:auto; white-space:nowrap; }
  .breadcrumb ol { gap:.25rem; }
}
a {text-decoration:none;color: #4285f4;}
.expertise-card a:hover{box-shadow: 0 6px 25px rgba(26, 115, 232, 0.15);}
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.nav-logo:hover {
    opacity: 0.8;
}

.nav-logo-icon {
    width: 32px;
    height: 32px;
    margin-right: 0.75rem;
}

.nav-logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    color: #666;
    font-weight: 400;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #1a73e8;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
}

/* Menu Mobile */
.mobile-menu {
    display: none;
    background: white;
    border-bottom: 1px solid #e8e8e8;
    padding: 1rem 0;
}

.mobile-menu.active {
    display: block;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu ul li {
    padding: 0.75rem 0;
}

.mobile-menu ul li a {
    color: #666;
    text-decoration: none;
    font-size: 1rem;
}

.mobile-menu ul li a:hover,
.mobile-menu ul li a.active {
    color: #1a73e8;
}

/* Section Hero */
.hero {
    padding: 6rem 0 8rem 0;
    text-align: center;
    background: white;
}

.hero-title {
    font-size: 4rem;
    font-weight: 300;
    letter-spacing: -0.04em;
    color: #1a1a1a;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 2rem;
    color: #666;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto 2rem;
    line-height: 1.5;
}

.hero-tagline {
    font-size: 1.1rem;
    color: #888;
    font-weight: 400;
    margin: 0 auto 3rem;
    font-style: italic;
}

.hero-value-prop {
    font-size: 1.4rem;
    color: #888;
    font-weight: 400;
    margin: 0 auto;
}

.hero-cta {
    display: inline-block;
    background: #1a73e8;
    color: white;
    padding: 1.2rem 2.5rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s ease;
    border-radius: 2px;
    font-size: 1.05rem;
}

.hero-cta:hover {
    background: #1557b0;
}
.hero-urgency {
    font-size: 0.9rem;
    color: #e74c3c;
    font-weight: 500;
    margin-top: 1rem;
    text-align: center;
    background: rgba(231, 76, 60, 0.1);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border-left: 3px solid #e74c3c;
}

.availability-badge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: #e74c3c;
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

.expertise-card {
    position: relative; /* Pour le badge */
}
/* Sections principales */
.section {
    padding: 5rem 0;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}

.section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -0.03em;
    color: #1a1a1a;
    margin-bottom: 3rem;
    text-align: center;
}

.section-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.lead-text {
    font-size: 1.3rem;
    color: #666;
    font-weight: 300;
    margin-bottom: 3rem;
    line-height: 1.6;
}

.blue-bold{ font-size: 2rem; color: #1a73e8; text-align: center; margin: 0 auto;}

/* Section Story */
.story-section {
    background: #f8f9fa;
    padding: 5rem 0;
}

.story-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.story-text {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.story-quote {
    font-size: 1.3rem;
    color: #1a73e8;
    font-style: italic;
    text-align: center;
    margin: 3rem 0;
    padding: 2rem;
    background: white;
    border-radius: 2px;
    border-left: 4px solid #1a73e8;
}

/* Section Problem */
.problem-section {
    background: #f8f9fa;
    padding: 3rem 0;
}

.problem-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 1.5rem;
}

.problem-text {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Timeline */
.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e8e8e8;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 4rem;
    display: flex;
    align-items: center;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-content {
    flex: 1;
    background: white;
    padding: 2.5rem;
    border-radius: 2px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    margin: 0 2rem;
    max-width: 350px;
}

.timeline-item:nth-child(even) .timeline-content {
    margin-left: 2rem;
    margin-right: 2rem;
}

.timeline-date {
    font-size: 0.9rem;
    color: #1a73e8;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.timeline-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

.timeline-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    background: #1a73e8;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid white;
    box-shadow: 0 0 0 2px #1a73e8;
}

/* Grilles d'expertise */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin: 4rem 0;
}

.expertise-card-link {
    text-decoration: none;
    color: inherit;
}

.expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.telos-card {
    border-left: 4px solid #1a73e8;
}

.telos-card:hover {
    border-color: #1a73e8;
    box-shadow: 0 15px 40px rgba(26, 115, 232, 0.15);
}

.expertise-name {
    font-size: 1.6rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.expertise-description {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.expertise-price {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.card-cta {
    color: #1a73e8;
    font-weight: 500;
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.expertise-card:hover .card-cta {transform: translateX(5px);}

/* Valeurs et Pillars */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin: 3rem 0;
    text-align: left;
}
/* Le parent devient un "container" (mesure sa propre largeur) */
.tech-wrap{ container-type:inline-size; }

/* Grille 2 colonnes avec une largeur mini par carte (ex. 320px) */
#tech-skills{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 2rem;
}

/* Quand 2×320px + 1 gap ne tient plus, on passe à 1 colonne */
@container (max-width: calc(320px*2 + 2rem)) {
  #tech-skills{ grid-template-columns: 1fr; }
}
.value-card {
    background: #f8f9fa;
    padding: 2.5rem;
    border-radius: 2px;
    border-left: 4px solid #1a73e8;
}

.value-title {
    font-size: 1.3rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.value-description {color: #666;line-height: 1.6;}
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.pillar-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-color: #1a73e8;
}

.pillar-icon {
    width: 60px;
    height: 60px;
    background: #1a73e8;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: white;
    font-weight: 600;
}

.pillar-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.pillar-description {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Achievements */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    text-align: center;
}

.achievement-item {padding: 1.5rem;}
.achievement-number {
    font-size: 2.5rem;
    font-weight: 300;
    color: #1a73e8;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.achievement-label {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}
/* Section Personelle */
.personal-section {background: #f8f9fa;padding: 5rem 0;}
.personal-grid {display: grid;grid-template-columns: 1fr 2fr;gap: 4rem;align-items: center;}

.personal-image {
    width: 100%;
    height: 400px;
    background: #e8e8e8;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 1rem;
}

.personal-content {text-align: left;}
.personal-text {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Credibility Section */
.credibility-section {background: #f8f9fa;padding: 5rem 0;}
.credibility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    margin: 3rem 0;
}
.credibility-category {text-align: center;}
.credibility-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 2rem;
}

.logos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: center;
    justify-items: center;
}

.logo-placeholder {
    width: 80px;
    height: 50px;
    background: #e8e8e8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.logo-placeholder:hover {
    background: linear-gradient(135deg, #1a73e8 0%, #0d47a1 100%);
    color: white;
}
.schools-logos {grid-template-columns: repeat(3, 1fr);}
.schools-logos .logo-placeholder {
    width: 70px;
    height: 40px;
}

/* Social Proof */
.social-proof-card {
    background: white;
    padding: 3rem;
    border-radius: 2px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid #e8e8e8;
}

.nda-message {
    font-size: 1.3rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.nda-subtitle {
    color: #666;
    font-size: 1.05rem;
    margin-bottom: 3rem;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.testimonial {
    text-align: left;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 2px;
}

.testimonial-text {
    color: #444;
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.testimonial-author {
    color: #888;
    font-size: 0.9rem;
    font-weight: 500;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}
.metric-item {text-align: center;}
.metric-number {
    font-size: 1.8rem;
    font-weight: 500;
    color: #1a73e8;
    margin-bottom: 0.5rem;
}
.metric-label {color: #666;font-size: 0.9rem;}

/* Approach Section */
.approach-card {
    background: #f8f9fa;
    padding: 3rem;
    border-radius: 2px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.approach-title {
    font-size: 1.6rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 2rem;
}

.approach-description {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.approach-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

.benefit-item {
    text-align: center;
    padding: 1.5rem 1rem;
    background: white;
    border-radius: 2px;
}

.benefit-icon {
    width: 50px;
    height: 50px;
    background: #1a73e8;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.benefit-title {
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.benefit-description {
    color: #666;
    font-size: 0.85rem;
}

/* Process Section */
.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.process-step {
    text-align: center;
    padding: 2rem 1rem;
    background: white;
    border-radius: 2px;
    border: 1px solid #e8e8e8;
    position: relative;
}

.process-step::after {
    content: '→';
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: #1a73e8;
    font-weight: bold;
}
.process-step:last-child::after {display: none;}
.step-number {
    width: 40px;
    height: 40px;
    background: #1a73e8;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-weight: 600;
}

.step-title {
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}
.step-description {color: #666;font-size: 0.9rem;}
.selection-criteria {
    background: #f8f9fa;
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 2px;
    text-align: left;
}

.criteria-title {
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    text-align: center;
}
.criteria-list {list-style: none;}
.criteria-list li {
    color: #666;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.criteria-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #1a73e8;
    font-weight: bold;
}

.criteria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.criteria-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: white;
    border-radius: 2px;
}

.criteria-label {
    color: #666;
    font-size: 0.95rem;
}

.criteria-value {color: #1a73e8;font-weight: 500;}

.exclusivity-note {
    text-align: center;
    color: #1a73e8;
    font-weight: 400;
    font-style: italic;
    padding: 1rem;
    background: white;
    border-radius: 2px;
}

/* Method Section */
.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin: 4rem 0;
}

.method-card {
    text-align: left;
    padding: 0;
}

.method-number {
    font-size: 0.85rem;
    color: #1a73e8;
    font-weight: 500;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.method-title {
    font-size: 1.4rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.method-description {
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.method-list {
    list-style: none;
    margin-bottom: 2rem;
}

.method-list li {
    color: #666;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
}

.method-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #1a73e8;
    font-weight: bold;
}

.method-deliverable {
    font-size: 0.9rem;
    color: #888;
    font-style: italic;
}

/* Results Grid */
.results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    text-align: left;
}

.result-item {
    padding: 1.5rem 0;
}

.result-title {
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.result-description {
    color: #666;
    font-size: 0.95rem;
}

/* Case Studies */
.case-studies-grid {display: grid;grid-template-columns: repeat(1, 1fr);gap: 2rem;margin: 3rem 0;}
.case-study {background: #f8f9fa;padding: 2rem;border-left: 3px solid #1a73e8;text-align: left;cursor:pointer;}
.case-study:focus-visible{ outline:2px solid #1a73e8; outline-offset:2px;}
.case-panel[hidden]{display:none;}
.case-title {font-weight: 500;color: #1a1a1a;margin-bottom: 1rem;font-size: 1.1rem;}
.case-before, .case-after {margin-bottom: 0.75rem;line-height: 1.6;}
.case-before {color: #666;}
.case-after {color: #1a73e8;font-weight: 400;}

/* Expertise Tools */
.expertise-tools {
    margin: 2rem 0;
    padding: 1.5rem;
    background: white;
    border-radius: 2px;
}

.tools-title {
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

.tools-list {
    list-style: none;
}

.tools-list li {
    margin-bottom: 0.5rem;
    color: #1a73e8;
    padding-left: 1rem;
    position: relative;
    font-weight: 400;
}

.tools-list li::before {
    content: '©';
    position: absolute;
    left: 0;
    color: #1a73e8;
    font-weight: bold;
}

.expertise-list {
    list-style: none;
    margin-bottom: 2rem;
}

.expertise-list li {
    margin-bottom: 0.75rem;
    color: #666;
    padding-left: 1rem;
    position: relative;
}

.expertise-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #1a73e8;
    font-weight: bold;
}

.expertise-tagline {
    color: #1a73e8;
    font-weight: 400;
    font-size: 1rem;
}

/* Pricing Section */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 4rem 0;
}

.pricing-card {
    position: relative;
    border: 1px solid #e8e8e8;
    padding: 2.5rem 2rem;
    text-align: left;
    background: white;
    transition: border-color 0.2s ease;
}

.pricing-card a { 
    text-decoration: none;
}    

.pricing-card:hover {
    border-color: #1a73e8;
}

.pricing-name {
    font-size: 1.1rem;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
}

.pricing-description {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.pricing-price {
    font-size: 2rem;
    font-weight: 300;
    color: #1a1a1a;
    margin-bottom: 2rem;
}

.pricing-features {
    list-style: none;
}

.pricing-features li {
    margin-bottom: 0.75rem;
    color: #666;
    font-size: 0.95rem;
    padding-left: 1rem;
    position: relative;
}

.pricing-features li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: #1a73e8;
    font-weight: bold;
}

/* Target Section */
.target-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 3rem 0;
    text-align: left;
}

.target-item {
    padding: 1rem 0;
}

.target-title {
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

.target-description {
    color: #666;
    font-size: 0.95rem;
}
  .selection-criteria {
            background: #f8f9fa;
            padding: 2rem;
            margin: 2rem 0;
            border-radius: 2px;
            text-align: left;
        }

        .criteria-title {
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 1rem;
            font-size: 1.2rem;
            text-align: center;
        }

        .criteria-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .criteria-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem;
            background: white;
            border-radius: 2px;
        }
        .criteria-label {color: #666;font-size: 0.95rem;}
        .criteria-value {color: #1a73e8;font-weight: 500; }
/* CTA Intermédiaire - Style moderne et engageant */
.cta-intermediate {
    background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
    color: white;
    padding: 4rem 0;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.cta-intermediate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.1;
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.cta-title {
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    line-height: 1.3;
    color: #1a1a1a;
}

.cta-description {
    font-size: 1.1rem;
    opacity: 0.95;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 3rem 0;
}

.cta-button-primary {
    background: white;
    color: #1a73e8;
    padding: 1rem 2.5rem;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.cta-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: #f8f9fa;
}

.cta-button-secondary {
    background: transparent;
    color: white;
    padding: 1rem 2.5rem;
    border: 2px solid rgba(255,255,255,0.3);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.6);
    transform: translateY(-1px);
}

.cta-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}

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

.stat-number {
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.85rem;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* CTA Section Standard */
.cta-section {
    background: #1a1a1a;
    color: white;
    padding: 5rem 0;
    text-align: center;
}

.cta-section .cta-title {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
    color: white;
}

.cta-section .cta-subtitle {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.cta-steps {
    margin: 3rem 0;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.cta-step {margin-bottom: 0.75rem;color: #666;}
.cta-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin: 3rem 0;
    }

.cta-button {
    display: inline-block;
    background: #1a73e8;
    color: white;
    padding: 1.2rem 2.5rem;
    text-decoration: none;
    font-weight: 500;
    margin: 0 0.5rem;
    transition: background 0.2s ease;
    border-radius: 2px;
}

.cta-button:hover {
    background: #1557b0;
}

.cta-button.secondary {
    background: transparent;
    border: 2px solid #666;
    color: #ccc;
    padding: 1rem 2rem;
    font-weight: 400;
}

.cta-button.secondary:hover {
    background: #666;
    color: white;
}

.cta-note {
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
    max-width: 500px;
    margin: 2rem auto 0;
}

/* Footer Styles */
.footer {
    background: #1a1a1a;
    color: #ccc;
    padding: 4rem 0 2rem 0;
    margin-top: 0;
}

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

.footer-section h4 {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.footer-logo {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.footer-text h3 {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.footer-text p {
    color: #1a73e8;
    font-size: 0.9rem;
    margin: 0;
}

.footer-description {
    color: #888;
    line-height: 1.6;
    font-size: 0.95rem;
}
.footer-links {list-style: none;padding: 0;}
.footer-links li {margin-bottom: 0.75rem;}
.footer-links a {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {color: #1a73e8;}
.footer-contact p {
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.footer-contact strong {
    color: white;
    display: block;
    margin-bottom: 0.25rem;
}

.footer-contact a {
    color: #1a73e8;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-contact a:hover {color: #4285f4;}
.footer-bottom {border-top: 1px solid #333;padding-top: 2rem;}
.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.footer-bottom p {color: #888;font-size: 0.85rem;margin: 0;}
.footer-certifications {
    color: #666;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Social Links */
.social-links {margin-top: 1.5rem;}
.social-links strong {
    color: white;
    display: block;
    margin-bottom: 0.75rem;
}
.social-icons {display: flex;gap: 1rem;}
.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #333;
    color: #ccc;
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}
.social-icons a:hover {
    background: #1a73e8;
    color: white;
    transform: translateY(-2px);
}
.social-icons svg {width: 18px;height: 18px;}
/* Responsive Design */
@media (max-width: 768px) {
    .container {padding: 0 1rem;}
    .hero-title {font-size: 2.5rem;}
    .hero {padding: 4rem 0 5rem 0;}
    .section {padding: 3rem 0;}
    .section-title {font-size: 2rem;}
    .timeline::before {left: 20px;}
    .timeline-item {
        flex-direction: column !important;
        text-align: left;
        padding-left: 60px;
    }
    .timeline-content {
        margin: 0 !important;
        max-width: none;
    }
    .timeline-dot {left: 20px;}
    .values-grid,
    .personal-grid,
    .testimonials-grid,
    .results-grid,
    .target-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .expertise-grid,
    .method-grid,
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .pillars-grid {grid-template-columns: 1fr;}
    .achievements-grid {grid-template-columns: repeat(2, 1fr);}
    .credibility-grid {grid-template-columns: 1fr;gap: 2rem;}
    .approach-benefits {grid-template-columns: repeat(2, 1fr);}
    .process-steps {grid-template-columns: 1fr;}
    .process-step::after {display: none;}
    .metrics-grid {grid-template-columns: 1fr;}
    .criteria-grid {grid-template-columns: 1fr;}
    .nav-menu {display: none;}
    .mobile-menu-toggle {display: block;}
    .cta-intermediate {padding: 3rem 0;}
    .cta-title {font-size: 1.8rem;}
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-button-primary,
    .cta-button-secondary {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }
    .cta-stats {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .case-study {padding: 1.5rem;}
    .approach-card {padding: 2rem;}
    .selection-criteria {padding: 1.5rem;}

    /* Footer Responsive */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-certifications {
        order: -1;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 3rem 0 1.5rem 0;
    }

    .footer-content {
        gap: 2rem;
    }

    .cta-stats {
        flex-direction: column;
        gap: 1rem;
    }
}
 /* === Accessibilité & UI mineures === */
        .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
        .skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:#1a73e8;color:#fff;border-radius:6px}
        .reminder-banner {
            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
            color: white;
            padding: 3rem 0;
            margin: 4rem 0;
            text-align: center;
        }
        .banner-content h3 { font-size: 1.8rem; margin-bottom: 1rem; font-weight: 600; }
        .banner-content p { font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9; }
        .banner-cta { display: inline-block; background: white; color: #1a73e8; padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: transform 0.3s ease; }
        .banner-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
        .content-section { padding: 4rem 0; background: #f8f9fa; }
        .content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
        .content-text { font-size: 1.1rem; line-height: 1.7; color: #333; }
        .content-text h3 { color: #1a73e8; margin-bottom: 1.5rem; font-size: 1.5rem; }
        .content-text p { margin-bottom: 1.5rem; }
        .content-highlights { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .highlight-item { display: flex; align-items: center; margin-bottom: 1rem; padding: 1rem; background: #f0f7ff; border-radius: 8px; border-left: 4px solid #1a73e8; }
        .highlight-icon { width: 24px; height: 24px; background: #1a73e8; border-radius: 50%; margin-right: 1rem; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 0.8rem; }
        .faq-section { padding: 4rem 0; }
        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
        .faq-item { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-top: 4px solid #1a73e8; }
        .faq-question { font-size: 1.2rem; font-weight: 600; color: #1a73e8; margin-bottom: 1rem; }
        .faq-answer { color: #555; line-height: 1.6; }
        @media (max-width: 768px) {
            .content-grid, .faq-grid { grid-template-columns: 1fr; gap: 2rem; }
            .banner-content h3 { font-size: 1.4rem; }
        }
        /* Cards des formations officielles */
        .cred-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:2rem 0}
        .cred-card{background:#fff;border:1px solid #e6e6e9;border-radius:12px;padding:1rem 1.2rem}
        .cred-card h4{margin:.2rem 0 .4rem;font-size:1.05rem}
        .cred-card .fine{font-size:.85rem;opacity:.7}
          /* Hero Section Amélioré */
        .hero {
            padding: 4rem 0 6rem 0;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a73e8' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
            opacity: 0.5;
        }

        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-text {
            text-align: left;
        }

        .hero-badge {
            display: inline-block;
            background: #e3f2fd;
            color: #1a73e8;
            padding: 0.5rem 1rem;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
            border: 1px solid rgba(26, 115, 232, 0.2);
        }

        .hero-subtitle {
            font-size: 1.4rem;
            color: #666;
            font-weight: 400;
            margin-bottom: 2rem;
            line-height: 1.5;
        }

        .hero-description {
            font-size: 1.1rem;
            color: #888;
            margin-bottom: 2.5rem;
            line-height: 1.6;
        }

        .hero-cta {
            display: inline-flex;
            align-items: center;
            background: #1a73e8;
            color: white;
            padding: 1rem 2rem;
            text-decoration: none;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(26, 115, 232, 0.2);
        }

        .hero-cta:hover {
            background: #1557b0;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
        }

        .hero-image {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-photo {
            width: 350px;
            height: 350px;
            border-radius: 20px;
            object-fit: cover;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
            transition: transform 0.3s ease;
        }

        .hero-photo:hover {
            transform: scale(1.02);
        }

        .photo-frame {
            position: absolute;
            width: 380px;
            height: 380px;
            border: 3px solid #1a73e8;
            border-radius: 25px;
            z-index: -1;
            top: -15px;
            left: -15px;
            opacity: 0.3;
        }

        /* Section Philosophy - Nouvelle */
        .philosophy-section {
            padding: 6rem 0;
            background: #f8f9fa;
            position: relative;
        }

        .philosophy-intro {
            text-align: center;
            margin-bottom: 4rem;
        }

        .philosophy-intro h2 {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: -0.03em;
            color: #1a1a1a;
            margin-bottom: 1.5rem;
        }

        .philosophy-intro .lead {
            font-size: 1.3rem;
            color: #666;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }
        .philosophy-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            margin-top: 4rem;
            align-items: start;
        }
        .philosophy-text {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #444;
        }
        .philosophy-text h3 {
            color: #1a73e8;
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
            font-weight: 500;
        }
        .philosophy-text p {
            margin-bottom: 1.5rem;
        }
        .philosophy-quote {
            background: white;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            border-left: 4px solid #1a73e8;
            position: sticky;
            top: 120px;
        }
        .quote-text {
            font-size: 1.2rem;
            font-style: italic;
            color: #1a73e8;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }
        .quote-author {
            font-size: 0.9rem;
            color: #888;
            font-weight: 500;
        }
        .philosophy-pillars {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 4rem;
        }
        .pillar-card {
            background: white;
            padding: 2rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            text-align: center;
            transition: transform 0.3s ease;
            appearance: none;
            -webkit-appearance: none;
            width: 100%;
            cursor: pointer;
        }
        /* États d’accessibilité/focus */
        .pillar-card:focus-visible {
            outline: 2px solid #1a73e8;
            outline-offset: 3px;
        }
        /* Panneaux : aucun espace tant qu’ils sont cachés */
        .pillar-panel[hidden] { display: none; }
        .pillar-panel {
            margin-top: 1.5rem;
            background: #f8f9fa;
            border-left: 4px solid #1a73e8;
            padding: 1.25rem 1rem;
            border-radius: 8px;
        }
        .pillar-card:hover {transform: translateY(-5px);}
        .pillar-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            color: white;
            font-size: 1.5rem;
            font-weight: 600;
        }
        .pillar-title {
            font-size: 1.2rem;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 1rem;
        }
        .pillar-description {color: #666;line-height: 1.6;}
        /* Story Section Amélioré */
        .story-section {padding: 6rem 0;background: white;}
        .story-intro {text-align: center;margin-bottom: 4rem;}
        .story-intro h2 {font-size: 2.5rem;font-weight: 300;letter-spacing: -0.03em;color: #1a1a1a;margin-bottom: 1.5rem;}
        .story-intro h3 {font-size: 1.8rem;color: #1a73e8;font-weight: 400;margin-bottom: 1rem;}
        .story-intro p {font-size: 1.2rem;color: #666;max-width: 700px;margin: 0 auto;line-height: 1.6;}
        .story-content {max-width: 800px;margin: 0 auto;}
        .story-text {font-size: 1.1rem;color: #444;margin-bottom: 2rem;line-height: 1.7;text-align: justify;}
        .story-highlight {background: #e3f2fd;padding: 2rem;border-radius: 12px;border-left: 4px solid #1a73e8;margin: 3rem 0;}
        .story-highlight h4 {color: #1a73e8;font-size: 1.3rem;font-weight: 500;margin-bottom: 1rem;}
        .story-highlight p {color: #444;font-size: 1.05rem;line-height: 1.6;margin: 0;}
        /* Timeline reste identique */
        .section {padding: 5rem 0;background: white;border-bottom: 1px solid #f0f0f0;}
        .section-title {font-size: 2.5rem;font-weight: 300;letter-spacing: -0.03em;color: #1a1a1a;margin-bottom: 3rem;text-align: center;}
        .timeline {max-width: 800px;margin: 0 auto;position: relative;}
        .timeline::before {content: '';position: absolute;left: 50%;top: 0;bottom: 0;width: 2px;background: #e8e8e8;transform: translateX(-50%);}
        .timeline-item {
            position: relative;
            margin-bottom: 4rem;
            display: flex;
            align-items: center;
        }
        .timeline-item:nth-child(odd) {flex-direction: row;}
        .timeline-item:nth-child(even) {flex-direction: row-reverse;}
        .timeline-content {
            flex: 1;
            background: white;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin: 0 2rem;
            max-width: 350px;
        }
        .timeline-date {
            font-size: 0.9rem;
            color: #1a73e8;
            font-weight: 500;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .timeline-title {
            font-size: 1.2rem;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 0.75rem;
        }
        .timeline-description {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .timeline-dot {
            width: 16px;
            height: 16px;
            background: #1a73e8;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            border: 4px solid white;
            box-shadow: 0 0 0 2px #1a73e8;
        }
        .engagements-cta{
            grid-column:1 / -1;     /* s’étend sur les 2 colonnes */
            justify-self:center;    /* centré horizontalement */
            margin-top:.5rem;       /* petit espace avec le contenu */
        }
        .contact-cta{ display:inline-block;
            display: inline-flex;
            align-items: center;
            background: #1a73e8;
            color: white;
            padding: 1rem 2rem;
            text-decoration: none;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(26, 115, 232, 0.2);
        }
        .contact-cta:hover {
            background: #1557b0;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
        }
        /* Responsive */
        @media (max-width: 768px) {
            .container {padding: 0 1rem;}
            .hero-content {
                grid-template-columns: 1fr;
                gap: 3rem;
                text-align: center;
            }
            .hero-text {text-align: center;}
            .hero-title {font-size: 2.5rem;}
            .hero-photo {
                width: 280px;
                height: 280px;
            }
            .photo-frame {
                width: 310px;
                height: 310px;
            }
            .philosophy-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            .philosophy-quote {position: static;}
            .philosophy-pillars {grid-template-columns: 1fr;}
            .nav-menu {display: none;}
            .mobile-menu-toggle {display: block;}
            .timeline::before {left: 20px;}
            .timeline-item {flex-direction: column !important;text-align: left;padding-left: 60px;}
            .timeline-content {margin: 0 !important;max-width: none;}
            .timeline-dot {left: 20px;}
        }
        /* Animations */
        @keyframes fadeInUp {
            from {opacity: 0;transform: translateY(30px);}
            to {opacity: 1;transform: translateY(0);}
        }
        .hero-content,.philosophy-intro,.story-intro {animation: fadeInUp 0.8s ease-out;}
        .pillar-card,.timeline-content {animation: fadeInUp 0.8s ease-out 0.2s both;}
        /* Menu Mobile */
        .mobile-menu {display: none;background: white;border-bottom: 1px solid #e8e8e8;padding: 1rem 0;}
        .mobile-menu.active {display: block;}
        .mobile-menu ul {list-style: none;}
        .mobile-menu ul li {padding: 0.75rem 0;}
        .mobile-menu ul li a {color: #666;text-decoration: none;font-size: 1rem;}
        .mobile-menu ul li a:hover,.mobile-menu ul li a.active {color: #1a73e8;}
         /* Méthode Grid - Cartes flip */
        .method-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3rem;
            margin: 4rem 0;
            perspective: 1000px;
        }
        .method-card {
            position: relative;
            height: 600px;
            width: 100%;
            cursor: pointer;
        }
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: left;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
        }
        .method-card:hover .card-inner {transform: rotateY(180deg);}
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(26, 115, 232, 0.12);
            transition: box-shadow 0.3s ease;
        }
        .method-card:hover .card-front,.method-card:hover .card-back {box-shadow: 0 16px 48px rgba(26, 115, 232, 0.2);}
        /* Face avant */
        .card-front {background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);border: 1px solid #e8e8e8;padding: 2.5rem;display: flex;flex-direction: column;justify-content: space-between;}
        .card-back {background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);color: white;padding: 2.5rem;transform: rotateY(180deg);display: flex;flex-direction: column;justify-content: center;}
        /* Styling face avant */
        .method-number {font-size: 0.85rem;color: #1a73e8;font-weight: 500;margin-bottom: 1rem;letter-spacing: 0.1em;text-transform: uppercase;position: relative;}
        .method-number::after {content: '';position: absolute;bottom: -8px;left: 0;width: 40px;height: 2px;background: #1a73e8;border-radius: 1px;}
        .method-title {font-size: 1.4rem;font-weight: 500;color: #1a1a1a;margin-bottom: 1.5rem;letter-spacing: -0.02em;line-height: 1.3;}
        .method-description {color: #666;margin-bottom: 2rem;line-height: 1.6;font-size: 1.05rem;}
        .method-list {list-style: none;margin-bottom: 2rem;flex-grow: 1;}
        .method-list li {color: #666;margin-bottom: 0.75rem;padding-left: 1.5rem;position: relative;line-height: 1.5;}
        .method-list li::before {content: '→';position: absolute;left: 0;color: #1a73e8;font-weight: bold;font-size: 1.1rem;}
        .method-deliverable {font-size: 0.9rem;color: #888;font-style: italic;padding: 1rem;background: rgba(26, 115, 232, 0.05);border-radius: 8px;border-left: 3px solid #1a73e8;margin-top: auto;}
        /* Styling face arrière */
        .back-content {text-align: center;}
        .back-icon {width: 80px;height: 80px;background: rgba(255, 255, 255, 0.2);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 2rem;font-size: 2rem;color: white;font-weight: 300;backdrop-filter: blur(10px);}
        .back-title {font-size: 1.5rem;font-weight: 500;margin-bottom: 1.5rem;color: white;}
        .back-description {font-size: 1.1rem;line-height: 1.6;opacity: 0.95;margin-bottom: 2rem;}
        .back-benefits {list-style: none;text-align: left;}
        .back-benefits li {margin-bottom: 0.75rem;padding-left: 1.5rem;position: relative;opacity: 0.9;}
        .back-benefits li::before {content: '✓';position: absolute;left: 0;color: #fff;font-weight: bold;font-size: 1.1rem;}
        /* Hover indicator */
        .flip-indicator {position: absolute;top: 1rem;right: 1rem;width: 32px;height: 32px;background: rgba(26, 115, 232, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #1a73e8;font-size: 0.9rem;font-weight: bold;transition: all 0.3s ease;}
        .method-card:hover .flip-indicator {background: rgba(26, 115, 232, 0.2);transform: rotate(180deg);}
        /* Responsive Design */
        @media (max-width: 768px) {
            .method-grid {grid-template-columns: 1fr;gap: 2rem;}
            .method-card {height: 600px;}
            .card-front, .card-back {padding: 2rem;}
            .section-title {font-size: 2rem;}}
        @media (max-width: 480px) {
            .card-front, .card-back {padding: 1.5rem;}
            .method-card {height: 600px;}}
        /* Animation d'entrée */
        @keyframes fadeInUp {
            from {opacity: 0;transform: translateY(30px);}
            to {opacity: 1;transform: translateY(0);}}
        .method-card {animation: fadeInUp 0.6s ease-out;}
        .method-card:nth-child(1) { animation-delay: 0.1s; }
        .method-card:nth-child(2) { animation-delay: 0.2s; }
        .method-card:nth-child(3) { animation-delay: 0.3s; }
        /* Styles spécifiques pour les améliorations */
        .urgency-banner {background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);color: white;padding: 1rem 0;text-align: center;position: sticky;top: 0;z-index: 200;box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3);}
        .urgency-content {display: flex;align-items: center;justify-content: center;gap: 1rem;}
        .urgency-icon {background: rgba(255,255,255,0.2);border-radius: 50%;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;font-weight: bold;}
        .urgency-text {font-weight: 500;font-size: 0.95rem;}
        .urgency-cta {background: rgba(255,255,255,0.15);color: white;padding: 0.5rem 1rem;border-radius: 20px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;border: 1px solid rgba(255,255,255,0.3);}
        .urgency-cta:hover {background: white;color: #e74c3c;}
        .transformation-bridge {background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);padding: 4rem 0;position: relative;overflow: hidden;}
        .transformation-bridge::before {content: '↓';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 4rem;color: #1a73e8;opacity: 0.1;}
        .bridge-content {text-align: center;margin: 0 auto;}
        .before-after {display: grid;grid-template-columns: 1fr 1fr;gap: 3rem;margin: 3rem 0;}
        .before-card,.after-card {padding: 2rem;border-radius: 12px;text-align: left;}
        .before-card {background: #fff5f5;border-left: 4px solid #e74c3c;}
        .after-card {background: #f0f7ff;border-left: 4px solid #1a73e8;}
        .card-title {font-size: 1.2rem;font-weight: 600;margin-bottom: 1rem;}
        .before-card .card-title { color: #e74c3c; }
        .after-card .card-title { color: #1a73e8; }
        .immediate-cta {background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);color: white;padding: 3rem 0;text-align: center;border-radius: 12px;position: relative;overflow: hidden;}
        .immediate-cta h2 {font-size: 2.2rem; margin-bottom: 1rem; font-weight: 300;}
        .immediate-cta p {font-size: 1.1rem; margin-bottom: 2rem; opacity: 0.9;}
        .cta-urgency {display: inline-block;background: rgba(255,255,255,0.2);padding: 0.5rem 1rem;border-radius: 20px;margin-bottom: 1rem;font-size: 0.85rem;font-weight: 500;}
        .scarcity-note {background: #fff3cd;border: 1px solid #ffeaa7;border-radius: 8px;padding: 1.5rem;margin: 2rem 0;text-align: center;color: #856404;}
        .scarcity-note strong { color: #b8860b; }
        /* Case Studies Expandables - EN CONFORMITÉ AVEC LA FEUILLE DE STYLE */
        .case-study.expandable {cursor: pointer;transition: all 0.3s ease;}
        .case-study.expandable:hover {transform: translateY(-2px);box-shadow: 0 6px 25px rgba(26, 115, 232, 0.15);}
        .case-header {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 1rem;}
        .expand-icon {background: #1a73e8;color: white;width: 24px;height: 24px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: bold;transition: transform 0.3s ease;flex-shrink: 0;margin-left: 1rem;}
        .case-study.expanded .expand-icon {transform: rotate(45deg);background: #e74c3c;}
        .case-summary {margin-bottom: 1rem;}
        .case-details {max-height: 0;overflow: hidden;transition: max-height 0.4s ease, padding 0.4s ease;padding: 0;}
        .case-study.expanded .case-details {max-height: 1000px;padding-top: 1.5rem;border-top: 1px solid #e8e8e8;}
        .details-section {margin-bottom: 2rem;}
        .details-section:last-child {margin-bottom: 0;}
        .details-section h4 {color: #1a73e8;font-size: 1.1rem;font-weight: 500;margin-bottom: 0.75rem;}
        .details-section p {color: #555;line-height: 1.6;font-size: 0.95rem;text-align: justify;}
        /* Header et Navigation */
        .header { background: white; border-bottom: 1px solid #e8e8e8; position: static; top: auto; z-index: auto;}
        /* Method Section */
        .method-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 3rem;margin: 4rem 0;}
        .method-card {text-align: left;padding: 0;}
        .method-number {font-size: 0.85rem;color: #1a73e8;font-weight: 500;margin-bottom: 1rem;letter-spacing: 0.1em;text-transform: uppercase;}
        .method-title {font-size: 1.4rem;font-weight: 500;color: #1a1a1a;margin-bottom: 1rem;letter-spacing: -0.02em;}
        .method-description {color: #666;margin-bottom: 2rem;line-height: 1.6;}
        .method-list {list-style: none;margin-bottom: 2rem;}
        .method-list li {color: #666;margin-bottom: 0.5rem;padding-left: 1rem;position: relative;}
        .method-list li::before {content: '·';position: absolute;left: 0;color: #1a73e8;font-weight: bold;}
        .method-deliverable {font-size: 0.9rem;color: #888;font-style: italic;}
        /* Case Studies - STYLES HARMONISÉS */
        .case-studies-grid {display: grid;grid-template-columns: repeat(1, 1fr);gap: 2rem;margin: 3rem 0;}
        .case-study {background: #f8f9fa;padding: 2rem;border-left: 3px solid #1a73e8;text-align: left;}
        .case-title {font-weight: 500;color: #1a1a1a;margin-bottom: 1rem;font-size: 1.1rem;}
        .case-before,.case-after {margin-bottom: 0.75rem;line-height: 1.6;}
        .case-before {color: #666;}
        .case-after {color: #1a73e8;font-weight: 400;}
        /* Expertise */
        .expertise-card {background: white;border: 2px solid #e8e8e8;padding: 3rem 2.5rem;text-align: left;transition: all 0.3s ease;cursor: pointer;border-radius: 2px;position: relative;}
        .expertise-name {font-size: 1.6rem;font-weight: 500;color: #1a1a1a;margin-bottom: 1rem;}
        .expertise-list {list-style: none;margin-bottom: 2rem;}
        .expertise-list li {margin-bottom: 0.75rem;color: #666;padding-left: 1rem;position: relative;}
        .expertise-list li::before {content: '·';position: absolute;left: 0;color: #1a73e8;font-weight: bold;}
        .expertise-tagline {color: #1a73e8;font-weight: 400;font-size: 1rem;}
        /* Responsive Design */
        @media (max-width: 768px) {
            .method-grid,.pricing-grid {grid-template-columns: 1fr;gap: 2rem;}
            .target-grid {grid-template-columns: 1fr;gap: 2rem;}
            .before-after {grid-template-columns: 1fr;gap: 2rem;}
            .urgency-content {flex-direction: column;gap: 0.5rem;}}
        @media (max-width: 480px) {
            .breadcrumb {font-size:.8rem; overflow:auto; white-space:nowrap; }
            .breadcrumb ol { gap:.25rem; }}
        /* 1) La bannière colle, le header ne colle pas */.urgency-banner{ position: sticky; top: 0; z-index: 200;}
        /* 2) Décalage des ancres : seulement la hauteur de la bannière */:root{ --urgency-h: 0px; }
        [id]{scroll-margin-top: calc(var(--urgency-h, 0px) + 12px); }/* petit matelas */
        .blue-h2-telos{font-size: 2rem; margin-bottom: 1rem; color: #1a73e8;}
        .point-list-card{margin-bottom: 0.75rem; color: #666;}
        .mb-2{ margin-bottom:2rem; }
        .mt-3{margin-top: 3rem;}
        .mr-1{margin-right: 1rem;}
        .list-plain{ list-style:none; padding:0; margin:0; }
        .pricing-border{border: 3px solid #1a73e8; transform: scale(1.05);}
        /* Styles spécifiques au formulaire de contact */
        .contact-hero {background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);padding: 4rem 0 2rem 0;position: relative;overflow: hidden;}
        .contact-hero::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a73e8' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;opacity: 0.5;}
        .contact-content {display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: start;margin-top: 3rem;position: relative;z-index: 2;}
        .contact-info {background: white;padding: 3rem;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.08);border-left: 4px solid #1a73e8;}
        .contact-form-wrapper {background: white;padding: 3rem;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.08);position: sticky;top: 120px;}
        .contact-form {width: 100%;}
        .form-group {margin-bottom: 2rem;}
        .form-group label {display: block;font-weight: 500;color: #1a1a1a;margin-bottom: 0.5rem;font-size: 0.95rem;}
        .form-group input,.form-group select,.form-group textarea {width: 100%;padding: 1rem;border: 2px solid #e8e8e8;border-radius: 6px;font-size: 1rem;transition: all 0.3s ease;font-family: inherit;}
        .form-group input:focus,.form-group select:focus,.form-group textarea:focus {outline: none;border-color: #1a73e8;box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);}
        .form-group textarea {min-height: 120px;resize: vertical;}
        .form-group select {cursor: pointer;}
        .required {color: #e74c3c;}
        .submit-btn {background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);color: white;padding: 1.2rem 2.5rem;border: none;border-radius: 6px;font-size: 1.05rem;font-weight: 500;cursor: pointer;transition: all 0.3s ease;width: 100%;box-shadow: 0 4px 15px rgba(26, 115, 232, 0.2);}
        .submit-btn:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);}
        .submit-btn:disabled {opacity: 0.7;cursor: not-allowed;transform: none;}
        .contact-methods {display: flex;flex-direction: column;gap: 2rem;margin-top: 2rem;}
        .contact-method {display: flex;align-items: center;gap: 1rem;padding: 1.5rem;background: #f8f9fa;border-radius: 8px;transition: all 0.3s ease;}
        .contact-method:hover {background: #e3f2fd;transform: translateY(-2px);}
        .contact-method-icon {width: 48px;height: 48px;background: #1a73e8;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-weight: 600;flex-shrink: 0;}
        .contact-method-info h4 {color: #1a1a1a;font-size: 1.1rem;font-weight: 500;margin-bottom: 0.25rem;}
        .contact-method-info p {color: #666;margin: 0;}
        .contact-method-info a {color: #1a73e8;text-decoration: none;font-weight: 500;}
        .contact-method-info a:hover {text-decoration: underline;}
        .urgency-note {background: #fff3cd;border: 1px solid #ffeaa7;border-radius: 8px;padding: 1.5rem;margin: 2rem 0;text-align: center;color: #856404;}
        .urgency-note strong {color: #b8860b;}
        .success-message {background: #d4edda;border: 1px solid #c3e6cb;color: #155724;padding: 1rem;border-radius: 6px;margin-bottom: 1rem;display: none;}
        .error-message {background: #f8d7da;border: 1px solid #f5c6cb;color: #721c24;padding: 1rem;border-radius: 6px;margin-bottom: 1rem;display: none;}
        .availability-status {background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);color: white;padding: 1rem;text-align: center;border-radius: 8px;margin-bottom: 2rem;font-weight: 500;}
        .center{text-align: center;}
        .contact-form-wrapper h2{color: #1a1a1a; margin-bottom: 1.5rem; font-size: 1.4rem;}
        /* Responsive */
        @media (max-width: 768px) {
            .contact-content {grid-template-columns: 1fr;gap: 2rem;} 
            .contact-form-wrapper {position: static;}
            .contact-info,.contact-form-wrapper {padding: 2rem;}
            .contact-hero {padding: 3rem 0 1rem 0;}}
        /* Accessibilité */
        .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
        /* Item langue dans le menu */
        .nav-menu .nav-lang a{display:inline-flex;align-items:center;padding-left:.4rem; /* petit espace après "Contact" */line-height:1;white-space:nowrap;}
        .flag-icon{display:block;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.06);transition:transform .15s ease;}
        .nav-menu .nav-lang a:hover .flag-icon,
        .nav-menu .nav-lang a:focus .flag-icon{ transform:scale(1.06); }
        /* Mobile */
        .mobile-menu .nav-lang a{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;}
        .mobile-menu .flag-icon{ width:20px; height:20px; }
        /* Si le header est très tassé en desktop, on peut réduire un peu */
        @media (max-width: 1024px){.nav-menu .flag-icon{ width:16px; height:16px; }}
         /* Pop-up Modal Styles */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(5px);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.active {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
        }

        .modal-content {
            background: white;
            border-radius: 16px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            overflow: hidden;
            transform: scale(0.8) translateY(50px);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .modal-overlay.active .modal-content {
            transform: scale(1) translateY(0);
        }

        /* Modal Header */
        .modal-header {
            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
            color: white;
            padding: 2rem 2.5rem;
            position: relative;
        }

        .modal-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
            opacity: 0.1;
        }

        .modal-title {
            font-size: 1.6rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 2;
        }

        .modal-subtitle {
            font-size: 1rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }

        .close-btn {
            position: absolute;
            top: 1.5rem;
            right: 2rem;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
        }

        .close-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        /* Modal Body */
        .modal-body {
            padding: 2.5rem;
            text-align: center;
        }

        .loading-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 3rem 0;
        }

        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid #e8e8e8;
            border-top: 4px solid #1a73e8;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 1.5rem;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .loading-text {
            color: #666;
            font-size: 1.1rem;
        }

        /* Calendar iframe styles for desktop */
        .calendar-iframe {
            width: 800px;
            height: 600px;
            border: none;
            border-radius: 8px;
        }

        /* Features list */
        .modal-features {
            text-align: left;
            margin: 2rem 0;
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 12px;
        }

        .modal-features h4 {
            color: #1a73e8;
            font-size: 1.2rem;
            margin-bottom: 1rem;
            text-align: center;
        }

        .features-list {
            list-style: none;
            padding: 0;
        }

        .features-list li {
            margin-bottom: 0.75rem;
            padding-left: 1.5rem;
            position: relative;
            color: #444;
        }

        .features-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #1a73e8;
            font-weight: bold;
        }

        /* Mobile message */
        .mobile-message {
            display: none;
            text-align: center;
            padding: 2rem;
        }

        .mobile-icon {
            width: 64px;
            height: 64px;
            background: #1a73e8;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            margin: 0 auto 1.5rem;
        }

        .mobile-text {
            font-size: 1.1rem;
            color: #444;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .mobile-btn {
            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
            color: white;
            padding: 1.2rem 2.5rem;
            border: none;
            border-radius: 6px;
            font-size: 1.05rem;
            font-weight: 500;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(26, 115, 232, 0.2);
        }

        .mobile-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }
            
            .mobile-menu-toggle {
                display: block;
            }

            .modal-content {
                width: 95vw;
                margin: 1rem;
            }

            .modal-header {
                padding: 1.5rem 2rem;
            }

            .modal-title {
                font-size: 1.3rem;
            }

            .modal-body {
                padding: 2rem 1.5rem;
            }

            .calendar-iframe {
                display: none;
            }

            .mobile-message {
                display: block;
            }

            .close-btn {
                top: 1rem;
                right: 1.5rem;
                width: 32px;
                height: 32px;
                font-size: 1rem;
            }
        }

        /* Other existing styles... */
        .hero {
            padding: 6rem 0 8rem 0;
            text-align: center;
            background: white;
        }

        .hero-title {
            font-size: 4rem;
            font-weight: 300;
            letter-spacing: -0.04em;
            color: #1a1a1a;
            margin-bottom: 1.5rem;
        }

        .hero-subtitle {
            font-size: 2rem;
            color: #666;
            font-weight: 300;
            max-width: 700px;
            margin: 0 auto 2rem;
            line-height: 1.5;
        }

        .hero-tagline {
            font-size: 1.1rem;
            color: #888;
            font-weight: 400;
            margin: 0 auto 3rem;
            font-style: italic;
        }

        .section {
            padding: 5rem 0;
            background: white;
            border-bottom: 1px solid #f0f0f0;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: -0.03em;
            color: #1a1a1a;
            margin-bottom: 3rem;
            text-align: center;
        }

        .lead-text {
            font-size: 1.3rem;
            color: #666;
            font-weight: 300;
            margin-bottom: 3rem;
            line-height: 1.6;
        }

        /* Mobile responsive pour la page principale */
        @media (max-width: 480px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero {
                padding: 4rem 0 5rem 0;
            }
            
            .section {
                padding: 3rem 0;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .container {
                padding: 0 1rem;
            }
        }
        .error-hero {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            padding: 6rem 0 8rem 0;
            position: relative;
            overflow: hidden;
            text-align: center;
        }

        .error-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a73e8' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
            opacity: 0.5;
        }

        .error-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }

        .error-number {
            font-size: 12rem;
            font-weight: 100;
            letter-spacing: -0.05em;
            color: #1a73e8;
            margin-bottom: 1rem;
            text-shadow: 0 4px 20px rgba(26, 115, 232, 0.1);
            line-height: 1;
        }

        .error-title {
            font-size: 3rem;
            font-weight: 300;
            letter-spacing: -0.04em;
            color: #1a1a1a;
            margin-bottom: 1.5rem;
        }

        .error-subtitle {
            font-size: 1.4rem;
            color: #666;
            font-weight: 300;
            margin-bottom: 3rem;
            line-height: 1.5;
        }

        .error-actions {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            margin: 3rem 0;
        }

        .error-buttons {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .error-btn {
            display: inline-flex;
            align-items: center;
            padding: 1.2rem 2.5rem;
            text-decoration: none;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.3s ease;
            font-size: 1.05rem;
        }

        .error-btn-primary {
            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(26, 115, 232, 0.2);
        }

        .error-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
        }

        .error-btn-secondary {
            background: transparent;
            color: #1a73e8;
            border: 2px solid #1a73e8;
        }

        .error-btn-secondary:hover {
            background: #1a73e8;
            color: white;
            transform: translateY(-2px);
        }

        /* Section de suggestions */
        .suggestions-section {
            background: #f8f9fa;
            padding: 5rem 0;
        }

        .suggestions-content {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .suggestions-title {
            font-size: 2.5rem;
            font-weight: 300;
            letter-spacing: -0.03em;
            color: #1a1a1a;
            margin-bottom: 3rem;
            text-align: center;
        }

        .suggestions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
            margin: 4rem 0;
        }

        .suggestion-card {
            background: white;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            text-align: left;
            transition: all 0.3s ease;
            border-left: 4px solid #1a73e8;
        }

        .suggestion-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);
        }

        .suggestion-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #1a73e8 0%, #4285f4 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .suggestion-title {
            font-size: 1.3rem;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 1rem;
        }

        .suggestion-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 2rem;
        }

        .suggestion-link {
            color: #1a73e8;
            font-weight: 500;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .suggestion-link:hover {
            transform: translateX(5px);
        }

        .suggestion-link::after {
            content: '→';
            margin-left: 0.5rem;
            transition: transform 0.3s ease;
        }

        .suggestion-link:hover::after {
            transform: translateX(3px);
        }

        /* Section de recherche */
        .search-section {
            background: white;
            padding: 4rem 0;
        }

        .search-content {
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .search-title {
            font-size: 1.8rem;
            font-weight: 300;
            color: #1a1a1a;
            margin-bottom: 1.5rem;
        }

        .search-description {
            color: #666;
            margin-bottom: 2.5rem;
            line-height: 1.6;
        }

        .search-form {
            display: flex;
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .search-input {
            flex: 1;
            padding: 1rem 1.5rem;
            border: 2px solid #e8e8e8;
            border-radius: 6px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .search-input:focus {
            outline: none;
            border-color: #1a73e8;
            box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.1);
        }

        .search-btn {
            background: #1a73e8;
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .search-btn:hover {
            background: #1557b0;
            transform: translateY(-1px);
        }

        /* Animation du 404 */
        .error-number {
            animation: bounce 2s ease-in-out infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .error-number {
                font-size: 8rem;
            }
            
            .error-title {
                font-size: 2rem;
            }
            
            .error-subtitle {
                font-size: 1.1rem;
            }
            
            .error-buttons {
                flex-direction: column;
                width: 100%;
                max-width: 300px;
            }
            
            .error-btn {
                width: 100%;
                text-align: center;
                justify-content: center;
            }
            
            .suggestions-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .search-form {
                flex-direction: column;
            }
            
            .search-input,
            .search-btn {
                width: 100%;
            }
        }

        @media (max-width: 480px) {
            .error-hero {
                padding: 4rem 0 5rem 0;
            }
            
            .error-number {
                font-size: 6rem;
            }
            
            .suggestions-title {
                font-size: 2rem;
            }
            
            .suggestion-card {
                padding: 2rem;
            }
        }