/* Mise en page adaptative (refonte du 2026-11-02).
   Le site est construit en tableaux de 952 a 970 px. Ce fichier ne contient que des regles @media :
   au-dessus de 990 px (ordinateur, portable, tablette en paysage) rien ne change : le site a ete concu pour
   une largeur minimale de 991 px (css/style.css : body { min-width: 991px }).
     - jusqu'a 990 px (tablette en portrait et telephone) : une seule colonne, le contenu avant les menus,
       diaporama d'actualites en liste (voir home.php : il ne s'anime qu'au-dessus de 990 px).
     - 761 a 990 px : quelques ajustements de confort (categories sur deux colonnes). */

/* ---------- Tablette et en dessous : plus de largeur minimale forcee ---------- */
@media only screen and (max-width: 990px) {
  html, body { min-width: 0 !important; }
}

/* ---------- Telephone et tablette : une seule colonne ---------- */
@media only screen and (max-width: 990px) {
  /* clip et non hidden : hidden ferait du corps un conteneur de defilement et la barre de menu ne resterait pas en haut */
  html, body { width: 100%; margin: 0 !important; padding: 0 !important; overflow-x: hidden; overflow-x: clip; }
  body { -webkit-text-size-adjust: 100%; word-wrap: break-word; overflow-wrap: anywhere; }
  img { max-width: 100%; height: auto; }
  iframe, object, embed, video { max-width: 100%; }
  input, select, textarea { max-width: 100%; box-sizing: border-box; }

  /* decoration fixe (101 x 111 px, bas gauche) qui recouvre le contenu */
  #new_bat { display: none !important; }
  /* tableau vide sous le logo */
  body > table { display: none; }

  /* ----- en-tete et navigation ----- */
  #top { padding-top: 0; }
  div#nav { display: flex; flex-wrap: wrap; justify-content: center; padding: 4px; }
  div#nav a { padding: 9px 10px !important; line-height: 1.3; }

  /* ----- page : le contenu d'abord, les menus ensuite ----- */
  #page-wrap { display: flex; flex-direction: column; clear: both; }
  /* tout ce qui suit le corps dans le conteneur (partage, pied de page) reste en bas */
  #page-wrap > * { order: 3; }
  #left { display: contents; }
  #left > * { order: 2; }
  #left > .boutons-left { order: 0; }
  #left > br, #page-wrap > br { display: none; }
  .boutons-left { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 4px !important; }
  .boutons-left a { display: block; }
  .boutons-left img { float: none !important; padding: 0 !important; margin: 0 !important; max-width: 100%; height: auto; }
  #left > #frpPanel { margin: 8px 6px !important; width: auto !important; }
  #left > h1 { padding: 4px 8px; }

  /* barre de partage du pied de page : dix services (Digg, Technorati, MySpace...) dont la plupart n'existent plus,
     dessinee sur une image de fond de largeur fixe : masquee sur telephone */
  div.etudes-au-maroc-bookmarks { display: none !important; }
  div[style*="width:50%"][style*="float:left"] { float: none !important; width: 100% !important; }

  /* pied de page : hauteur fixe de 319 px et colonnes flottantes -> blocs empiles qui prennent leur hauteur */
  div#footer_etudes { height: auto !important; box-sizing: border-box; padding: 8px 8px 14px; overflow: visible; }
  #footer_etudes #lien_bas { float: none !important; width: auto !important; clear: both; }
  #footer_etudes #lien_bas > div { float: none !important; width: auto !important; margin: 8px 0 !important; }
  #footer_etudes > div[style*="float:right"] { float: none !important; width: auto !important; margin: 6px 0 !important; display: flex; justify-content: center; gap: 12px; }
  div#copy_r { float: none !important; width: auto !important; height: auto !important; margin: 8px 0 !important; background: none !important; }
  div#text_copy_r { margin-top: 0 !important; padding-top: 8px; }
  div#bas { float: none !important; width: 100% !important; }

  div#body { order: 1; display: block !important; width: 100% !important; box-sizing: border-box; padding: 0 6px 12px !important; }

  /* ----- accueil : la grille 2 colonnes devient une pile ----- */
  #body table.table, #body table.table > tbody, #body table.table > tbody > tr, #body table.table > tbody > tr > td {
    display: block !important; width: 100% !important; height: auto !important; box-sizing: border-box;
  }
  #body #frpPanel, #body #cadre, #body #righttopcontenu, #body #recherche { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  #body #frpPanel { margin-top: 8px !important; margin-bottom: 8px !important; }
  #cadre img, #cadre a { display: block; width: 100%; height: auto; }

  /* ----- diaporama d'actualites : liste compacte (miniature + titre + extrait) ----- */
  #righttopcontenu { overflow: visible; }
  #slider { width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; list-style: none; }
  #slider li { position: relative; display: grid !important; grid-template-columns: 112px 1fr; gap: 10px; align-items: start;
    width: auto !important; height: auto !important; margin: 0 0 8px !important; padding: 8px !important; box-sizing: border-box;
    border: 1px solid #C0D0E3; border-radius: 4px; background: #fff; }
  #slider li > a { grid-column: 1; grid-row: 1; display: block; }
  #slider li > a img { display: block; width: 112px !important; height: 84px !important; max-width: none !important; max-height: none !important; object-fit: cover; border-radius: 3px; }
  #slider li > a img[src$="logo.gif"] { object-fit: contain; background: #F3F6FA; }
  #slider li .titre_slaider { grid-column: 2; grid-row: 1; position: static !important; width: auto !important; height: auto !important; background: transparent !important; padding: 0 !important; min-width: 0; }
  #slider li .titre_art { padding: 0 !important; background: transparent !important; color: #0b3d91 !important; font-size: 15px !important; line-height: 1.25; }
  #slider li h2 { font-size: 15px !important; font-weight: bold; line-height: 1.25; padding: 0 !important; margin: 0 0 3px !important; color: #0b3d91 !important; }
  #slider li .disc_art { padding: 0 !important; color: #444 !important; font-size: 13px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #slider li .titre_slaider a, #slider li .titre_slaider a span { color: #0870D1 !important; float: none !important; display: inline-block; padding: 3px 0; font-size: 13px !important; }

  /* ----- categories : une colonne ----- */
  div#all-cat { float: none !important; width: 100% !important; padding: 8px 0 0 !important; box-sizing: border-box; }
  .categorie { float: none !important; width: 100% !important; }
  .categorie div { padding: 3px 0; line-height: 1.45; }
  .categorie div a { display: inline; }

  /* ----- pages interieures : les tableaux a largeur fixe passent en blocs ----- */
  #body table, #body tbody, #body thead, #body tfoot, #body tr, #body td, #body th {
    display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; box-sizing: border-box;
  }
  #body [style*="width:"], #body [width] { max-width: 100% !important; }
  #body div, #body p, #body form, #body ul, #body ol, #body center { max-width: 100% !important; box-sizing: border-box; }
}

