/**
 * ================================================================
 * FICHIER : Chantier.css
 * EMPLACEMENT : 2027_B2B/pages/Chantier/Chantier.css
 * SHORT_DESC : Styles de la page d'accueil provisoire (chantier en direct)
 * DESCRIPTION : Hero, avancement global, grille des phases, journal, expertises, CTA.
 *
 * SOMMAIRE :
 *   - HERO_CHANTIER
 *   - AVANCEMENT_PHASES
 *   - AVANCEMENT_DETAIL (compteurs, chantiers, jalons)
 *   - JOURNAL_CHANTIER
 *   - EXPERTISES_A_VENIR
 *   - CTA_CONTACT
 *   - RESPONSIVE
 *
 * MODIFICATIONS :
 *   - 10/10/2026 06:36 : Compteurs, barres de progression par phase, cartes de chantiers (livré / en cours / à venir) et frise des jalons (Dialogue n° 580, Claude) — A VALIDER PAR JaxX
 *   - 06/10/2026 13:41 : Copie conservée de l'ancienne accueil « chantier en direct », déplacée en page Coulisses ; « trente ans » remplacé par « plus de vingt ans » — A VALIDER PAR JaxX
 *   - 06/10/2026 05:05 : Création (pages/Home) — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* HERO_CHANTIER ======================================================= */
.hero_chantier
{
    padding: clamp(56px, 10vh, 120px) 0 64px;
    border-bottom: 1px solid var(--ligne);
}

.hero_titre_second
{
    font-weight: 400;
    color: var(--encre_second);
    font-size: 0.55em;
    display: block;
    margin-top: 0.3em;
    letter-spacing: -0.01em;
}

.hero_texte
{
    max-width: 62ch;
    font-size: 1.1rem;
    color: var(--encre_second);
    margin-bottom: 40px;
}

.avancement_global
{
    max-width: 640px;
    margin-bottom: 40px;
}

.avancement_global_tete
{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.avancement_global_label
{
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--encre_second);
}

.avancement_global_valeur
{
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.03em;
}

.avancement_global_etape
{
    color: var(--encre_second);
    margin-top: 10px;
}

.hero_actions
{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
/* HERO_CHANTIER ======================================================= */

/* AVANCEMENT_PHASES =================================================== */
.section_avancement,
.section_journal,
.section_expertises
{
    padding: 72px 0;
}

.section_avancement h2,
.section_journal h2,
.section_expertises h2
{
    max-width: 24ch;
    margin-bottom: 40px;
}

/* Grille fluide : les cartes se replient d'elles-mêmes (3 → 2 → 1) selon la largeur */
.phases_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1px;
    background: var(--ligne);
    border: 1px solid var(--ligne);
}

.phase_carte
{
    background: var(--surface);
    padding: 24px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.phase_numero
{
    color: var(--encre_second);
}

.phase_statut
{
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid var(--ligne);
    color: var(--encre_second);
}

.phase_fait .phase_statut
{
    border-color: var(--succes);
    color: var(--succes);
}

.phase_en_cours .phase_statut
{
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent_texte);
}

.phase_a_venir
{
    opacity: 0.72;
}

.phase_titre
{
    font-size: 1.3rem;
    margin: 4px 0 6px;
}

.phase_items li
{
    font-size: 0.9rem;
    color: var(--encre_second);
    padding: 4px 0 4px 14px;
    position: relative;
}

.phase_items li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 6px;
    height: 1px;
    background: var(--encre_second);
}

.phase_fait .phase_items li::before
{
    background: var(--succes);
}
/* AVANCEMENT_PHASES =================================================== */

/* AVANCEMENT_DETAIL =================================================== */
/* Compteurs, chantiers du moment et jalons datés (n° 580) */
.avancement_bloc
{
    margin-top: 56px;
}

.avancement_bloc_titre
{
    display: flex;
    align-items: baseline;
    gap: var(--espace_2);
    font-size: 1.15rem;
    margin-bottom: 16px;
}

.avancement_bloc_nombre
{
    color: var(--encre_second);
}

.compteurs_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1px;
    background: var(--ligne);
    border: 1px solid var(--ligne);
    margin-top: 32px;
}

.compteur_carte
{
    background: var(--surface);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.compteur_valeur
{
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--accent);
}

.compteur_libelle
{
    font-size: 0.85rem;
    color: var(--encre_second);
}

.phase_progression
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 6px;
}

.phase_progression .barre_progression
{
    flex: 1;
}

.phase_progression_valeur
{
    color: var(--encre_second);
    min-width: 4ch;
    text-align: right;
}

.chantiers_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1px;
    background: var(--ligne);
    border: 1px solid var(--ligne);
}

