/* =============================================================
   UVW ARCHITECTURE · CORRECTIF RESPONSIVE
   Fichier : css/responsive-fix.css
   Version 2 · 30/08/2026
   À charger APRÈS css/style.css dans index.html et about.html.
   Ne remplace aucun fichier existant, ne supprime rien.

   Corrige :
   1. Le texte des projets, masqué sous 900 px (display:none)
   2. Le pied de page fixe qui recouvrait les images sur mobile
   3. Le menu qui sortait de l'écran sur mobile
   4. La colonne de texte coupée entre 900 et 1700 px
   5. Le texte long qui recouvrait le projet suivant sur portable
   6. L'image de la page cabinet, figée à 977 px de large

   Nouveautés de la version 2 :
   7. Les bandes grises sous les photos sur mobile
   8. Typographie réduite d'environ 20 % sur mobile

   Nouveautés de la version 3 :
   9. Bloc contact cliquable du pied de page (WhatsApp, tel, mail)
   10. Bouton WhatsApp flottant sur mobile (optionnel)

   Nouveauté de la version 4 :
   11. Sur mobile, le pied de page remonte en tête de page
   ============================================================= */


/* -------------------------------------------------------------
   1. TOUTES TAILLES
   .project-page avait une hauteur figée de calc(96vh - 70px).
   Sur un écran de portable, les textes longs dépassaient cette
   hauteur et se superposaient au projet suivant.
   ------------------------------------------------------------- */
.project-page {
    height: auto;
    min-height: calc(96vh - 70px);
    padding-bottom: 32px;
}

.project-container > .project-page:last-child {
    padding-bottom: 110px;
}

/* Filet de sécurité : aucune image ne dépasse son conteneur */
img {
    max-width: 100%;
}

/* Fond de la zone photo en blanc. style.css y met un dégradé gris
   (#f8f8f8 vers #e8e8e8) qui sert d'indicateur de chargement, mais
   qui se voit dès que l'image ne couvre pas exactement la zone. */
.project-photo-zone {
    background: #ffffff;
}


/* -------------------------------------------------------------
   2. ÉCRANS DE 901 À 1700 PX
   La zone photo était figée à 900x600 px. Avec les marges en vw,
   la mise en page ne tenait qu'à partir de 1698 px de large :
   en dessous, la colonne de texte sortait de l'écran et se
   faisait couper par overflow-x:hidden. Concerne tous les
   portables 13 et 14 pouces.
   ------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1700px) {
    .project-content {
        margin-left: 5vw;
        margin-right: 5vw;
        gap: 3vw;
    }

    .project-photo-zone {
        width: auto;
        flex: 1 1 auto;
        max-width: 900px;
        height: auto;
        aspect-ratio: 3 / 2;
        max-height: 66vh;
        margin-left: auto;
    }

    .project-text {
        width: 30vw;
        min-width: 260px;
        max-width: 420px;
        flex-shrink: 1;
    }
}


/* -------------------------------------------------------------
   3. MOBILE ET TABLETTE (900 PX ET MOINS)
   ------------------------------------------------------------- */
