/* 
  Ce site est développé par :
  Jean-François McDuff
  et
  Sylvain Meunier
  
  Pour le compte de :
  jemesouviens.net

  2020 © jemesouviens.net - Tous droits réservés

  ─────────────────────────────────────────────────────────
  mobile.css  —  Adaptation portrait cellulaire uniquement
  ─────────────────────────────────────────────────────────
  Ce fichier ne modifie JAMAIS le rendu PC.
  Il est chargé avec :
    <link rel="stylesheet" href="styles/css/mobile.css"
          media="screen and (max-width: 768px)">

  Toutes les règles ici sont dans
    @media screen and (max-width: 768px) { … }
  pour une double sécurité.

  TABLE DES MATIÈRES
  ──────────────────
  1.  Fondations  (body, overflow, viewport)
  2.  En-tête / barre de navigation
  3.  Menu hamburger
  4.  Contenu principal (#mainContent)
  5.  Calendrier interactif
  6.  Pages BSAR (Biographies, Synthèses, Annexes, Répertoires)
  7.  Modales
  8.  Footer
  9.  Utilitaires typographiques
  10. Barre de chargement
  11. Images & avatars
  12. Recherche & catégories
*/

@media screen and (max-width: 768px) {

  /* ─────────────────────────────────────────────────────────
     0. VISIBILITÉ PC / MOBILE
     ─────────────────────────────────────────────────────────
     Sur mobile : éléments PC masqués, éléments mobile révélés
  */
  .pc_only                          { display: none  !important; }
  .mobile_only                      { display: block !important; }
  /* La nav mobile utilise flex — cibler par data-display */
  .mobile_only.nav_mobile           { display: flex  !important; }


  /* ─────────────────────────────────────────────────────────
     1. FONDATIONS
     ───────────────────────────────────────────────────────── */

  /* Autorise le défilement vertical sur mobile */
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* ── Image de fond fixe ──────────────────────────────────────
     Sur PC, background-size: 100% 100% fonctionne car le body
     ne défile pas (overflow: hidden). Sur mobile le body défile,
     ce qui étire et fait bouger l'image avec le contenu.

     Solution : pseudo-élément ::before fixé en position fixed,
     plein écran, z-index -1. Le body devient transparent.
     Fonctionne sur iOS Safari, Android Chrome et tous les autres.
  */
  body.bg_main {
    background-image: none !important;
  }

  body.bg_main::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url('../images/bg_main.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /* Formulaire de recherche calendrierRecherche */
  #elementRecherche {
    font-size: 14px !important;
    height: 32px !important;
    padding: 4px 8px !important;
  }

  #zone_calendrier input[type="submit"] {
    font-size: 13px !important;
    padding: 4px 10px !important;
    min-height: unset !important;
    height: 32px !important;
    margin-top: 6px;
  }

  /* Loading bar : toujours fixe pour bloquer les clics pendant le chargement */
  .loading {
    position: fixed !important;
    overflow: hidden !important;
  }

  /* Texte de base légèrement agrandi pour les doigts */
  p {
    font-size: 16px !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
  }

  /* Boutons et zones tactiles : minimum 44px de hauteur */
  button,
  input[type="submit"],
  input[type="button"],
  select,
  .curseur_main {
    min-height: 44px;
    font-size: 16px !important;
  }

  /* Liens plus faciles à tapper */
  a {
    padding: 2px 0;
  }

  /* Sections — supprimer le box-shadow lourd sur petit écran */
  section {
    box-shadow: 2px 2px 6px rgba(0,0,0,0.25) !important;
    margin-bottom: 3% !important;
  }


  /* ─────────────────────────────────────────────────────────
     2. MENU PC — MASQUÉ SUR MOBILE
     ─────────────────────────────────────────────────────────
     Le menu PC (.menuPaysage) est entièrement masqué.
     Il est remplacé par le hamburger + dropdown mobile.
     La zone mascotte est également masquée (inutile sur mobile).
  */

  .menuPaysage {
    display: none !important;
  }


  /* ─────────────────────────────────────────────────────────
     3. MENU MOBILE — HAMBURGER + DROPDOWN
     ─────────────────────────────────────────────────────────
     Le bouton hamburger et le dropdown sont INJECTÉS
     par mobile.js directement dans le DOM.
     Ces règles les stylient.
  */

  /* Barre fixe en haut contenant le hamburger */
  #mobile_barre_nav {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 48px;
    background-color: rgba(11, 63, 164, 0.97);
    z-index: 500;
    padding: 0 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    overflow: visible;        /* permet au logo de déborder en dessous */
  }

  /* Logo : 96px de haut, légèrement décollé du haut */
  #mobile_barre_nav img {
    height: 96px;
    width: auto;
    position: relative;
    top: 27px;
    transform: none;
  }

  /* Bouton hamburger (les 3 barres) */
  #mobile_hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    gap: 5px;
    border-radius: 6px;
  }

  #mobile_hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* Animation croix quand ouvert */
  #mobile_hamburger.actif span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #mobile_hamburger.actif span:nth-child(2) {
    opacity: 0;
  }
  #mobile_hamburger.actif span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Dropdown du menu — 50% de l'écran, aligné à droite */
  #mobile_menu_dropdown {
    display: none;
    position: fixed;
    top: 48px;
    right: 0;
    left: auto;
    width: 50%;
    background-color: rgba(11, 63, 164, 0.98);
    z-index: 499;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    border-left: 2px solid rgba(255,255,255,0.2);
    box-shadow: -4px 4px 12px rgba(0,0,0,0.4);
    border-radius: 0 0 0 8px;
  }

  #mobile_menu_dropdown.ouvert {
    display: block !important;
  }

  /* Chaque lien du dropdown */
  #mobile_menu_dropdown a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px !important;
    color: white !important;
    font-size: 15px !important;
    font-weight: bold !important;
    font-family: 'Times New Roman', Times, serif !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    text-decoration: none !important;
  }

  #mobile_menu_dropdown a:last-child {
    border-bottom: none;
  }

  #mobile_menu_dropdown a:active {
    background-color: rgba(255,255,255,0.15);
  }

  /* Icône image dans chaque item */
  #mobile_menu_dropdown a img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    flex-shrink: 0;
  }


  /* ─────────────────────────────────────────────────────────
     4. CONTENU PRINCIPAL (#mainContent)
     ─────────────────────────────────────────────────────────
     PC : position: absolute; top: 24vh; height: 76vh
     Mobile : position normale, hauteur automatique
  */

  #mainContent {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding: 8px 2% !important;
    padding-top: 100px !important; /* espace pour la barre (48px) + débordement du logo (48px) */
    overflow-y: visible !important;
  }

  /* Pages autonomes sans #mainContent (calendrierPlus, calendrierRecherche)
     Le body doit aussi avoir un espace sous la barre fixe */
  body {
    padding-top: 100px !important;
  }

  /* Annuler ce padding sur les pages qui ont #mainContent
     (le padding-top de #mainContent suffit) */
  body:has(#mainContent) {
    padding-top: 0 !important;
  }


  /* ─────────────────────────────────────────────────────────
     5. CALENDRIER INTERACTIF
     ─────────────────────────────────────────────────────────

     5a. BARRE CONTRÔLES (Catégories + Rechercher)
  */

  /* Les deux contrôles côte à côte sur une ligne */
  #zone_calendrier .marge_ext_sup_1p {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 4px;
  }

  #Categories {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex: 1;
  }

  #Categories select {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    font-size: 12px !important;
    width: 100% !important;
    min-height: 32px;
  }

  #Rechercher {
    position: relative !important;
    flex: 1;
    text-align: right;
  }

  #Rechercher div {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
  }

  #Rechercher input[type="text"],
  #Rechercher input[type="search"],
  #rechercherTexte {
    font-size: 12px !important;
    padding: 4px 6px;
    min-height: 32px;
    width: 100%;
  }

  /* Filtre catégories : pleine largeur, positionné sous la barre */
  #typeEvenementCategories {
    position: fixed !important;
    left: 2% !important;
    width: 96% !important;
    top: 110px !important;
    z-index: 50 !important;
  }


  /* ─────────────────────────────────────────────────────────
     5b. EN-TÊTE DU CALENDRIER (navigation mois + légende)
  */

  /* Table de navigation : drapeaux masqués, boutons compacts */
  #calendrier_entete table {
    width: 100% !important;
  }

  /* Masquer les drapeaux dans l'en-tête calendrier */
  #calendrier_entete .img_drapeau_petit {
    display: none !important;
  }

  /* Boutons précédent / suivant : texte court */
  #calendrier_entete input[type="submit"] {
    font-size: 11px !important;
    padding: 4px 6px !important;
    min-height: 32px;
    white-space: nowrap;
  }

  /* Mois + Année : taille raisonnable */
  #calendrier_entete .police_xxl {
    font-size: large !important;
  }

  /* Sélecteur de mois : pleine largeur, centré */
  #moisSelect {
    position: fixed !important;
    left: 2% !important;
    width: 96% !important;
    top: 110px !important;
    z-index: 50 !important;
  }

  #moisSelect table {
    width: 100% !important;
  }

  /* Légende : items en float left, police minuscule */
  #calendrier_legende > div,
  #calendrier_entete > center > div {
    text-align: left !important;
    padding: 4px 2% !important;
  }

  #calendrier_entete table.police_petit td {
    display: inline-block !important;
    float: left;
    font-size: 9px !important;
    margin: 1px 3px 1px 0;
    vertical-align: middle;
  }

  /* Espacement des cases couleur de légende */
  #calendrier_entete table.police_petit box {
    min-width: 12px !important;
    min-height: 10px !important;
    display: inline-block;
  }

  /* Ligne de séparation entre légende et grille */
  #calendrier_entete hr {
    margin: 4px 0 !important;
  }

  /* Légère marge supérieure de la zone navigation calendrier */
  #calendrier_legende {
    padding-top: 6px !important;
    margin-top: 0 !important;
  }

  /* CalendrierPlus / CalendrierRecherche : supprimer scroll interne et hauteur fixe */
  #liste_scroll {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
  }

  #zone_calendrier {
    height: auto !important;
  }


  /* ─────────────────────────────────────────────────────────
     5c. GRILLE DU CALENDRIER
  */

  #calendrier_interactif {
    margin: 0 0 1em 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* En-têtes des jours : très compact */
  #calendrier_interactif th {
    font-size: 8px !important;
    padding: 2px 0 !important;
    text-align: center;
  }

  /* Cases : hauteur fixe, compactes */
  .calendrier_case {
    width: calc(100% / 7) !important;
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
  }

  /* Contenu positionné dans la case */
  .calendrier_case .position_r {
    height: 56px !important;
  }

  /* Numéro du jour : petit mais lisible */
  .calendrier_jour,
  .calendrier_jour_actuel {
    height: 16px !important;
    width: 16px !important;
    top: 2% !important;
    right: 2% !important;
  }

  .calendrier_jour p,
  .calendrier_jour_actuel p {
    font-size: 8px !important;
    margin-top: 2px !important;
  }

  /* Jour férié : police minuscule */
  .ferier {
    font-size: 6px !important;
    margin-top: 1px !important;
    width: 65% !important;
  }

  /* Événements dans la case : années empilées */
  .calendrier_evenement {
    font-size: 7px !important;
    width: 95% !important;
    margin-left: 2% !important;
    bottom: 1px !important;
    right: 0 !important;
    overflow-y: hidden !important;
  }

  .calendrier_evenement tr td {
    padding: 0 !important;
    line-height: 1.2 !important;
    font-size: 7px !important;
  }

  /* Bouton + : gros, bien visible, facile à tapper */
  .plus {
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    top: 50% !important;
    right: 50% !important;
    transform: translate(50%, -50%) !important;
    z-index: 5 !important;
    opacity: 0.92;
  }


  /* ─────────────────────────────────────────────────────────
     6. PAGES BSAR (Biographies / Synthèses / Annexes / Répertoires)
     ─────────────────────────────────────────────────────────
     PC : 3 colonnes flottantes zone_BSAR à 32% chacune
     Mobile : colonnes empilées, pleine largeur
  */

  /* Page À propos — sections côte-à-côte passent en colonne sur mobile */
  #menu_a_propos .l98[style*="display:flex"] {
    flex-direction: column !important;
  }

  #menu_a_propos .l98[style*="display:flex"] > div {
    width: 100% !important;
    margin-bottom: 16px;
  }

  /* Page Équipe — sections membres côte-à-côte passent en colonne */
  #menu_equipe .l98[style*="display:flex"] {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  #menu_equipe .l98[style*="display:flex"] > div {
    width: 100% !important;
  }

  /* Section titre : conserver la hauteur normale */
  #menu_equipe > section:first-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Section contactez-nous : 15px au-dessus */
  #menu_equipe > section.l98.centrer:last-of-type {
    margin-top: 10px !important;
  }

  /* Page Équipe — masquer le div conteneur des guides virtuels (h45v crée un espace énorme) */
  #menu_equipe .l98 > section.fl_gauche.l49 {
    display: none !important;
  }

  #menu_equipe > div.l98:nth-of-type(2) {
    display: none !important;
  }

  /* Biographies — supprimer la marge du h1 dans les sections pc_only cachées */
  #menu_biographie .zone_BSAR.pc_only {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Répertoires — images de couverture dans modal-texte uniquement (pas dans la liste artiste) */
  .modal-texte .portrait {
    float: left !important;
    width: 90px !important;
    height: auto !important;
    object-fit: cover;
    margin: 0 12px 8px 0 !important;
    border-radius: 4px;
  }

  .modal-texte .portrait:hover {
    width: 90px !important;
  }

  /* Page Bibliographie — une seule colonne sur mobile */
  #zoneBiblio {
    flex-direction: column !important;
    gap: 12px !important;
    padding: 2% !important;
  }

  #zoneBiblio .bloc-biblio {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Page Équipe — section Contactez-nous : champs pleine largeur + captcha centré */
  #menu_equipe form[action*="ctl_contact"] {
    width: 96% !important;
    text-align: left;
  }

  #menu_equipe form[action*="ctl_contact"] input[type="text"],
  #menu_equipe form[action*="ctl_contact"] input[type="email"],
  #menu_equipe form[action*="ctl_contact"] textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #menu_equipe .g-recaptcha {
    display: flex !important;
    justify-content: center !important;
  }

  /* Page Équipe — images portrait en float left, taille fixe, texte à côté */
  #menu_equipe .img_avatar {
    float: left !important;
    width: 100px !important;
    height: auto !important;
    margin: 0 12px 8px 8px !important;
    object-fit: cover;
  }

  .zone_BSAR {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    height: auto !important;
    min-height: 200px;
    margin-bottom: 16px !important;
  }

  /* Listes dans les zones BSAR : hauteur auto */
  .liste_BSAR {
    width: 100% !important;
    height: auto !important;
    max-height: 35vh;
    overflow-y: scroll;
  }

  /* Barre de défilement générale */
  .scroll_general {
    height: auto !important;
    max-height: 30vh;
  }

  /* Sous-titre de page */
  .page_stitre {
    width: 95% !important;
    margin: 8px auto !important;
  }

  /* Images avatar dans les listes biographies */
  .img_avatar {
    width: 35% !important;
    height: auto !important;
    max-height: 20vh;
  }


  /* ─────────────────────────────────────────────────────────
     7. MODALES
     ─────────────────────────────────────────────────────────
     PC : modal-content min-width 45%, max-width 60%
     Mobile : quasi plein écran, scroll interne
  */

  /* Fond sombre — plein écran sous la barre, sans padding */
  .modal,
  .modalX,
  .modal_portrait {
    z-index: 490 !important;
    position: fixed !important;
    top: 65px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 65px) !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Boîte blanche : positionnée en absolu avec marges explicites */
  .modal-content,
  .modal-contentX,
  .modalPortrait-content {
    position: absolute !important;
    top: 10px !important;
    left: 4% !important;
    right: 4% !important;
    bottom: 10px !important;
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    height: auto !important;
    max-height: unset !important;
    transform: none !important;
    border-radius: 10px !important;
    padding: 12px 4% !important;
    box-sizing: border-box !important;
    overflow-y: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.6) !important;
  }

  /* Bouton fermer : en haut à droite, ne rétrécit pas */
  .modal-content .close-button,
  .modal-contentX .close-button,
  .modalPortrait-content .close-button {
    flex-shrink: 0;
    align-self: flex-end;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 20px !important;
    margin-bottom: 4px;
  }

  /* Titre h2 : ne rétrécit pas */
  .modal-content h2,
  .modal-contentX h2 {
    flex-shrink: 0;
  }

  /* Zone de texte : prend l'espace restant et défile */
  .modal-texte {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    font-size: 15px !important;
    max-height: none !important;
  }

  /* Bouton fermer : plus grand sur mobile */
  .close-button {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 20px !important;
  }

  /* Images dans les modales — pleine largeur, texte en dessous */
  .modal-texte .paysage,
  .modal-texte img.paysage {
    float: none !important;
    width: 90% !important;
    max-width: 90% !important;
    height: auto !important;
    display: block !important;
    margin: 6px auto 8px auto !important;
  }
  .modal-texte .paysage:hover {
    width: 100% !important;
  }

  /* Portrait dans modal-texte général : pleine largeur, centré, texte en dessous */
  .modal-texte img.portrait:not(.rep-oeuvre-item img),
  .modal-texte img.fl_gauche:not(.rep-oeuvre-item img) {
    float: none !important;
    display: block !important;
    width: 70% !important;
    max-width: 70% !important;
    height: auto !important;
    margin: 6px auto 10px auto !important;
    border-radius: 4px;
  }
  .modal-texte img.portrait:hover {
    width: 80% !important;
  }

  /* Exception : petits portraits dans .modal-texte .portrait (répertoires/littérature)
     — conservés tels quels par la règle plus spécifique ci-dessus */
  .paysage {
    width: 90% !important;
    margin: 4px auto !important;
    display: block;
  }
  .portrait {
    width: 45% !important;
  }


  /* ─────────────────────────────────────────────────────────
     8. FOOTER
     ─────────────────────────────────────────────────────────
     PC : footer fixe en bas, 7vh
     Mobile : footer fixe en bas, légèrement plus haut
             pour faciliter la lecture
  */

  footer {
    height: auto !important;
    min-height: 6vh;
    padding: 4px 0;
    margin-top: 20px !important;
  }

  footer div {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    text-align: center;
    padding: 2px 8px;
  }

  footer p {
    font-size: 10px !important;
    bottom: auto !important;
    padding: 0 4px;
  }

  /* Masquer les drapeaux sur mobile */
  footer .img_drapeau_petit {
    display: none !important;
  }

  /* Copyright seul sur sa ligne, tous les liens réunis sur la suivante */
  footer .couleur_gris_souris {
    display: block !important;
    text-align: center;
    font-size: 11px !important;
    line-height: 2;
  }

  /* Le label prend toute la ligne — le | et les liens tombent sur la ligne suivante */
  footer .couleur_gris_souris label.footer_copyright {
    display: block !important;
    width: 100%;
    text-align: center;
  }

  /* Les liens et les | restent inline sur leur ligne */
  footer .couleur_gris_souris a {
    display: inline !important;
    font-size: 11px !important;
    white-space: nowrap;
  }


  /* ─────────────────────────────────────────────────────────
     9. UTILITAIRES TYPOGRAPHIQUES
     ─────────────────────────────────────────────────────────
     Certaines classes de largeur fixe cassent le layout mobile.
     On les réajuste ici sans les supprimer.
  */

  /* Largeurs fixes : passer en pleine largeur sous 768px */
  .l20, .l24, .l28, .l30, .l32, .l34 {
    width: 100% !important;
    float: none !important;
  }

  /* Largeurs moyennes : autoriser le retour à la ligne */
  .l40, .l42, .l47, .l49, .l50 {
    width: 100% !important;
    float: none !important;
  }

  /* Marges négatives désactivées sur mobile (causent des débordements) */
  .marge_ext_droite_n5p { margin-left: 0 !important; }
  .marge_ext_gauche_n2p { margin-left: 0 !important; }
  .marge_ext_sup_n3p    { margin-top: 0 !important; }
  .marge_ext_sup_n2p    { margin-top: 0 !important; }
  .marge_ext_sup_n1p    { margin-top: 0 !important; }
  .marge_ext_inf_n3p    { margin-bottom: 0 !important; }
  .marge_ext_inf_n2p    { margin-bottom: 0 !important; }
  .marge_ext_inf_n1p    { margin-bottom: 0 !important; }

  /* Floats annulés : sur mobile on empile */
  .fl_droite,
  .fl_gauche {
    float: none !important;
    width: 100% !important;
  }

  /* Texte marquee : pleine largeur */
  .marqueeWidth {
    width: 95% !important;
  }

  /* Polices : taille de base confortable */
  .police_petit   { font-size: 13px !important; }
  .police_normal  { font-size: 16px !important; }
  .police_l       { font-size: 18px !important; }
  .police_xxl     { font-size: 22px !important; }


  /* ─────────────────────────────────────────────────────────
     10. BARRE DE CHARGEMENT
     ─────────────────────────────────────────────────────────
     PC : barre fixe 750px, texte en 2vw
     Mobile : barre adaptée à l'écran
  */

  #bar {
    width: 85vw !important;
    height: 4vh !important;
    min-height: 20px;
  }

  .loading-container {
    font-size: 4vw !important;
  }


  /* ─────────────────────────────────────────────────────────
     11. IMAGES & AVATARS
     ─────────────────────────────────────────────────────────
  */

  /* Titre de page (image) — s'adapte à la largeur de la section */
  .titre_img {
    width: 90% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }

  .img_logo_grand {
    width: 60vw !important;
    max-width: 260px;
  }

  .img_icon {
    width: 10% !important;
    min-width: 28px;
  }

  .modGrand:hover {
    width: 100% !important;
  }


  /* ─────────────────────────────────────────────────────────
     12. RECHERCHE & CATÉGORIES
     ─────────────────────────────────────────────────────────
  */

  #Categories,
  #Rechercher {
    position: relative !important;
    width: 100% !important;
    display: block;
    margin: 4px 0;
  }

  #Categories select {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    font-size: 15px !important;
  }

  #Rechercher div {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #Rechercher input[type="text"],
  #Rechercher input[type="search"] {
    flex: 1;
    font-size: 16px !important;
    padding: 6px 10px;
    min-height: 40px;
  }


  /* ─────────────────────────────────────────────────────────
     FIN DU FICHIER
     ─────────────────────────────────────────────────────────
     À compléter au fil de l'implémentation selon les pages
     spécifiques (index, biographies, synthèses, etc.)
  */

} /* fin @media screen and (max-width: 768px) */