.chantier_carte
{
    background: var(--surface);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chantier_tete
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--espace_2);
}

.chantier_statut
{
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 2px;
    border: 1px solid var(--ligne);
    color: var(--encre_second);
}

.chantier_livre .chantier_statut
{
    border-color: var(--succes);
    color: var(--succes);
}

.chantier_en_cours .chantier_statut
{
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent_texte);
}

.chantier_a_venir
{
    opacity: 0.72;
}

.chantier_date
{
    color: var(--encre_second);
}

.chantier_titre
{
    font-size: 1.05rem;
}

.chantier_texte
{
    font-size: 0.9rem;
    color: var(--encre_second);
    flex: 1;
}

.chantier_progression
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.chantier_progression .barre_progression
{
    flex: 1;
}

.chantier_livre .barre_progression_valeur
{
    background: var(--succes);
}

.chantier_progression_valeur
{
    color: var(--encre_second);
    min-width: 4ch;
    text-align: right;
}

.jalons_liste
{
    border-left: 1px solid var(--ligne);
    margin-left: 6px;
    max-width: 900px;
}

.jalon_entree
{
    position: relative;
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 4px 20px;
    padding: 0 0 22px 24px;
}

.jalon_entree::before
{
    content: "";
    position: absolute;
    left: -5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--surface);
    box-sizing: content-box;
    margin-left: -2px;
}

.jalon_date
{
    color: var(--encre_second);
}

.jalon_titre
{
    font-size: 1rem;
    font-weight: 600;
}

.jalon_texte
{
    grid-column: 2;
    font-size: 0.9rem;
    color: var(--encre_second);
}

@media (prefers-reduced-motion: reduce)
{
    .barre_progression_valeur
    {
        transition: none;
    }
}
/* AVANCEMENT_DETAIL =================================================== */

/* JOURNAL_CHANTIER ==================================================== */
.section_journal
{
    background: var(--fond_second);
    border-top: 1px solid var(--ligne);
    border-bottom: 1px solid var(--ligne);
}

.journal_liste
{
    border-top: 1px solid var(--ligne);
    max-width: 900px;
}

.journal_entree
{
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ligne);
    align-items: baseline;
}

.journal_horodatage
{
    color: var(--encre_second);
}

.journal_titre
{
    font-size: 1rem;
}

.journal_note
{
    margin-top: 18px;
    color: var(--encre_second);
}
/* JOURNAL_CHANTIER ==================================================== */

/* EXPERTISES_A_VENIR ================================================== */
.expertises_grille
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--espace_3);
}

.expertise_carte
{
    border-top: 2px solid var(--encre);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.expertise_titre
{
    font-size: 1.15rem;
}

.expertise_texte
{
    color: var(--encre_second);
    font-size: 0.95rem;
    flex: 1;
}

.expertise_badge
{
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--encre_second);
}
/* EXPERTISES_A_VENIR ================================================== */

/* CTA_CONTACT ========================================================= */
.section_cta
{
    padding: 80px 0;
    background: var(--encre);
    color: var(--fond);
}

.section_cta h2
{
    max-width: 22ch;
}

.cta_texte
{
    opacity: 0.75;
    margin-bottom: 32px;
}

.cta_actions
{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.section_cta .bouton_secondaire
{
    border-color: var(--fond);
    color: var(--fond);
}

/* Principe MBR : le sombre est la base, le clair surcharge */
.section_cta
{
    background: var(--surface);
    color: var(--encre);
}

.section_cta .bouton_secondaire
{
    border-color: var(--encre);
    color: var(--encre);
}

html.bright_mode .section_cta
{
    background: var(--encre);
    color: var(--fond);
}

html.bright_mode .section_cta .bouton_secondaire
{
    border-color: var(--fond);
    color: var(--fond);
}
/* CTA_CONTACT ========================================================= */

/* RESPONSIVE ========================================================== */
/* Colonnes gérées par la grille fluide (auto-fit) : seuls les ajustements de rythme restent ici */
@media (max-width: 600px)
{
    .hero_chantier
    {
        padding-top: 40px;
    }

    .phase_carte
    {
        min-height: 0;
    }

    .journal_entree
    {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .jalon_entree
    {
        grid-template-columns: 1fr;
    }

    .jalon_texte
    {
        grid-column: 1;
    }

    .avancement_bloc
    {
        margin-top: 40px;
    }

    .section_avancement,
    .section_journal,
    .section_expertises
    {
        padding: 48px 0;
    }

    .hero_actions .bouton_principal,
    .hero_actions .bouton_secondaire,
    .cta_actions .bouton_principal,
    .cta_actions .bouton_secondaire
    {
        width: 100%;
        justify-content: center;
    }
}
/* RESPONSIVE ========================================================== */