/* ============================================================================
   COUCHE RESPONSIVE — Technic & Plans
   ----------------------------------------------------------------------------
   Le design d'origine (asset/css/style.css) est pensé pour une largeur fixe de
   1200px avec un positionnement en `position:absolute` et des coordonnées en
   pixels. Ce fichier ne TOUCHE PAS au desktop : au-dessus de 1240px, le rendu
   reste identique à l'existant. En dessous, on "linéarise" la mise en page
   (conteneur fluide + passage des éléments absolus en flux normal empilé) pour
   un affichage propre sur tablette et mobile.

   Sections déjà responsive par ailleurs (ne pas dupliquer ici) :
   - .anniversary  (style inline dans partials/home/anniversary.blade.php)
   - .wa / .wa__*  (style inline dans partials/latest-articles.blade.php)
   ========================================================================== */

/* Burger : masqué sur desktop, affiché sous le breakpoint mobile */
.nav-toggle { display: none; }
.nav-burger { display: none; }

/* ===========================================================================
   TABLETTE & MOBILE  (sous la largeur de design 1200px)
   =========================================================================== */
@media (max-width: 1240px) {

    /* --- Garde-fous globaux ---------------------------------------------- */
    html, body { overflow-x: hidden; max-width: 100%; }

    /* Conteneur fluide (au lieu de width:1200px fixe) */
    .content {
        width: 100% !important;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    /* Aucune image ne dépasse l'écran */
    img { max-width: 100%; height: auto; }

    /* ====================================================================
       HEADER + MENU BURGER
       ==================================================================== */
    .header { height: auto !important; }

    .header .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        position: relative;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .header-logo {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: 56px !important;
        max-width: 70vw;
    }

    /* Le trait d'ombre décoratif n'a pas de sens en flux mobile */
    .header-shadow { display: none !important; }

    /* Icône burger */
    .nav-burger {
        display: block;
        cursor: pointer;
        font-size: 30px;
        line-height: 1;
        color: #44403D;
        padding: 6px 8px;
        margin: 0;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Menu replié par défaut, déplié quand la case est cochée */
    .header-menu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        display: none;
        flex-direction: column;
        width: 100%;
        order: 3;          /* passe sous le logo + burger */
        margin-top: 10px;
    }
    .nav-toggle:checked ~ .header-menu { display: flex; }

    .header-menu-item {
        margin: 0 !important;
        padding: 13px 6px;
        font-size: 18px;
        border-bottom: 1px solid #eee !important;
        border-left: 3px solid transparent;
    }
    .header-menu-item:hover,
    .header-menu-item-active {
        border-left-color: #F7AE2C;
        border-bottom-color: #eee !important;
        background: #faf7f2;
    }

    /* ====================================================================
       SLIDER
       ==================================================================== */
    .slider-item { width: 100% !important; height: auto !important; }

    /* ====================================================================
       BLOC 3 COLONNES
       ==================================================================== */
    .three-block {
        height: auto !important;
        padding: 16px 0;
        background-size: cover;
    }
    .three-block-content {
        width: 100% !important;
        max-width: 1251px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .three-block-item {
        float: none !important;
        width: 100% !important;
        max-width: 385px;
        height: auto !important;
        margin: 12px auto !important;
    }
    .three-block-item img {
        width: 100% !important;
        height: auto !important;
    }
    .three-block-item p {
        line-height: 1.3 !important;
        padding: 18px 0;
        font-size: 26px;
    }

    /* ====================================================================
       INDEX-ONE : "Qui sommes-nous ?"
       ==================================================================== */
    .index-one {
        height: auto !important;
        padding: 40px 0;
        background: #F2F2F3;
    }
    .index-one .content {
        display: flex;
        flex-direction: column;
    }
    .index-one-title,
    .index-one-text,
    .index-one-btn,
    .index-one img {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100%;
    }
    .index-one-title { order: 1; margin-bottom: 22px; }
    .index-one-text  { order: 2; margin-bottom: 24px; }
    .index-one-btn   { order: 3; width: auto !important; align-self: flex-start; }
    .index-one img   { order: 4; height: auto !important; margin-top: 28px; }

    /* ====================================================================
       INDEX-TWO : "Démarche administrative"
       ==================================================================== */
    .index-two { height: auto !important; padding: 40px 0; }
    .index-two-content {
        height: auto !important;
        background: none !important;
        display: flex;
        flex-direction: column;
    }
    .index-two img,
    .index-two-title,
    .index-two-text,
    .index-two-btn {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100%;
    }
    .index-two-title { order: 1; margin-bottom: 22px; }
    .index-two-text  { order: 2; margin-bottom: 24px; }
    .index-two-btn   { order: 3; width: auto !important; align-self: flex-start; }
    .index-two img   { order: 4; height: auto !important; max-width: 385px; margin-top: 28px; }

    /* ====================================================================
       INDEX-THREE : "Les + Technic & Plans"
       ==================================================================== */
    .index-three { height: auto !important; padding: 40px 0; }
    .index-three .content {
        display: flex;
        flex-direction: column;
    }
    .index-three img,
    .index-three-title,
    .index-three-text {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100%;
    }
    .index-three-title { order: 1; margin-bottom: 22px; }
    .index-three-text  { order: 2; margin-bottom: 24px; }
    .index-three img   { order: 3; height: auto !important; margin-top: 8px; }

    /* ====================================================================
       INDEX-FOUR : "Réalisations"
       ==================================================================== */
    .index-four { padding-bottom: 32px; background-size: contain; }
    .index-four-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 4px;
    }
    .index-four-link { margin: 0 !important; }

    .index-four-thumbs {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .index-four-thumb {
        float: none !important;
        width: 100% !important;
        max-width: 384px;
        height: auto !important;
        margin: 0 !important;
    }
    .index-four-thumb img { width: 100% !important; height: auto !important; display: block; }
    .index-four-btn { width: 100% !important; max-width: 384px; }

    /* ====================================================================
       FOOTER
       ==================================================================== */
    .footer { height: auto !important; padding: 24px 0 32px; background-size: cover; }
    .footer-logo {
        width: auto !important;
        max-width: 70vw;
        height: auto !important;
        margin: 0 auto 24px auto;
    }
    .footer-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 10px;
    }
    .footer-menu-item { margin: 0 !important; }
    .footer-conception { margin-top: 40px !important; }
}

/* ===========================================================================
   PAGE "NOTRE SAVOIR-FAIRE" : sections .competences / .demarches
   Ces sections utilisent des galeries lightbox (.manific-image) : on ne touche
   pas au markup, on linéarise simplement la mise en page absolue.
   =========================================================================== */
@media (max-width: 1240px) {

    /* --- Bandeau d'entête de page (image hero) --- */
    .entete img { width: 100%; height: auto; }

    /* --- Blocs "compétences" (étude, projet, perspective) --- */
    .competences { height: auto !important; padding: 40px 0; }
    .competences .content { display: flex; flex-direction: column; }

    .competences-title,
    .competences-subtitle,
    .competences-text,
    .competences-btn,
    .competences .manific-image {
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important;
        width: 100% !important;
        max-width: 100%;
    }
    .competences-title    { order: 1; margin-bottom: 18px; }
    .competences-subtitle { order: 2; margin-bottom: 8px; }
    .competences-text     { order: 3; margin-bottom: 20px; }
    .competences-btn      { order: 4; width: auto !important; align-self: flex-start; margin-bottom: 24px; }

    /* Label vertical décoratif + loupe : sans intérêt en flux mobile */
    .competences-text-vertical,
    .competences-extend { display: none !important; }

    /* Galerie d'exemples : images empilées pleine largeur */
    .competences .manific-image { order: 6; display: block; margin-bottom: 12px; }
    .competences-img {
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* --- Blocs "démarches" --- */
    .demarches,
    .demarches-two,
    .demarches-three { height: auto !important; padding: 40px 0; }
    .demarches .content,
    .demarches-two .content,
    .demarches-three .content { display: flex; flex-direction: column; }

    .demarches-title, .demarches-text, .demarches-image,
    .demarches-two-title, .demarches-two-text, .demarches-two-list,
    .demarches-two-btn, .demarches-two-image,
    .demarches-three-title, .demarches-three-text, .demarches-three-image,
    .grid-diapo {
        position: static !important;
        top: auto !important; left: auto !important; right: auto !important;
        width: 100% !important;
        max-width: 100%;
        float: none !important;
    }
    .demarches-image,
    .demarches-three-image { height: auto !important; margin-top: 16px; }
    .demarches-two-image   { height: auto !important; margin-top: 16px; max-width: 240px; }
    .demarches-two-btn     { width: auto !important; align-self: flex-start; margin-top: 8px; }

    /* Liste numérotée des étapes (permis) */
    .demarches-two-list { height: auto !important; }
    .demarches-two-list-item {
        position: relative !important;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 16px 0 !important;
        padding-left: 48px;
        min-height: 40px;
    }
    .demarches-two-list-item-num {
        position: absolute !important;
        left: 0; top: 0;
    }
    .demarches-two-list-item-content {
        position: static !important;
        top: auto !important; left: auto !important;
        width: 100% !important;
    }

    /* Mini-galerie 8 vignettes (diaporama étapes) */
    .grid-diapo {
        height: auto !important;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
        margin-top: 16px;
    }
    .grid-diapo a { display: block; }
    .grid-diapo img {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
}

/* ===========================================================================
   PETITS ÉCRANS  (téléphones)
   =========================================================================== */
@media (max-width: 600px) {

    /* Titres de sections un peu plus compacts */
    .index-one-title,
    .index-two-title,
    .index-three-title,
    .demarches-title,
    .demarches-two-title,
    .demarches-three-title,
    .competences-title,
    .courtage-title {
        font-size: 30px !important;
    }

    .index-four-title { font-size: 28px !important; }
    .three-block-item p { font-size: 22px; }

    /* Boutons fléchés : pleine largeur, lisibles au pouce */
    .index-one-btn,
    .index-two-btn,
    .index-three-btn,
    .index-four-btn,
    .competences-btn,
    .demarches-two-btn,
    .courtage-btn {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}