/**
 * ========================================
 * MAISONS CTL - THÈME INDÉPENDANT
 * ========================================
 * 
 * Fichier : Style CSS (Header du thème + Styles globaux)
 * Description : Fichier obligatoire pour que WordPress reconnaisse le thème
 *               Ce fichier contient le header du thème INDÉPENDANT
 *               Les styles spécifiques sont dans header.css et footer.css
 * 
 * Chemin : wp-content/themes/maisons-ctl-custom/style.css
 * 
 * Version : 3.0.0
 * Date création : 01/10/2025 - 08:35
 * Dernière modification : 20/10/2025 - 12:45
 * 
 * Auteur : Claude Sonnet 4.5
 * 
 * ⚠️ IMPORTANT :
 * - Ce fichier doit TOUJOURS être présent à la racine du thème
 * - Le header ci-dessous est OBLIGATOIRE pour WordPress
 * - ❌ LA LIGNE "Template: Divi" A ÉTÉ SUPPRIMÉE (v3.0.0)
 * - ✅ Le thème est maintenant 100% INDÉPENDANT
 * - Ne pas supprimer ce fichier, sinon le thème ne sera pas reconnu
 * 
 * Structure du projet :
 * - style.css (ce fichier) : Header du thème + styles globaux
 * - functions.php : Configuration et chargement des assets
 * - index.php : Template par défaut (obligatoire)
 * - page.php : Template pour les pages standards
 * - single-plan_maison.php : Template pour les plans individuels
 * - assets/css/header.css : Styles du header
 * - assets/css/footer.css : Styles du footer
 * - template-parts/ : Templates PHP réutilisables
 * 
 * Changelog :
 * - v3.0.0 (20/10/2025 - 12:45) : 🎉 INDÉPENDANCE TOTALE
 *   • ❌ Suppression de la ligne "Template: Divi"
 *   • ✅ Thème 100% autonome et indépendant
 *   • ✅ Plus aucune dépendance à Divi
 *   • ✅ Nouveau nom : "Maisons CTL" (sans "Custom")
 *   • ✅ Version majeure 3.0.0 pour marquer l'indépendance
 *   • ✅ Description mise à jour
 *   • ✅ Tags optimisés pour WordPress
 * 
 * - v1.0.0 (01/10/2025) : Création initiale (thème enfant Divi)
 *   • Header du thème enfant configuré
 *   • Déclaration du thème parent (Divi)
 *   • Styles globaux de base
 * 
 * ========================================
 */

/*
Theme Name: Maisons CTL
Theme URI: https://www.maisons-ctl.com
Description: Thème professionnel sur-mesure pour la construction de maisons individuelles dans le Loir-et-Cher depuis 1976. Thème indépendant, moderne et optimisé pour les performances.
Author: Maisons CTL / Claude Sonnet 4.5
Author URI: https://www.maisons-ctl.com
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maisons-ctl-custom
Tags: construction, maisons, custom, loir-et-cher, responsive, accessibility-ready, custom-header, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4

🎉 THÈME INDÉPENDANT - Version 3.0.0
❌ Plus de dépendance à Divi
✅ Autonome et professionnel
✅ Optimisé performances
✅ SEO-friendly
✅ Responsive
✅ Accessible (WCAG AA)
*/

/* ============================================
   STYLES GLOBAUX
   ============================================
   
   Ce fichier contient les styles globaux
   qui s'appliquent à tout le site.
   
   Les styles spécifiques du header et footer
   sont dans leurs fichiers CSS dédiés :
   - assets/css/header.css
   - assets/css/footer.css
   
   ============================================ */

/**
 * ========================================
 * RESET DE BASE
 * ========================================
 */

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

*::before,
*::after {
    box-sizing: border-box;
}

/**
 * ========================================
 * VARIABLES CSS (Charte graphique)
 * ========================================
 */

:root {
    /* Couleurs principales */
    --color-primary: #E74C3C;        /* Rouge Maisons CTL */
    --color-primary-dark: #C0392B;   /* Rouge foncé (hover) */
    --color-secondary: #2C3E50;      /* Gris foncé */
    --color-secondary-dark: #1a252f; /* Gris très foncé */
    
    /* Couleurs neutres */
    --color-white: #ffffff;
    --color-gray-100: #f8f9fa;
    --color-gray-200: #ecf0f1;
    --color-gray-300: #BDC3C7;
    --color-gray-400: #95a5a6;
    --color-gray-500: #7f8c8d;
    --color-gray-600: #555555;
    --color-gray-700: #333333;
    
    /* Typographie */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    
    /* Espacements */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    
    /* Bordures */
    --radius-sm: 5px;
    --radius-md: 10px;
    --radius-lg: 15px;
    
    /* Ombres */
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 15px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/**
 * ========================================
 * TYPOGRAPHIE GLOBALE
 * ========================================
 */

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-secondary);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    color: var(--color-secondary);
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

/**
 * ========================================
 * LIENS GLOBAUX
 * ========================================
 */

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--color-primary-dark);
    outline: none;
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/**
 * ========================================
 * CONTENEUR PRINCIPAL
 * ========================================
 */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%;
}

.container-fluid {
    width: 100%;
    padding: 0 var(--spacing-md);
}

/**
 * ========================================
 * CLASSES UTILITAIRES - TEXTE
 * ========================================
 */

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

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-gray-500); }

.font-weight-normal { font-weight: 400; }
.font-weight-bold { font-weight: 700; }

/**
 * ========================================
 * CLASSES UTILITAIRES - MARGES
 * ========================================
 */

.mt-0 { margin-top: 0; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }

.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }

