/* ══ responsive.css ════════════════════════════════════════════════════════
   Remplace tous les screen-max-width-xxxxpx.css.
   Contient uniquement les règles non-carre : cFirst/cLast widths, show/hide.
   Les carres sont gérés exclusivement par ajusterCarres() (JS inline style).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Visibilité classes (remplace tous les .show-XXX / .hide-XXX) ────────── */
.show-640, .show-800, .show-1280, .show-1680,
.show-1920, .show-2560, .show-3840 { display: none !important; }

@media (max-width: 640px)  { .show-640  { display: inline-block; } .hide-640 { display: none; } }
@media (min-width: 641px) and (max-width: 800px)   { .show-800  { display: inline-block !important; } .hide-640 { display: block; } }
@media (min-width: 801px) and (max-width: 1280px)  { .show-1280 { display: inline-block !important; } }
@media (min-width: 1281px) and (max-width: 1680px) { .show-1680 { display: inline-block !important; } }
@media (min-width: 1681px) and (max-width: 1920px) { .show-1920 { display: inline-block !important; } }
@media (min-width: 1921px) and (max-width: 2560px) { .show-2560 { display: inline-block !important; } }
@media (min-width: 2561px)                         { .show-3840 { display: inline-block !important; } }

/* ── #cFirst width par breakpoint ────────────────────────────────────────── */
@media (max-width: 640px)  { #cFirst { width: 154px; } #cFirst h4 a { font-size:10px; } #cFirst ul.niv1>li { font-size:8.5px; line-height:10px; } }
@media (min-width: 641px) and (max-width: 800px)   { #cFirst { width: 175px; } #cFirst h4 a { font-size:11px; } #cFirst ul.niv1>li { font-size:9.5px; line-height:10px; } }
@media (min-width: 801px) and (max-width: 980px)   { #cFirst { width: 154px; } #cFirst h4 a { font-size:10px; } #cFirst ul.niv1>li { font-size:8.5px; line-height:13px; } }
@media (min-width: 981px) and (max-width: 1024px)  { #cFirst { width: 165px; } #cFirst h4 a { font-size:11px; } #cFirst ul.niv1>li { font-size:9.5px; line-height:13px; } }
@media (min-width: 1025px) and (max-width: 1280px) { #cFirst { width: 168px; } #cFirst h4 a { font-size:11.5px; } #cFirst ul.niv1>li { font-size:10px; line-height:13px; } }
@media (min-width: 1281px) and (max-width: 1440px) { #cFirst { width: 185px; } #cFirst h4 a { font-size:12px; } #cFirst ul.niv1>li { font-size:10px; line-height:13px; } }
@media (min-width: 1441px) and (max-width: 1680px) { #cFirst { width: 175px; } #cFirst h4 a { font-size:12px; } #cFirst ul.niv1>li { font-size:9.5px; line-height:13px; } }

/* ── #cLast width + masquage ─────────────────────────────────────────────── */
@media (max-width: 800px)  { #cLast { display: none; } }  /* sans !important → jQuery peut toggle */
@media (min-width: 801px) and (max-width: 980px)   { #cLast { width: 268px; } }
@media (min-width: 981px) and (max-width: 1024px)  { #cLast { width: 272px; } }
@media (min-width: 1025px) and (max-width: 1152px) { #cLast { width: 240px; } }
@media (min-width: 1153px) and (max-width: 1280px) { #cLast { width: 258px; } }
@media (min-width: 1281px) and (max-width: 1440px) { #cLast { width: 300px; } }
@media (min-width: 1441px) and (max-width: 1680px) { #cLast { width: 310px; } }
@media (min-width: 1681px) and (max-width: 1920px) { #cLast { width: 315px; } }
@media (min-width: 1921px) and (max-width: 2560px) { #cLast { width: 320px; } }
@media (min-width: 2561px)                         { #cLast { width: 330px; } }

/* ── Divers ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    #cSecond h1 { padding: 5px; margin: 0 0 5px 0; }
    #cSecond span { float: none !important; }
    #cSecond { text-align: center; }

    /* navBox : 3 zones définies dans col1.css (valables tous widths) */
    #pgHome #cSecond .navBox .scr-min-hide { display: none !important; }
}

/* ── En dessous de 640px : cFirst en mode collapsed (width:0 overflow:visible)
   → btn-cFirst (position:absolute) reste visible en dehors du parent.
   On NE MET PAS display:none sur #cFirst : ça cacherait aussi btn-cFirst.
   Le JS applique .collapsed (width:0) à l'initialisation.
   cLast : géré par JS show()/hide() (sans !important = inline style gagne). */
@media (max-width: 639px) {
    /* PAS de display:none sur #cFirst → btn-cFirst visible */
    #cLast  { display: none; }   /* sans !important → jQuery peut toggle */
}