@media (max-width: 900px) {

    /* --- En-tête : le logo à 52 px poussait "shop" hors écran --- */
    .nav {
        flex-wrap: wrap;
        row-gap: 4px;
        padding: 8px 5vw;
    }

    .logo {
        font-size: 34px;
        letter-spacing: 2px;
        line-height: 1.1;
    }

    .nav-right {
        gap: 18px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .nav-link {
        font-size: 13px;
    }

    /* body en conteneur flex : indispensable pour que order:-1
       remonte le pied de page. height:auto évite que les enfants
       soient comprimés par le height:100% de style.css. */
    body {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100%;
    }

    /* Le dégagement sous l'en-tête fixe est porté par le pied de
       page, qui est désormais le premier bloc de la page. */
    .main-container {
        order: 0;
        flex: 0 0 auto;
        margin-top: 0 !important;
    }

    /* --- Empilement vertical, hauteur libre --- */
    .project-page {
        min-height: 0;
        margin-bottom: 56px !important;
        padding-bottom: 0;
        display: block;
    }

    .project-content {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        margin: 0 !important;
        padding: 18px 5vw 0 !important;
        gap: 18px !important;
    }

    .project-photo-zone {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: 3 / 2;
        max-height: 52vh;
        margin-left: 0;
        flex: 0 0 auto;
    }

    /* --- Bandes grises sous les photos ---
       La règle .main-container img plus bas redimensionne l'image de
       la page cabinet. Sans l'exception ci-dessous elle écrasait aussi
       height:100% sur les photos de projet : la zone faisait 338x253
       et l'image seulement 338x225, laissant voir 28 px de fond gris. */
    .project-photo-zone .project-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* ===== LE CORRECTIF CENTRAL =====
       style.css contenait .project-text { display:none !important }
       Cette règle, plus tardive dans la cascade, la neutralise. */
    .project-text {
        display: block !important;
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
    }

    /* --- Échelle typographique mobile ---
       Les tailles d'origine sont posées en style inline par
       script-simple.js. Un !important en CSS passe devant, sans
       toucher au JavaScript. Réduction d'environ 20 %. */

    /* Nom du projet · 22px à l'origine */
    .project-text .project-name {
        font-size: 17px !important;
        letter-spacing: 0.3px !important;
        margin-bottom: 6px !important;
    }

    /* Étiquette bleue (Logements, Rénovation énergétique...) · 14px */
    .project-text .mot_cle {
        font-size: 11px !important;
        padding: 2px 6px !important;
        margin-bottom: 8px !important;
    }

    /* Lieu · 16px */
    .project-text .project-subtitle {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    /* Année · 16px */
    .project-text .project-year {
        font-size: 13px !important;
        margin-bottom: 14px !important;
    }

    /* Description · 14px */
    .project-text .project-description-fr,
    .project-text .project-description-en {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Blocs de crédits : distinctions, partenaires, références,
       maître d'ouvrage. Ils n'ont pas de classe, on les vise par
       leur position dans la structure. */
    .project-text > div {
        font-size: 12px !important;
    }

    .project-text > div[style*="margin-top: 18px"] {
        margin-top: 14px !important;
    }

    /* Intitulé de section · 12px à l'origine */
    .project-text > div > div:first-child {
        font-size: 10.5px !important;
        letter-spacing: 0.06em !important;
    }

    /* Contenu de section · 13px à l'origine */
    .project-text > div > div:last-child {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    /* Mention de copyright, dernier bloc · 12px à l'origine */
    .project-text > div:last-child {
        font-size: 10.5px !important;
        margin-top: 12px !important;
    }

    .project-container > .project-page:last-child {
        padding-bottom: 0;
    }

    /* --- Pied de page remonté en tête de page ---
       Il était en position fixe et recouvrait les images. Il passe
       en flux normal, et surtout il remonte au-dessus des projets :
       coordonnées et lien WhatsApp sont visibles dès l'arrivée, sans
       avoir à parcourir les 15 000 px de la page.

       Le déplacement se fait par order:-1, sans toucher à l'ordre du
       HTML. Il faut pour cela que body soit un conteneur flex, d'où
       la règle ci-dessus. Le desktop n'est pas concerné. */
    .footer {
        order: -1;
        flex: 0 0 auto;
        position: static;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 74px;          /* dégagement sous l'en-tête fixe */
        padding: 14px 5vw 18px;
        border-top: none;
        border-bottom: 1px solid #e5e5e5;
    }

    .footer-right {
        text-align: left;
        align-items: flex-start;
    }

    /* --- Page cabinet : l'image porte width:977px en style inline ---
       L'exception :not(.project-image) est indispensable, sans elle
       cette règle réapparaît sous forme de bandes grises sur l'accueil. */
    .main-container img:not(.project-image) {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    .about-container {
        padding-bottom: 32px;
    }
}


/* -------------------------------------------------------------
   4. PETITS ÉCRANS (520 PX ET MOINS)
   ------------------------------------------------------------- */
@media (max-width: 520px) {
    .logo {
        font-size: 28px;
    }

    .nav-right {
        gap: 14px;
    }

    .nav-link {
        font-size: 12.5px;
    }

    .footer {
        margin-top: 66px;
    }
}


/* -------------------------------------------------------------
   5. ACCESSIBILITÉ
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .project-photo-zone::before {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* -------------------------------------------------------------
   6. BLOC CONTACT DU PIED DE PAGE
   Accompagne le nouveau bloc .footer-right à coller dans
   index.html et about.html (voir contact-footer.html).
   ------------------------------------------------------------- */

.contact-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 3px 12px;
    margin-top: 2px;
}

.contact-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #000000;
    text-decoration: none;
    font-size: 11px;
    line-height: 1.3;
    transition: opacity var(--transition-speed, 0.3s);
}

.contact-action:hover {
    opacity: 0.6;
}

.contact-action:focus-visible {
    outline: 1px solid #0066cc;
    outline-offset: 3px;
}

.contact-action.whatsapp {
    font-weight: 600;
}

.contact-action .wa-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    fill: #25D366;
}

/* Bouton flottant : caché par défaut, il n'apparaît que sur mobile */
.wa-float {
    display: none;
}

@media (max-width: 900px) {
    /* Le pied de page est aligné à gauche sur mobile */
    .contact-actions {
        justify-content: flex-start;
        gap: 6px 14px;
    }

    .contact-action {
        font-size: 12px;
    }

    .contact-action .wa-icon {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

    /* --- Bouton WhatsApp flottant ---
       Le pied de page se trouve à 15 000 px du haut sur l'accueil :
       presque personne ne l'atteint. Ce bouton reste accessible
       pendant toute la visite. Supprimer le <a class="wa-float">
       du HTML suffit à le désactiver. */
    .wa-float {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 14px;
        bottom: 14px;
        z-index: 1200;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #ffffff;
        border: 1px solid #d8d8d8;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
        text-decoration: none;
    }

    .wa-float svg {
        width: 24px;
        height: 24px;
        fill: #25D366;
    }

    /* Dégage le bas de la page sous le bouton flottant.
       Ne s'applique que si le bouton est présent dans la page.
       Depuis la version 4 c'est le contenu, et non le pied de page,
       qui se termine en bas de la page. */
    body:has(.wa-float) .main-container {
        padding-bottom: 70px;
    }
}

/* ===== FIN DU CORRECTIF ===== */