/* ---------- Telephone et tablette : formulaires et barres de navigation de page ---------- */
@media only screen and (max-width: 990px) {
  /* barre precedent / suivant des articles : largeur 100 % plus 13 px de marge de chaque cote */
  .imgnav { width: auto !important; margin: 13px 0 !important; }
  /* formulaire d'alerte concours (concours/concours.css) : libelles de 120 px et champs de 251 px flottants cote a cote,
     marge gauche de 20 px, titres de 450 et 460 px */
  .form_eam { float: none !important; width: 100% !important; margin: 0 !important; box-sizing: border-box; }
  .form_eam label { float: none !important; display: block; width: auto !important; margin: 8px 0 2px; }
  .form_eam .normal, .form_eam .erreur, .form_eam .nrm, .form_eam select, .form_eam input[type=file],
  .form_eam input[type=text], .form_eam input[type=password], .form_eam textarea {
    float: none !important; display: block; width: 100% !important; box-sizing: border-box;
  }
  .form_eam font { float: none !important; display: block; }
  .form_eam input[type=submit], .form_eam input[type=button], .form_eam input[type=reset] { float: none !important; margin: 8px 8px 0 0; }
  .div_titre_alert, .span_form, .content_input { float: none !important; width: auto !important; max-width: 100% !important; box-sizing: border-box; }
  .cadre_bleu_cat_etude, .main, .slideOutTip, .tipVisible { width: 100% !important; box-sizing: border-box; }
  /* titres des niveaux de diplome : une seule ligne (la hauteur des lignes est pilotee par concours/js/script.js),
     tronquee avec des points de suspension plutot que coupee net */
  .tipTitle { width: auto !important; max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; }
}

@media only screen and (min-width: 761px) and (max-width: 990px) {
  .categorie { float: left !important; width: 49% !important; }
  div#all-cat::after { content: ""; display: block; clear: both; }
  #slider li { grid-template-columns: 160px 1fr; }
  #slider li > a img { width: 160px !important; height: 110px !important; }
  #slider li .disc_art { -webkit-line-clamp: 4; }
}