/* ============================================
   FEUILLE DE STYLE PRINCIPALE - AU CENTRE DE L'ÊTRE
   Auteur : Jérémy MOUSSON EI
   Copyright : Tous droits réservés
   Conforme HTML5/CSS3 - Octobre 2025
   Conforme WCAG 2.2 Niveau AA

   1. VARIABLES CSS
   2. RESET ET STYLES DE BASE
   2 BIS. FONTS
   3. TYPOGRAPHIE
   4. CONTENEUR PRINCIPAL
   5. EN-TÊTE (HEADER)
   6. SECTION HERO (BANNIÈRE)
   7. SECTIONS DE CONTENU
   8. BOUTONS
   9. PIED DE PAGE (FOOTER)
   10. RESPONSIVE DESIGN (Mobile First)
   11. UTILITAIRES
   12. ANIMATIONS
   13. ACCESSIBILITÉ (WCAG 2.2 AA)
   14. IMPRESSION (Print Styles)
   15. STYLES SPÉCIFIQUES PAGE SHIATSU                      css/shiatsu.css
   16. STYLES SPÉCIFIQUES PAGE DRAINAGE LYMPHATIQUE         css/dlm.css
   17. STYLES SPÉCIFIQUES PAGE CONTACT / TARIFS             css/contact.css
   18. STYLES SPÉCIFIQUES PAGE LA SÉANCE                    css/la-seance.css
   19. STYLES SPÉCIFIQUES PAGE SHIATSU AU TRAVAIL           css/shiatsu-au-travail.css
   20. STYLES SPÉCIFIQUES PAGES LÉGALES                     css/mentions-legales.css
   21. STYLES SPÉCIFIQUES PAGE PLAN DU SITE                 css/plan-du-site.css
   22. STYLES SPÉCIFIQUES PAGE CGV                          css/cgv.css
   23. STYLES SPÉCIFIQUES POUR LA CARTE OPENSTREETMAP       css/open-street-map.css
   24. PAGE 404                                             css/404.css
   ============================================ */

/* ============================================
   15. STYLES SPÉCIFIQUES PAGE SHIATSU
   ============================================ */

/* Introduction Shiatsu avec grille */
.content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--espacement-lg);
    align-items: center;
    margin-top: var(--espacement-md);
}

.content-grid-g {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--espacement-lg);
    align-items: center;
    margin-top: var(--espacement-md);
}

.content-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);      /*3 colonnes égales*/
    gap: var(--espacement-lg);
    align-items: center;
    margin-top: var(--espacement-md);
}

.content-main {
    line-height: 1.8;
}

.lead {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--couleur-primaire);
    margin-bottom: var(--espacement-md);
}

.content-sidebar img {
    align-items: center;
    width: 100%;
    border-radius: 8px;
    box-shadow: var(--ombre-moyenne);
    margin-bottom: var(--espacement-sm);
}

/* Section pratique du Shiatsu */
.practice-info {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--espacement-lg);
}

.info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--espacement-md);
    margin-top: var(--espacement-lg);
}

.info-card {
    background-color: white;
    padding: var(--espacement-md);
    border-radius: 8px;
    box-shadow: var(--ombre-legere);
    transition: transform var(--transition-normale), box-shadow var(--transition-normale);
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--ombre-forte);
}

.info-card h3 {
    color: var(--couleur-primaire);
    margin-bottom: var(--espacement-sm);
    font-size: 1.5rem;
}

/* Section bienfaits */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--espacement-lg);
    margin-bottom: var(--espacement-md);
}

.benefit-category {
    background-color: white;
    padding: var(--espacement-md);
    border-radius: 8px;
    box-shadow: var(--ombre-legere);
}

.benefit-category h3 {
    color: var(--couleur-accent);
    font-size: 1.5rem;
    margin-bottom: var(--espacement-md);
    border-bottom: 3px solid var(--couleur-accent);
    padding-bottom: var(--espacement-xs);
}

.benefit-category ul {
    list-style: none;
    padding: 0;
}

.benefit-category li {
    padding-left: 1.5rem;
    position: relative;
    margin-bottom: var(--espacement-sm);
}

.benefit-category li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--couleur-accent);
    font-weight: bold;
    font-size: 1.2rem;
}

.benefit-category .note {
    margin-top: var(--espacement-md);
    padding: var(--espacement-sm);
    background-color: var(--couleur-fond-alt);
    border-left: 4px solid var(--couleur-primaire);
    font-style: italic;
    font-size: 0.95rem;
}

.complement-info {
    text-align: center;
    margin-top: var(--espacement-lg);
    padding: var(--espacement-md);
    background-color: var(--couleur-fond-alt);
    border-radius: 8px;
}

/* Section Shiatsu thérapeutique */
.therapeutic-content {
    max-width: 900px;
    margin: 0 auto;
}

.book-reference {
    margin-top: var(--espacement-lg);
    padding: var(--espacement-md);
    background-color: white;
    border-radius: 8px;
    box-shadow: var(--ombre-legere);
}

.book-reference h3 {
    color: var(--couleur-primaire);
    margin-bottom: var(--espacement-sm);
}

.book-reference blockquote {
    margin-top: var(--espacement-md);
    background-color: var(--couleur-fond-alt);
    padding: var(--espacement-md);
    border-radius: 4px;
}

.book-reference footer {
    margin-top: var(--espacement-sm);
    font-size: 0.9rem;
}

/* Section reconnaissance officielle */
.recognition-timeline {
    display: grid;
    gap: var(--espacement-lg);
}

.recognition-item {
    background-color: white;
    padding: var(--espacement-md);
    border-radius: 8px;
    box-shadow: var(--ombre-legere);
    border-left: 5px solid var(--couleur-primaire);
}

.recognition-item h3 {
    color: var(--couleur-primaire);
    font-size: 1.5rem;
    margin-bottom: var(--espacement-sm);
}

.recognition-item blockquote {
    margin-top: var(--espacement-md);
    background-color: var(--couleur-fond-alt);
    padding: var(--espacement-md);
    border-radius: 4px;
}

/* Section aperçu Shiatsu au travail */
.shiatsu-work-preview {
    background: linear-gradient(135deg, var(--couleur-primaire) 0%, var(--couleur-secondaire) 100%);
    color: white;
}

.shiatsu-work-preview h2 {
    color: white;
    text-align: center;
    margin-bottom: var(--espacement-md);
}

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

.work-preview-content p {
    font-size: 1.2rem;
    margin-bottom: var(--espacement-md);
}

/* Section en savoir plus */
.learn-more {
    background-color: var(--couleur-fond-alt);
    text-align: center;
}

.learn-more h2 {
    margin-bottom: var(--espacement-lg);
}

/* Responsive pour page Shiatsu */
@media (max-width: 768px) {
    .content-grid,
    .content-grid-g {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .info-cards {
        grid-template-columns: 1fr;
    }

    .content-grid-3 {
        grid-template-columns: 1fr;
    }
}