/* ==========================================================================
   Adaptation telephone (ecrans de moins de 768 px).
   Charge via <link media="(max-width: 767px)"> dans layouts/public.blade.php :
   au-dessus de cette largeur le navigateur n'applique RIEN de ce fichier,
   donc l'affichage ordinateur/tablette en paysage reste strictement identique.
   Ne modifie ni styles.css ni complement.css (regle du projet).
   ========================================================================== */
@media (max-width: 767px) {

    html { -webkit-text-size-adjust: 100%; }

    /* --- Largeurs fixes de 960 px -> pleine largeur ---------------------- */
    .navbar_icons,
    .social_icons,
    .title_container,
    .header_container,
    .main_container,
    .sub_container,
    .results_container,
    .ad_top,
    .nav_container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .navbar_icons,
    .header_container,
    .title_container {
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 10px;
    }

    .social_icons { justify-content: center; }

    .page_title {
        font-size: 2rem;
        line-height: 2rem;
    }

    #copyright_wrapper,
    #copyright {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        text-align: center;
    }

    /* --- Barre de navigation --------------------------------------------- */
    .nav_container {
        flex-wrap: wrap;
        overflow: visible;
        padding: 0 10px;
        align-items: flex-start;
    }

    .fsb_logo_nav { height: 64px; }

    .nav_ul_container {
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        min-height: 64px;
        margin-left: 6px;
        padding: 4px 6px 8px;
        box-sizing: border-box;
    }

    .nav_ul_container {
        display: flex;
        flex-direction: column;
    }

    /* Connexion / langue : en haut du bloc, plus en position absolue. */
    .flex_container_02 {
        order: -1;
        position: static;
        justify-content: flex-end;
        flex-wrap: wrap;
        margin: 0;
        font-size: .85rem;
    }

    .nav_ul {
        flex-direction: column;
        margin-top: 6px;
        padding: 0;
    }

    .nav_ul > div {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .nav_ul > div > li {
        min-width: 0;
        margin: 0;
        padding: 6px 9px;
        font-size: .9rem;
    }

    /* Menu "more" : sous le menu, en flux normal. */
    .nav_dropdown {
        position: static;
        height: auto;
        flex-wrap: wrap;
        padding: 6px 10px;
        margin-top: 6px;
    }

    /* --- Formulaire de recherche ------------------------------------------ */
    .form_container_02a {
        flex-basis: auto;
        padding: 10px;
    }

    .form_container_02a > div,
    .sw_ac_field,
    .sw_ac_field input,
    .form_container_02a input,
    .form_container_02a select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form_container_02a > div { margin-bottom: 6px; }

    .button_01 { min-width: 0; }

    .results_highlites { flex-wrap: wrap; padding: 10px; }
    .higlites_stats { font-size: 1.4rem; }

    /* --- Filtres avances : blocs a largeur fixe (563/392/165 px) -> pleine largeur -- */
    .flex_size_fixer_01,
    .flex_size_fixer_02,
    .flex_size_fixer_03,
    .search_ui_subcontainer_01,
    .search_ui_subcontainer_col_02,
    .search_ui_subcontainer_col_03,
    .search_ui_subcontainer_col_04 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .search_ui_subcontainer_col_04 { padding-right: 20px; }

    /* .criterias_visibility .flex_size_fixer_01 (complement.css,
       2026-10-11, largeur 613px) a une specificite plus forte que la
       regle generique ".flex_size_fixer_01 { width:100% }" juste
       au-dessus : sans cette regle, elle gagnerait aussi sous 768px et
       figerait "options" a 613px sur telephone (defilement horizontal).
       Meme selecteur ici pour l'emporter (specificite egale, chargee
       apres complement.css -- voir layouts/public.blade.php). */
    .criterias_visibility .flex_size_fixer_01 {
        width: 100%;
        max-width: 100%;
    }

    /* --- "options" : le panneau Category/Classification (complement.css,
       .search_ui_options_layout / .search_ui_options_panel) passe d'une
       rangee (cote a cote) a une colonne (empile), comme le reste du
       panneau de filtres sous 768 px -- sinon le panneau etroit (145px en
       desktop) se retrouverait ecrase a cote du bloc de cases a cocher au
       lieu de passer en pleine largeur. La ligne de separation passe de
       verticale (border-right, depuis l'interversion du 2026-10-11) a
       horizontale (border-top), coherente avec le nouvel empilement. */
    .search_ui_options_layout {
        flex-direction: column;
    }

    /* Demande de Xavier (2026-10-11, interversion des deux blocs sur
       desktop) : dans le HTML, .search_ui_options_panel passe desormais
       AVANT .search_ui_options_main (panneau a gauche, cases a cocher a
       droite). Sur telephone, l'empilement colonne suit l'ordre du HTML
       -- sans "order" ici, le panneau Category/Classification se
       retrouverait en HAUT et les cases a cocher "options" en BAS, soit
       l'inverse de l'empilement mobile historique (deja en place avant
       l'interversion desktop, et conforme a la toute premiere demande de
       Xavier -- les boutons Category/Classification sous les cases a
       cocher). On fige donc l'ordre visuel mobile independamment de
       l'ordre du HTML. */
    .search_ui_options_main {
        order: 1;
    }

    .search_ui_options_panel {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-right: 0;
        padding-top: 15px;
        border-right: none;
        border-top: 1px solid var(--neutral-light-color);
    }

    .size_field_group,
    .size_field,
    .closed_studios_field select,
    .tank_option {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* La grille "options" (complement.css, .search_ui_options_main
       .search_ui_subcontainer_col_03) est forcee en 2 colonnes a largeur
       egale sur desktop (2026-10-11, corrige pour les langues aux
       libelles longs -- voir le commentaire la-bas). Sur telephone, la
       largeur disponible (deja reduite a ~264px, voir .flex_size_fixer_01
       plus haut) ne laisse plus de place pour 2 colonnes lisibles, meme en
       anglais -- on reviendrait aux coupures de mots agressives dans
       toutes les langues (ex. "postobrabot-ka" en russe). On revient donc
       ici au comportement naturel d'avant (flex-wrap: wrap, largeur des
       colonnes basee sur leur contenu) : la 2e colonne repasse sous la
       1ere, en liste simple a 1 colonne -- plus lisible sur petit ecran,
       et deja le comportement habituel du reste de ce panneau de filtres
       sur mobile. */
    .search_ui_options_main .search_ui_subcontainer_col_03 {
        flex-wrap: wrap;
    }

    .search_ui_options_main .search_ui_subcontainer_col_03 > div {
        flex: 1 1 auto;
        min-width: 100%;
    }

    /* Meme principe que ci-dessus, pour les 2 autres blocs a 3
       sous-colonnes corriges en meme temps sur desktop (complement.css,
       .search_ui_subcontainer_col_02.flex_size_fixer_03 ... -- "exterior
       shooting areas or backlots" et "specialized soundstage"). Sur
       telephone, ces blocs passent deja a 100% de largeur (regle
       generique .flex_size_fixer_03 { width:100% } plus haut) : on
       repasse ici aussi en liste simple a 1 colonne plutot que de
       retrecir 3 sous-colonnes dans une largeur devenue trop etroite. */
    .search_ui_subcontainer_col_02.flex_size_fixer_03 .search_ui_subcontainer_col_03 {
        flex-wrap: wrap;
    }

    .search_ui_subcontainer_col_02.flex_size_fixer_03 .search_ui_subcontainer_col_03 > div {
        flex: 1 1 auto;
        min-width: 100%;
    }

    /* "closed studios" + "only studios for sale" (complement.css,
       .search_ui_facility_row) : nowrap sur desktop (2026-10-11, meme
       correctif que pour la grille "options" ci-dessus -- Xavier :
       "fait toutes les versions comme l'anglaise"). Sur telephone, la
       carte "installation" est bien plus etroite (~90% de l'ecran) et ne
       laisse pas assez de place pour les deux cote a cote sans faire
       passer le libelle "for sale" sur 2-3 lignes compressees dans une
       colonne etroite -- moins lisible que de les empiler, comme le
       reste de ce panneau de filtres sur mobile. On revient donc ici au
       comportement naturel (flex-wrap: wrap) : "for sale" repasse sous
       le menu, en pleine largeur. */
    .search_ui_facility_row {
        flex-wrap: wrap;
    }

    /* Le conteneur des 2 cases (.search_ui_facility_checkboxes,
       complement.css, ajoute le 2026-10-13) prend toute la largeur ici
       aussi, comme le faisait .for_sale_field seul avant lui -- meme
       resultat visuel (les 2 cases empilees, en pleine largeur). */
    .search_ui_facility_row .search_ui_facility_checkboxes {
        flex: 1 1 100%;
    }

    .search_ui_facility_row .for_sale_field {
        flex: 1 1 100%;
        white-space: normal;
    }

    /* --- Cartes de studios : deux colonnes ------------------------------- */
    .flex_container_04_alt { justify-content: space-between; }

    .card_url {
        display: block;
        width: calc(50% - 4px);
    }

    .result_summary {
        width: 100%;
        height: 150px;
        padding: 46px 8px 0 10px;
        margin: 4px 0;
        font-size: .85rem;
        line-height: 1rem;
        box-sizing: border-box;
    }

    /* --- Fiche d'un studio -------------------------------------------------- */
    .fiche_studio,
    .fiche_studio_fermee,
    .fiche_studio_a_vendre {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    /* Bouton "export pdf" + badge : sous le titre, en flux normal. */
    .title_actions_row {
        position: static;
        flex-wrap: wrap;
        margin: 8px 0 4px;
    }

    .result_main_left_right {
        flex-direction: column;
    }

    .result_main_left,
    .result_main_right,
    .result_page_header,
    .listcontainer_01,
    .listcontainer_02,
    .listcontainer_05,
    .listcontainer_05a,
    .listcontainer_06,
    .section_body {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    .result_info_table,
    .results_table_01 {
        width: 100%;
    }

    .result_info_table td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .studio_name {
        font-size: 1.3rem;
        width: calc(100% - 90px);
        max-width: calc(100% - 90px);
    }

    .studio_address { max-width: 100%; }

    .carte_conteneur,
    .carte_osm { overflow: hidden; max-width: 100%; }

    /* Tableaux larges : defilent dans leur cadre ; position:relative pour que
       les elements en position absolue qu'ils contiennent soient eux aussi
       rognes par ce cadre au lieu d'elargir toute la page. */
    .main_table_container { position: relative; }

    /* Photos de la galerie : trois par rangee. */
    .view_image {
        width: calc(33.333% - 10px);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .listcontainer_06 { padding: 10px; }

    /* --- Accueil ------------------------------------------------------------ */
    #homepage_subtitle {
        font-size: 1rem;
        line-height: 1.5rem;
        word-break: break-word;
    }

    /* --- Fenetres connexion / inscription ------------------------------------ */
    .form_container_01 {
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        transform: none;
        width: calc(100% - 20px);
        max-width: 500px;
        padding: 16px 18px;
        box-sizing: border-box;
    }

    /* styles.css decale chaque fenetre de 250 px (moitie de ses 500 px) par un
       selecteur d'identifiant, plus fort qu'une classe : on le neutralise ici. */
    #register_form,
    #sign-in_form,
    #forgot-password,
    #activation_account,
    #profile_modal {
        transform: none;
    }

    /* L'encart orange "press_disclaimer" de l'inscription est tire 110 px au-dessus
       de la fenetre : sur l'ecran etroit il sortirait de la page, on decale donc
       la fenetre vers le bas pour le laisser visible. */
    #register_form { margin-top: 130px; }

    .form_container_01 input {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- Vue liste (tableau des studios) ---------------------------------------
       Le tableau (13 colonnes, ~800 px) etait rogne par son propre cadre
       (overflow:hidden pour les coins arrondis) sans pouvoir defiler : on fait
       defiler son conteneur, et on epingle a gauche les colonnes "#" et "nom". */
    #table_container .result_page_list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #resultsTable {
        /* overflow:hidden (coins arrondis) ferait du tableau lui-meme le conteneur de
           defilement des colonnes epinglees : elles ne suivraient plus le cadre. */
        overflow: visible;
        min-width: 780px;
        font-size: .85rem;
    }

    #resultsTable .results_table_row,
    #resultsTable .results_table_header { padding-left: 4px; padding-right: 4px; }

    #resultsTable thead tr:first-child td { position: static; }

    #resultsTable thead th:nth-child(1),
    #resultsTable tbody td:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 30px;
        background-color: var(--neutral-xtra_light-color, #fff);
    }

    #resultsTable thead th:nth-child(2),
    #resultsTable tbody td:nth-child(2) {
        position: sticky;
        left: 30px;
        z-index: 2;
        min-width: 110px;
        max-width: 130px;
        background-color: var(--neutral-xtra_light-color, #fff);
        box-shadow: 2px 0 3px rgba(0, 0, 0, .15);
    }

    #resultsTable thead th:nth-child(2).active { background-color: var(--contrast-color); }

    /* --- Selection (projets) ---------------------------------------------------- */
    .flex_container_01,
    summary.flex_container_01,
    .selection_layout,
    .selection_content,
    .selection_title_row,
    .selected_selection_name,
    .bloc_unites,
    .main_table_container,
    .listcontainer_04 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .flex_container_01 { padding-left: 10px; padding-right: 10px; }

    .selection_sidebar {
        width: 100%;
        align-self: stretch;
    }

    .selection_title_row .selected_selection_name { font-size: 1.5rem; }

    .bloc_unites { flex-wrap: wrap; gap: 8px; }

    /* --- Statistics : graphiques ---------------------------------------------------
       Les noms de studios (longs) etaient tronques dans un graphique de 270 px :
       on lui garde une largeur confortable, que son cadre fait defiler. */
    .bloc_graphique {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .chart_canvas_wrap { min-width: 520px; }

    /* --- Galerie photos ------------------------------------------------------------ */
    .title_container_alt,
    .image_container_01 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Le logo du studio, posé en haut a droite : plus petit pour ne pas masquer le titre. */
    .title_studio_logo {
        width: 64px;
        height: 64px;
        top: 0;
    }

    .title_container_alt .results_container {
        padding-right: 70px;
        flex-wrap: wrap;
    }

    /* Les photos (460 x 360 px fixes) passent en pleine largeur, une par rangee. */
    .photorama {
        width: 100%;
        height: auto;
        max-height: 70vh;
        padding: 10px 0 0;
        box-sizing: border-box;
    }

    .listcontainer_06 > div,
    .listcontainer_06 figure,
    .listcontainer_06 figcaption {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .title_container_alt .page_title {
        padding-right: 72px;
        box-sizing: border-box;
    }

    /* --- Pages d'information (FAQ, a propos...) ------------------------------------- */
    .textcontainer,
    .details_text_02,
    .section_body {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .textcontainer,
    .section_body { padding-left: 10px; padding-right: 10px; }

    /* --- SWpro / Donate : cartes de prix ------------------------------------------------- */
    .price_container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-bottom: 0;
    }

    .price_card {
        width: calc(50% - 6px);
        min-width: 0;
        box-sizing: border-box;
    }

    .price_txt.price_txt_01 {
        font-size: 2.4rem;
        margin: 20px 0 8px;
        padding: 6px;
    }

    .price_txt.price_txt_02 { font-size: .85rem; padding: 4px 6px; }
    .price_txt.price_txt_04 { font-size: 1.1rem; padding: 8px 4px; }
    .price_card { aspect-ratio: auto; min-height: 200px; }

    /* --- Page "pro" (SWpro) : mise en page "pro et vendeuse" (2026-10-15)
       -- la colonne d'abonnement (deux cartes) passe en pleine largeur,
       centree, sous le texte. Ne touche pas .account_side_column de base
       (comptes/profil.blade.php), seulement sa version "abonnement_layout"
       -- voir complement.css. --------------------------------------------- */
    .abonnement_layout .account_side_column {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Vue liste : les colonnes epinglees reprennent la couleur de leur ligne
       (rouge = a vendre, orange = ranch) au lieu du fond neutre. */
    #resultsTable tbody tr.ligne_a_vendre td:nth-child(-n+2) { background-color: hsl(0, 70%, 91%); }
    #resultsTable tbody tr.ligne_fermee td:nth-child(-n+2) { background-color: hsl(0, 0%, 7%); }
    #resultsTable tbody tr.ligne_studio_projet td:nth-child(-n+2) { background-color: hsl(205, 70%, 91%); }
    #resultsTable tbody tr.ligne_ranch td:nth-child(-n+2) { background-color: hsl(40, 100%, 89%); }

    /* --- Page News : une seule colonne de cartes -------------------------------------- */
    .news_grille { grid-template-columns: 1fr; }
    .news_annee { font-size: 1.8rem; }
    .news_index { padding: 8px 10px; }

    .news_onglet { flex: 1; justify-content: center; padding: 10px 8px 8px; font-size: 1rem; }
}