.ml-0 { margin-left: 0; }
.ml-10 { margin-left: 10px; }
.ml-20 { margin-left: 20px; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-10 { margin-right: 10px; }
.mr-20 { margin-right: 20px; }
.mr-auto { margin-right: auto; }

.mx-auto { 
    margin-left: auto; 
    margin-right: auto; 
}

/**
 * ========================================
 * CLASSES UTILITAIRES - PADDING
 * ========================================
 */

.pt-0 { padding-top: 0; }
.pt-20 { padding-top: 20px; }
.pt-40 { padding-top: 40px; }
.pt-60 { padding-top: 60px; }

.pb-0 { padding-bottom: 0; }
.pb-20 { padding-bottom: 20px; }
.pb-40 { padding-bottom: 40px; }
.pb-60 { padding-bottom: 60px; }

.pl-0 { padding-left: 0; }
.pl-20 { padding-left: 20px; }

.pr-0 { padding-right: 0; }
.pr-20 { padding-right: 20px; }

/**
 * ========================================
 * IMAGES RESPONSIVE
 * ========================================
 */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * ========================================
 * BOUTONS GLOBAUX
 * ========================================
 */

.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 16px;
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
    text-align: center;
    line-height: 1.5;
}

.btn:hover,
.btn:focus {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
}

.btn:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--color-secondary);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-secondary-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-large {
    padding: 15px 40px;
    font-size: 18px;
}

.btn-small {
    padding: 8px 20px;
    font-size: 14px;
}

/**
 * ========================================
 * SECTIONS GÉNÉRIQUES
 * ========================================
 */

section {
    padding: var(--spacing-xl) 0;
}

section h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--color-secondary);
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--color-secondary);
}

.section-subtitle {
    font-size: 18px;
    text-align: center;
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-lg);
}

/**
 * ========================================
 * GRILLES FLEXBOX
 * ========================================
 */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.col {
    flex: 1;
    padding: 0 10px;
}

.col-1 { width: 8.333%; }
.col-2 { width: 16.666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-6 { width: 50%; }
.col-8 { width: 66.666%; }
.col-12 { width: 100%; }

/**
 * ========================================
 * CARDS (CARTES)
 * ========================================
 */

.card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.card-header {
    padding: var(--spacing-md);
    background: var(--color-gray-100);
    border-bottom: 1px solid var(--color-gray-200);
}

.card-body {
    padding: var(--spacing-md);
}

.card-footer {
    padding: var(--spacing-md);
    background: var(--color-gray-100);
    border-top: 1px solid var(--color-gray-200);
}

/**
 * ========================================
 * FORMULAIRES
 * ========================================
 */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-family: var(--font-family);
    transition: border-color var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
}

textarea {
    min-height: 120px;
    resize: vertical;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-secondary);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

/**
 * ========================================
 * LISTES
 * ========================================
 */

ul, ol {
    margin-bottom: var(--spacing-md);
    padding-left: 30px;
}

li {
    margin-bottom: 8px;
}

ul.list-unstyled,
ol.list-unstyled {
    list-style: none;
    padding-left: 0;
}

/**
 * ========================================
 * TABLEAUX
 * ========================================
 */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-md);
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

th {
    background: var(--color-secondary);
    color: var(--color-white);
    font-weight: 600;
}

tr:hover {
    background: var(--color-gray-100);
}

/**
 * ========================================
 * CLASSES D'ACCESSIBILITÉ
 * ========================================
 */

.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    padding: 8px;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    z-index: 100000;
}

.skip-link:focus {
    top: 6px;
}

/**
 * ========================================
 * CLASSES UTILITAIRES - AFFICHAGE
 * ========================================
 */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }

/**
 * ========================================
 * RESPONSIVE - TABLETTE (768px - 1024px)
 * ========================================
 */

@media (max-width: 1024px) {
    h1 { font-size: 36px; }
    h2 { font-size: 28px; }
    h3 { font-size: 22px; }
    
    section {
        padding: var(--spacing-lg) 0;
    }
    
    .section-title {
        font-size: 32px;
    }
}

/**
 * ========================================
 * RESPONSIVE - MOBILE (< 768px)
 * ========================================
 */

@media (max-width: 768px) {
    :root {
        --font-size-base: 15px;
    }
    
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    
    section {
        padding: var(--spacing-lg) 0;
    }
    
    .section-title {
        font-size: 26px;
        margin-bottom: var(--spacing-md);
    }
    
    .container {
        padding: 0 15px;
    }
    
    .btn {
        padding: 10px 25px;
        font-size: 15px;
    }
    
    .row {
        flex-direction: column;
    }
    
    [class*="col-"] {
        width: 100%;
        margin-bottom: var(--spacing-md);
    }
    
    /* Affichage responsive */
    .d-md-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
}

/**
 * ========================================
 * ANIMATIONS
 * ========================================
 */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

.slide-in-up {
    animation: slideInUp 0.6s ease-in-out;
}

/**
 * ========================================
 * PRINT STYLES (pour l'impression)
 * ========================================
 */

@media print {
    *,
    *::before,
    *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    a,
    a:visited {
        text-decoration: underline;
    }
    
    img {
        page-break-inside: avoid;
    }
    
    h2, h3 {
        page-break-after: avoid;
    }
}

/* ============================================
   FIN DU FICHIER style.css v3.0.0
   ============================================
   
   🎉 THÈME INDÉPENDANT DE DIVI
   
   Prochaines étapes :
   1. ✅ Remplacer l'ancien style.css par celui-ci
   2. ✅ Aller dans Apparence > Thèmes
   3. ✅ Activer "Maisons CTL"
   4. ✅ Tester toutes les pages du site
   5. ✅ Si tout fonctionne → Supprimer Divi
   
   ============================================ */