@charset "iso-8859-1";
/**
 * EspaceKid - CSS Responsive / Mobile
 * Breakpoints : 1024px (tablette large), 768px (tablette), 480px (mobile), 360px (petit mobile)
 *
 * Ce fichier override TOUS les inline styles et classes fixes du site desktop.
 * Chaque section est documentee avec les templates concernes.
 */

/* === DEFAULTS DESKTOP === */
.logo-mobile { display: none; }
#mobile-menu-toggle { display: none; }

/* ============================================
   TABLETTE LARGE (max-width: 1024px)
   ============================================ */
@media screen and (max-width: 1024px) {
  body {
    margin: 0;
    padding: 0;
  }
  #global {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
    background-image: none;
    overflow-x: hidden;
  }
  #header {
    width: 100% !important;
    background-size: cover;
  }
  #bloc_droite {
    width: 100% !important;
  }
  #content {
    width: 100% !important;
  }
  #contenu {
    width: calc(100% - 190px) !important;
  }
  #footer {
    width: 100% !important;
  }
}

/* ============================================
   TABLETTE (max-width: 768px)
   ============================================ */
@media screen and (max-width: 768px) {

  /* ===========================================
     1. RESET GENERAL
     =========================================== */
  * {
    box-sizing: border-box;
  }
  html {
    overflow-x: hidden;
  }
  body {
    margin: 0;
    padding: 0;
    background: #a5d5ec;
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  #global {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0;
    padding: 0;
    background-image: none;
    overflow-x: hidden;
  }

  /* ===========================================
     2. HEADER
     Row layout : logo a gauche, nav centree sur le reste
     =========================================== */
  #header {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    background-image: none !important;
    background: linear-gradient(180deg, #a5d5ec 0%, #c5e5f2 100%);
    padding: 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: hidden;
  }

  /* Logo serre a gauche */
  #logo {
    float: none !important;
    display: flex !important;
    align-items: center;
    text-align: left;
    padding: 10px 0 10px 12px;
    background: none;
    flex-shrink: 0;
    order: -1;
  }
  #logo a { display: inline-block; }
  .logo-desktop { display: none !important; }
  .logo-mobile {
    display: inline-block !important;
    width: 70px;
    height: auto;
    vertical-align: middle;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
  }

  /* #bloc_droite : enfants participent au flex du header */
  #bloc_droite {
    display: contents !important;
    width: auto !important;
    height: auto !important;
    float: none !important;
  }

  /* Masquer Facebook, login, menutop */
  #menutop_cont { display: none !important; height: 0; margin: 0; padding: 0; overflow: hidden; }
  #menutop { display: none; }
  #formLogin { display: none; }

  /* ===========================================
     3. NAVIGATION ONGLETS
     Liens texte centres dans l'espace restant, meme fond que logo
     =========================================== */
  #header_onglet {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    white-space: normal;
    background: none;
    border-bottom: none;
    min-width: 0;
    flex: 1 1 0%;
    order: 0;
    box-sizing: border-box;
  }
  #header_onglet ul {
    display: flex !important;
    flex-wrap: wrap !important;
    float: none !important;
    margin: 0 !important;
    padding: 4px 2px;
    list-style: none !important;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    width: 100% !important;
  }
  #header_onglet ul li {
    display: block !important;
    float: none !important;
    flex-shrink: 1;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100%;
  }
  #header_onglet a {
    display: block;
    background: none !important;
    padding: 3px 7px;
    font-size: 11px;
    color: #d14d64 !important;
    white-space: normal;
    float: none;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.2px;
    border: none;
    border-radius: 0;
    position: relative;
    text-align: center;
  }
  #header_onglet a span {
    display: inline;
    background: none !important;
    padding: 0;
    color: inherit !important;
    font-size: inherit;
  }
  /* Separateur point entre les liens */
  #header_onglet ul li + li a::before {
    content: "\00b7";
    position: absolute;
    left: -2px;
    color: rgba(0,0,0,0.25);
    font-weight: normal;
  }
  #header_onglet .actif a {
    color: #43b148 !important;
    background: none !important;
  }
  #header_onglet ul li:hover a {
    color: #b03050 !important;
    background: none !important;
  }

  /* ===========================================
     4. BARRE RECHERCHE / ARBORESCENCE
     =========================================== */
  #search_marq_arbo {
    order: 2;
    flex-basis: 100%;
    width: 100% !important;
    height: auto !important;
    background-image: none !important;
    background-color: #f8f8f8;
    padding: 0;
    border-top: 1px solid #dde4ea;
    border-bottom: 1px solid #dde4ea;
  }
  #search_marq {
    display: none !important;
  }
  #arborescence {
    width: 100% !important;
    height: auto !important;
    padding: 10px 14px;
    font-size: 13px;
    color: #444;
    background: #e8eef4 !important;
    line-height: 1.5;
    box-sizing: border-box;
  }
  #arborescence b { color: #222; font-weight: 700; }
  #arborescence a { color: #2e7da8 !important; text-decoration: underline; }

  /* ===========================================
     5. CONTENT WRAPPER
     =========================================== */
  #content {
    width: 100% !important;
    max-width: 100vw !important;
    background-image: none !important;
    background-color: #f0f4f8;
    padding: 0 !important;
    margin: 0;
    overflow-x: hidden;
  }

  /* ===========================================
     6. BOUTON CATEGORIES (pleine largeur)
     Barre rose avec icone et fleche
     =========================================== */
  #mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d14d64;
    color: #fff;
    border: none;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    letter-spacing: 0.5px;
    gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  #mobile-menu-toggle:active {
    background-color: #b03050;
  }
  #mobile-menu-toggle .toggle-icon {
    font-size: 16px;
  }
  #mobile-menu-toggle .toggle-arrow {
    font-size: 10px;
    transition: transform 0.3s;
  }
  #mobile-menu-toggle.menu-open {
    background-color: #b03050;
  }
  #mobile-menu-toggle.menu-open .toggle-arrow {
    transform: rotate(180deg);
  }

  /* ===========================================
     7. MENU GAUCHE (sidebar categories)
     Slide-down depuis le header, fond blanc
     =========================================== */
  #menu_gauche {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    background-color: #fff;
    box-sizing: border-box;
    border-bottom: 3px solid #d14d64;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
  }
  #menu_gauche.mobile-open {
    max-height: 2000px;
    transition: max-height 0.5s ease-in;
    border-bottom: 3px solid #43b148;
  }
  #menu_gauche img[alt="Ourson EspaceKid"] { display: none; }

  /* Categories du menu */
  .cat { border-bottom: 1px solid #eee; }
  .cat .menu_tit {
    padding: 10px 15px;
    background-color: #f8f9fa;
    font-size: 13px;
  }
  .cat ul { padding: 0 0 5px 0; }
  .cat ul li a,
  .cat ul li a:visited {
    display: block;
    padding: 8px 15px 8px 25px;
    font-size: 13px;
    line-height: 1.4;
    text-indent: 0;
    background-image: none !important;
    white-space: normal;
  }
  .cat ul li a:hover { background-color: #f0f8f0 !important; }
  .cat ul li.souscat { width: auto; }
  br.separe { display: none; }

  /* ===========================================
     8. CONTENU PRINCIPAL
     =========================================== */
  #contenu {
    width: 100% !important;
    float: none;
    padding: 12px !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ===========================================
     9. MENU DROIT (sidebar droite)
     =========================================== */
  #menu_droit {
    float: none !important;
    width: 100% !important;
    padding: 12px !important;
    background: none !important;
    background-color: #f8f9fa;
    box-sizing: border-box;
    border-top: 2px solid #e0e0e0;
  }
  #menu_droit .menu,
  #menu_droit .compte,
  #menu_droit .best,
  #menu_droit .avis { width: 100%; }
  #menu_droit .menu_titcompte { width: 100%; }

  /* ===========================================
     10. TYPOGRAPHIE ET OVERFLOW
     =========================================== */
  .contcenter {
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  h1 {
    font-size: 16px;
    padding: 8px 10px;
    line-height: 1.3;
  }
  h2 {
    font-size: 15px;
    padding: 10px 0 5px 0;
    line-height: 1.3;
  }
  h3 { font-size: 14px; }
  h4 { font-size: 13px; }

  /* ===========================================
     11. SYSTEME D'ARRONDIS CSS -> border-radius
     Templates: TOUS (header.tpl, index.tpl, coloriage/*.tpl, activite-manuelle/*.tpl, etc.)
     =========================================== */
  .ar1, .ar1_bis, .ar2, .ar3, .ar4,
  .large .ar1, .large .ar1_bis, .large .ar2, .large .ar3, .large .ar4 {
    display: none !important;
  }

  /* Blocs colores : border-radius natif */
  .coul_bleu.large,
  .coul_vert.large,
  .coul_rouge.large,
  .coul_orange.large,
  .coul_violet.large,
  .coul_gris.large,
  .coul_bleu_uni.large,
  .coul_rouge_uni.large,
  .coul_violet_clair.large {
    margin: 0 0 12px 0;
    border-radius: 10px;
    overflow: hidden;
  }
  .coul_vert.large { background-color: #eaf2e0; border: 2px solid #BAD898; }
  .coul_bleu.large { background-color: #e5f1f2; border: 2px solid #97d0d3; }
  .coul_bleu_uni.large { background-color: #e5f1f2; border: 2px solid #e5f1f2; }
  .coul_rouge_uni.large { background-color: #bc344a; border: 2px solid #9f2136; }
  .coul_gris.large { background-color: #e9ebeb; border: 2px solid #808080; }
  .coul_violet.large { background-color: #f1e3e8; border: 2px solid #e1b8c4; }
  .coul_violet_clair.large { background-color: #dfe1fb; border: 2px solid #4e54a2; }
  .coul_orange.large { background-color: #fff1bb; border: 2px solid #ffcf77; }

  .contentArr {
    padding: 12px !important;
    border: none !important;
  }
  .contentArr img {
    max-width: 100%;
    height: auto;
  }
  .cadre_general { margin: 0 0 10px 0; }
  .cadre_contenu { margin: 5px; }

  /* ===========================================
     12. GRILLE .dessin (coloriages)
     CSS desktop: .dessin { width:159px; height:159px; float:left; }
     Templates: coloriage/index.tpl, coloriage/sous_categorie.tpl, coloriage/categorie.tpl, coloriage/detail.tpl
     =========================================== */
  #coloriage {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    gap: 6px;
  }
  .dessin {
    width: calc(33.33% - 4px) !important;
    height: auto !important;
    min-height: auto;
    margin: 0 !important;
    box-sizing: border-box;
    float: none !important;
    border-radius: 6px;
    font-size: 11px;
    overflow: hidden;
  }
  .dessin img {
    max-width: 100%;
    height: auto;
  }
  .dessin a {
    font-size: 11px;
    display: block;
    padding: 4px;
    word-wrap: break-word;
    white-space: normal;
  }

  /* ===========================================
     13. GRILLE .dessin_menu (activites, jeux, cadeaux)
     Templates: activite-manuelle/index.tpl (170x170), activite-manuelle/par.tpl,
                cadeau/index.tpl (226x240), jeu/index.tpl (350x90)
     =========================================== */
  .dessin_menu {
    width: calc(50% - 4px) !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
    float: left !important;
    border-radius: 6px;
    overflow: hidden;
  }
  .dessin_menu img {
    max-width: 100%;
    height: auto;
  }
  /* Titre dans les blocs dessin_menu (height:50px inline) */
  .dessin_menu div[style*="height:50px"] {
    height: auto !important;
    min-height: 40px;
    padding: 4px;
    font-size: 12px;
  }

  /* ===========================================
     14. OVERRIDE TOUS LES INLINE STYLES DE LARGEUR FIXE
     =========================================== */

  /* --- 14a. Colonnes principales Homepage ---
     index.tpl: float:left;width:400px / float:right;width:320px
     Cible uniquement les gros blocs de layout (>250px), pas les grilles de miniatures */
  .contcenter > div[style*="width:400px"][style*="float"],
  .contcenter > div[style*="width:320px"][style*="float"],
  .contcenter > div[style*="width:363px"][style*="float"],
  .contcenter > div[style*="width: 400px"][style*="float"],
  .contcenter > div[style*="width: 320px"][style*="float"],
  .contcenter > div[style*="width: 363px"][style*="float"] {
    float: none !important;
    width: 100% !important;
    clear: both !important;
  }

  /* --- 14b. Blocs 400px (intro + sidebar) ---
     coloriage/index.tpl:17, activite-manuelle/index.tpl:16, jeu/index.tpl:14,
     activite-manuelle/par.tpl:24, activite-manuelle/detail.tpl:15,
     coloriage/detail.tpl:67, chanson/detail.tpl:41 */
  div[style*="width:400px"],
  div[style*="width: 400px"] {
    width: 100% !important;
    float: none !important;
  }

  /* --- 14c. Blocs 420px (contenu detail + images) ---
     activite-manuelle/detail.tpl:77, jeu/detail.tpl:15,49,
     cadeau/index.tpl:11, chanson/detail.tpl:41 */
  div[style*="width:420px"],
  div[style*="width: 420px"] {
    width: 100% !important;
    float: none !important;
    height: auto !important;
  }
  /* Image dans bloc 420px */
  div[style*="width:420px"] img,
  div[style*="width: 420px"] img {
    max-width: 100%;
    height: auto;
    width: auto !important;
  }

  /* --- 14d. Blocs 363px (colonnes alternees activites) ---
     activite-manuelle/index.tpl:36,58,61, activite-manuelle/par.tpl:74,96,99 */
  div[style*="width:363px"],
  div[style*="width: 363px"] {
    width: 100% !important;
    float: none !important;
  }

  /* --- 14e. Blocs 350px (jeux listing) ---
     jeu/index.tpl:34 */
  div[style*="width:350px"],
  div[style*="width: 350px"] {
    width: 100% !important;
    float: none !important;
    height: auto !important;
  }

  /* --- 14f. Blocs 340px (description coloriage sous-cat) ---
     coloriage/sous_categorie.tpl:24 */
  div[style*="width:340px"],
  div[style*="width: 340px"] {
    width: 100% !important;
    float: none !important;
  }

  /* --- 14g. Blocs 320px (colonne droite homepage) ---
     index.tpl:104,137 */
  div[style*="width:320px"],
  div[style*="width: 320px"] {
    width: 100% !important;
    float: none !important;
  }

  /* --- 14h. Blocs 300px (sidebars detail) ---
     activite-manuelle/detail.tpl:132,156,167,191, jeu/detail.tpl:77 */
  div[style*="width:300px"],
  div[style*="width: 300px"] {
    width: 100% !important;
  }
  .cat[style*="width:300px"],
  .cat[style*="width: 300px"] {
    width: 100% !important;
  }

  /* --- 14i. Blocs 296px (pages speciales noel) ---
     index_noel.tpl */
  div[style*="width:296px"],
  div[style*="width: 296px"] {
    width: 100% !important;
    float: none !important;
  }

  /* --- 14j. Blocs 250px (pub jeu) ---
     jeu/detail.tpl:11 */
  div[style*="width:250px"],
  div[style*="width: 250px"] {
    width: 100% !important;
    float: none !important;
  }

  /* --- 14k. Blocs 233px (caracteristiques activite detail) ---
     activite-manuelle/detail.tpl:30,40,50 */
  div[style*="width:233px"],
  div[style*="width: 233px"] {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-bottom: 10px;
  }

  /* --- 14l. Blocs 226px (grille cadeaux 3-col) ---
     cadeau/index.tpl:28 */
  div[style*="width:226px"],
  div[style*="width: 226px"] {
    width: calc(50% - 8px) !important;
    height: auto !important;
    margin: 4px !important;
  }

  /* --- 14m. Blocs 220px (coloriages suivants) ---
     coloriage/detail.tpl:98 */
  div[style*="width:220px"],
  div[style*="width: 220px"] {
    width: calc(33.33% - 8px) !important;
    height: auto !important;
    float: left !important;
    margin: 4px !important;
  }
  div[style*="width:220px"] img {
    max-width: 100%;
    height: auto;
  }

  /* --- 14n. Blocs 200px (formulaire contact, divers) --- */
  div[style*="width:200px"],
  div[style*="width: 200px"] {
    width: 100% !important;
  }

  /* --- 14o. Blocs 170px (grille activites miniatures) ---
     activite-manuelle/index.tpl:104, activite-manuelle/par.tpl:142 */
  div[style*="width:170px"],
  div[style*="width: 170px"] {
    width: calc(50% - 10px) !important;
    height: auto !important;
    min-height: auto;
    box-sizing: border-box;
    margin: 4px !important;
  }

  /* --- 14p. Blocs 140px (photos realisations activite) ---
     activite-manuelle/detail.tpl:194 */
  div[style*="width:140px"],
  div[style*="width: 140px"] {
    width: calc(50% - 10px) !important;
    height: auto !important;
    margin: 4px !important;
  }

  /* --- 14q. Blocs 120px (grille miniatures homepage) ---
     index.tpl:117,147 */
  div[style*="width:120px"][style*="height:120px"] {
    width: calc(33.33% - 28px) !important;
    height: auto !important;
    min-height: 80px;
    border-radius: 4px;
  }
  div[style*="width:120px"] img {
    max-width: 100%;
    height: auto;
  }

  /* ===========================================
     15. OVERRIDE HAUTEURS FIXES
     =========================================== */
  /* height:200px (activite-manuelle/index.tpl:41, par.tpl:79) */
  .contentArr div[style*="height:200px"],
  .contentArr[style*="height:200px"] {
    height: auto !important;
  }
  /* height:240px (cadeau/index.tpl:28) */
  div[style*="height:240px"] {
    height: auto !important;
  }
  /* height:220px (jeu/detail.tpl:15) */
  div[style*="height:220px"] {
    height: auto !important;
  }
  /* height:180px (activite-manuelle/detail.tpl:194 photos) */
  div[style*="height:180px"] {
    height: auto !important;
  }
  /* height:170px (activite-manuelle/index.tpl:104 dessin_menu) */
  div[style*="height:170px"] {
    height: auto !important;
  }
  /* height:165px (coloriage/detail.tpl:98 coloriages suivants) */
  div[style*="height:165px"] {
    height: auto !important;
  }
  /* height:120px */
  div[style*="height:120px"] {
    height: auto !important;
  }
  /* height:90px (jeu/index.tpl:34 listing jeux) */
  div[style*="height:90px"] {
    height: auto !important;
  }
  /* height:80px */
  div[style*="height:80px"] {
    height: auto !important;
  }
  /* height:50px (titre blocs dessin_menu) */
  div[style*="height:50px"] {
    height: auto !important;
    min-height: 35px;
  }
  /* height:30px (footer) */
  div[style*="height:30px"] {
    height: auto !important;
  }

  /* ===========================================
     16. OVERRIDE BLOCS PUBLICITAIRES
     Les pubs Google Ads ne se chargent plus mais les divs restent
     =========================================== */
  /* Blocs 728x90 (leaderboard) - masquer */
  div[style*="width:728px"][style*="height:90px"],
  div[style*="width: 728px"] {
    display: none !important;
  }
  /* Blocs 336x280 (carre pub) - masquer */
  div[style*="width:336px"][style*="height:280px"] {
    display: none !important;
  }
  /* Container 682px / 702px / 700px (wrappers pubs) */
  div[style*="width:682px"],
  div[style*="width:702px"] {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Pagination container 700px */
  .coul_bleu.large[style*="width:700px"] {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }
  /* Blocs 468x15 (micro pub) */
  div[style*="width:468px"] {
    width: 100% !important;
  }
  /* Bloc 300x250 (pub jeu detail) */
  div[style*="width:300px"][style*="height:250px"] {
    display: none !important;
  }

  /* ===========================================
     17. OVERRIDE FLOATS GENERIQUES
     Tous les blocs flottants dans le contenu
     =========================================== */
  /* Blocs flottants dans contentArr SAUF les petites grilles (120px, 170px, 140px) */
  .contentArr > div[style*="float:left"]:not([style*="width:120px"]):not([style*="width:170px"]):not([style*="width:140px"]):not(.dessin):not(.dessin_menu),
  .contentArr > div[style*="float:right"]:not([style*="width:120px"]):not([style*="width:170px"]):not([style*="width:140px"]):not(.dessin):not(.dessin_menu),
  .contentArr > div[style*="float: left"]:not([style*="width:120px"]):not([style*="width:170px"]):not([style*="width:140px"]):not(.dessin):not(.dessin_menu),
  .contentArr > div[style*="float: right"]:not([style*="width:120px"]):not([style*="width:170px"]):not([style*="width:140px"]):not(.dessin):not(.dessin_menu) {
    float: none !important;
    width: 100% !important;
  }

  /* Blocs float:right dans detail pages
     (activite-manuelle/detail.tpl:131, jeu/detail.tpl:76, blog/detail.tpl:6) */
  #contenu > .contcenter > div[style*="float:right"],
  #contenu > .contcenter > div[style*="float: right"] {
    float: none !important;
    width: 100% !important;
  }
  /* Float left generique dans contenu */
  #contenu > .contcenter > div[style*="float:left"],
  #contenu > .contcenter > div[style*="float: left"] {
    float: none !important;
    width: 100% !important;
  }

  /* ===========================================
     18. IMAGES RESPONSIVE
     =========================================== */
  .contcenter img,
  #contenu img,
  .contentArr img {
    max-width: 100%;
    height: auto;
  }
  /* Image avec width inline (activite-manuelle/detail.tpl:16 img style="width:400px") */
  img[style*="width:400px"],
  img[style*="width: 400px"],
  img[style*="width:420px"],
  img[style*="width: 420px"] {
    width: 100% !important;
    height: auto !important;
  }

  /* Images flottantes dans les articles : centrees */
  .contentArr img[style*="float:left"],
  .contentArr img[style*="float: left"],
  .contcenter img[style*="float:left"],
  .contcenter img[style*="float: left"],
  #contenu img[style*="float:left"],
  #contenu img[style*="float: left"] {
    float: none !important;
    display: block;
    margin: 8px auto !important;
    max-width: 100%;
    height: auto;
  }
  .contentArr img[style*="float:right"],
  .contentArr img[style*="float: right"],
  .contcenter img[style*="float:right"],
  .contcenter img[style*="float: right"],
  #contenu img[style*="float:right"],
  #contenu img[style*="float: right"] {
    float: none !important;
    display: block;
    margin: 8px auto !important;
    max-width: 100%;
    height: auto;
  }
  /* Images avec bordure dans les articles d'activite */
  .contentArr img[style*="border:2px solid"] {
    float: none !important;
    display: block;
    margin: 8px auto !important;
    max-width: 200px;
  }
  /* Span wrapping image floats (homepage) */
  span[style*="color:#749F59"],
  div[style*="padding:7px 0px 0px 0px"] {
    overflow: hidden;
  }

  /* Images dans le cadre photo (coloriage/detail) */
  .cadre_photo {
    float: none;
    text-align: center;
    margin: 0 0 10px 0;
  }
  .cadre_photo img {
    max-width: 100%;
    height: auto;
  }
  .cadre_photo_galerie {
    width: calc(50% - 8px) !important;
    margin: 4px !important;
    box-sizing: border-box;
  }

  /* ===========================================
     19. DETAIL COLORIAGE (coloriage/detail.tpl)
     =========================================== */
  /* Bouton imprimer (width:400px inline) */
  div[style*="border:2px dashed #3E9ED0"] {
    width: 100% !important;
    margin: 10px 0 !important;
  }
  /* Zone impression */
  #zoneImprimer img {
    max-width: 100%;
    height: auto;
  }
  #coloriage .description {
    margin: 5px 0;
    padding: 8px;
  }
  #coloriage .pub {
    display: none;
  }

  /* ===========================================
     20. DETAIL ACTIVITE MANUELLE (activite-manuelle/detail.tpl)
     =========================================== */
  /* Listes expandables (activite_liste_petit/grand) */
  .activite_liste_petit,
  .activite_liste_grand {
    width: 100% !important;
  }
  /* Etapes : images */
  div[style*="position:relative"] img[style*="float:left"] {
    float: none !important;
    display: block;
    margin: 5px 0 !important;
  }
  /* Separateur etapes */
  div[style*="background-color:#CCCCCC"][style*="height:2px"] {
    margin: 8px 0;
  }

  /* ===========================================
     21. DETAIL CHANSON (chanson/detail.tpl)
     =========================================== */
  .chanson_midi {
    width: 100% !important;
  }
  .chanson_midi embed {
    width: 100% !important;
    max-width: 300px;
  }
  /* Fond image chanson (position:absolute, height dynamique) */
  div[style*="opacity:0.2"][style*="position:absolute"] {
    display: none !important;
  }

  /* ===========================================
     22. DETAIL JEU (jeu/detail.tpl)
     =========================================== */
  /* Bloc but du jeu (border dashed) */
  div[style*="border:1px dashed #CE4860"] {
    padding: 10px !important;
  }
  div[style*="border:1px dashed #CE4860"] img[style*="float:left"] {
    float: left !important;
    margin-right: 10px;
  }

  /* ===========================================
     23. CADEAU (cadeau/index.tpl)
     =========================================== */
  div[style*="border:2px dashed #97D0D3"] {
    width: 100% !important;
    float: none !important;
  }

  /* ===========================================
     24. LISTES, FIELDS, FORMULAIRES
     =========================================== */
  .fields_left, .fields_right {
    float: none;
    width: 100%;
    margin: 0;
  }
  .formGlobal label {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin-bottom: 4px;
    font-weight: bold;
  }
  .formGlobal div.champ {
    float: none;
    width: 100%;
    margin: 0 0 10px 0;
  }
  .formGlobal input[type="text"],
  .formGlobal input[type="email"],
  .formGlobal input[type="password"],
  .formGlobal textarea,
  .formGlobal select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  /* ===========================================
     25. PAGINATION
     =========================================== */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
  .pagination a {
    float: none;
    margin: 2px;
    padding: 8px 12px;
    border-radius: 4px;
  }

  /* ===========================================
     26. FORUM
     =========================================== */
  .forum table {
    display: block;
    overflow-x: auto;
  }

  /* ===========================================
     27. BLOG
     =========================================== */
  .article p {
    width: 100%;
    margin-left: 0;
  }

  /* ===========================================
     28. COMMENTAIRES (activite-manuelle/detail.tpl)
     =========================================== */
  .bloc.droit,
  .bloc.sanstitre.droit {
    width: 100% !important;
  }
  div[style*="padding:15px;font-size:13px"] {
    padding: 10px !important;
  }

  /* ===========================================
     29. FOOTER
     =========================================== */
  div[style*="background-color:#399dce"] {
    padding-bottom: 0 !important;
    border-bottom-width: 5px !important;
  }
  #footer {
    width: 100%;
    height: auto !important;
    background: none !important;
    background-color: transparent !important;
    padding: 0;
    margin: 0 auto;
  }
  #footer img { display: none; }
  .box_info {
    text-align: center;
    padding: 15px 12px;
    font-size: 13px;
    line-height: 1.6;
  }
  .box_info a { font-size: 14px !important; }

  /* ===========================================
     30. IFRAMES, TABLES, MEDIAS
     =========================================== */
  iframe {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Iframe Facebook dans les activites (width:230px) */
  iframe[style*="width: 230px"],
  iframe[style*="width:230px"],
  iframe[style*="width:260px"],
  iframe[style*="width: 260px"] {
    display: none !important;
  }
  table {
    max-width: 100%;
  }
  /* Tables des menus gauche */
  #menu_gauche table {
    position: relative !important;
    width: 100%;
  }

  /* ===========================================
     31. DIVERS
     =========================================== */
  /* Marges negatives sur les pubs */
  div[style*="margin:10px 0 15px -5px"],
  div[style*="margin:17px 0 0 -5px"],
  div[style*="margin:10px 0 10px -3px"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  /* clear:right (index.tpl:134) */
  div[style*="clear:right"] {
    clear: both !important;
  }

  /* Compteur de resultats */
  .nbResult {
    text-align: center;
    padding: 5px;
  }
}

/* ============================================
   MOBILE (max-width: 480px)
   ============================================ */
@media screen and (max-width: 480px) {

  body { font-size: 13px; }

  /* Logo plus petit */
  .logo-mobile { width: 60px !important; }
  #logo { padding: 8px 0 8px 10px; }
  #header_onglet a { font-size: 11px; padding: 4px 8px; }

  #header_onglet a,
  #header_onglet a span {
    font-size: 11px;
  }

  h1 { font-size: 15px; }
  h2 { font-size: 14px; }
  h3 { font-size: 13px; }

  .contcenter { font-size: 13px; }

  /* Grille coloriages : 2 colonnes sur mobile (gap geré par le parent) */
  .dessin {
    width: calc(50% - 3px) !important;
    min-height: auto;
    margin: 0 !important;
  }
  .dessin_menu {
    width: calc(50% - 3px) !important;
    min-height: auto;
    margin: 0 !important;
  }

  /* Miniatures homepage : 2 colonnes */
  div[style*="width:120px"][style*="height:120px"] {
    width: calc(50% - 28px) !important;
  }

  /* Coloriages suivants : 2 colonnes */
  div[style*="width:220px"] {
    width: calc(50% - 8px) !important;
  }

  /* Blocs activite 170px : 2 colonnes */
  div[style*="width:170px"] {
    width: calc(50% - 8px) !important;
    margin: 4px !important;
  }

  /* Cadeau 226px : pleine largeur */
  div[style*="width:226px"] {
    width: 100% !important;
    margin: 4px 0 !important;
  }

  /* Menu categories : plus compact */
  .cat .menu_tit {
    padding: 8px 12px;
    font-size: 12px;
  }
  .cat ul li a {
    padding: 7px 12px 7px 20px;
    font-size: 12px;
  }

  /* Contenu : marges reduites */
  #contenu { padding: 8px !important; }
  .contentArr { padding: 8px !important; }

  /* Caracteristiques activite : empilees verticalement */
  div[style*="width:233px"] {
    margin-bottom: 8px;
  }
}

/* ============================================
   TRES PETIT MOBILE (max-width: 360px)
   ============================================ */
@media screen and (max-width: 360px) {
  .logo-mobile { width: 50px !important; }
  #logo { padding: 6px 0 6px 8px; }
  #header_onglet a { font-size: 10px; padding: 3px 6px; }
  #header_onglet ul { padding: 4px 6px; }

  #header_onglet a,
  #header_onglet a span {
    font-size: 10px;
  }

  h1 { font-size: 14px; }
  h2 { font-size: 13px; }

  #contenu { padding: 6px !important; }

  .dessin {
    width: calc(50% - 3px) !important;
    margin: 0 !important;
  }
  .dessin_menu {
    width: 100% !important;
    margin: 0 !important;
  }

  div[style*="width:120px"][style*="height:120px"] {
    width: calc(50% - 20px) !important;
  }
}