/* =====================================================================
   COUCHE MOBILE - WeCan / Coordination regionale Casablanca-Settat
   ---------------------------------------------------------------------
   Ce fichier est charge juste apres site.css et ne s applique qu en
   dessous de 720 px. Rien ne change sur ordinateur : retirer la balise
   de chargement suffit a revenir exactement a l etat precedent.

   Il corrige quatre choses constatees sur telephone :
     1. la page d accueil debordait sur le cote ;
     2. l en-tete etait trop serre et ses commandes trop petites ;
     3. les boutons flottants du bas se chevauchaient ;
     4. beaucoup de textes descendaient sous 12 px.
   ===================================================================== */

@media (max-width:720px){

/* --- 1. La page ne deborde plus sur le cote --------------------------
   La grille de l observatoire etait figee a deux colonnes (1.25fr .75fr)
   sans variante mobile. A 390 px de large, la seconde colonne poussait la
   page a 536 px : on pouvait faire glisser tout le site vers la droite et
   le logo sortait de l ecran. Une seule colonne suffit ici. */
.kpi-grid{grid-template-columns:1fr;gap:16px}

/* Garde-fou : meme si un bloc futur est trop large, il ne pourra plus
   elargir la page entiere. On utilise clip plutot que hidden, qui casse
   les en-tetes colles en haut. */
html{overflow-x:clip;scroll-padding-top:78px}
img,svg,video,iframe,table,pre{max-width:100%}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}


/* --- 2. Un en-tete qui respire ---------------------------------------
   Logo, langues, bouton d adhesion et menu occupaient 354 px sur 390 : il
   ne restait aucune marge. On resserre les ecarts pour recuperer de la
   place, et on rend cette place aux doigts. */
header .wrap.nav{padding-inline:14px;gap:10px}
.nav-act{gap:8px}

/* Les pastilles FR / AR / AMZ ne faisaient que 20 px de haut, soit moins
   de la moitie de la cible tactile recommandee. */
.langsel{gap:4px}
.langsel a{display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;min-width:38px;padding:0 9px;line-height:1;font-size:12px}

.nav-act .btn-sm{min-height:44px;padding:0 15px;font-size:14px}
.burger{min-width:44px;min-height:44px}


/* --- 3. Le bas d ecran, une chose a la fois --------------------------
   Trois elements vivaient au meme endroit : le bandeau d adhesion, la
   bulle du chat et la fleche de retour en haut. Le chat se posait par
   dessus le bandeau. On les separe - le chat d un cote, la fleche de
   l autre - et les deux montent d un cran quand le bandeau apparait,
   ce que le corps de page signale deja par la classe adh-on. */
html body #wc-bot{right:12px;left:auto;top:auto;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));transition:bottom .3s ease}
html[dir=rtl] body #wc-bot{left:12px;right:auto}

#topbtn{inset-inline-start:14px;inset-inline-end:auto;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));transition:bottom .3s ease}

/* Attention : le corps de page porte adh-on des le chargement, simple marque
   indiquant que le bandeau existe sur cette page. Ce qui change vraiment, c est
   la classe on posee sur le bandeau lui-meme au-dela de 420 px de defilement.
   On s accroche donc a celle-la, sinon les deux boutons flottaient trop haut
   pendant tout le haut de la page, au-dessus d un bandeau encore invisible. */
body:has(.adh-bar.on) #wc-bot,
html[dir=rtl] body:has(.adh-bar.on) #wc-bot,
body:has(.adh-bar.on) #topbtn{bottom:calc(88px + env(safe-area-inset-bottom,0px))}

/* Le bandeau de mesure d audience est pose en bas, sur toute la largeur, avec
   un z-index de 99999 : il recouvrait la bulle de discussion et le bouton de
   retour en haut, qui devenaient intouchables tant que la personne n avait pas
   repondu. mesure-meta.js publie desormais sa hauteur dans --wc-mesure-h et
   pose wc-mesure-on sur le corps de page ; on fait monter les deux boutons
   juste au-dessus. Le selecteur est plus specifique que celui de la feuille
   injectee par le script, qui arrive apres celle-ci dans le document. */
html body.wc-mesure-on #wc-bot,
html body.wc-mesure-on #topbtn{
  bottom:calc(var(--wc-mesure-h, 150px) + 26px + env(safe-area-inset-bottom,0px))}

/* Sur un telephone a encoche, le bandeau lui-meme tombait sous la barre de
   geste. On lui rend la marge de securite. */
html body #wc-mesure-bandeau{
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  max-height:76vh;overflow-y:auto}


/* --- 4. Des textes lisibles a bout de bras ---------------------------
   Sur la seule page d accueil, 84 blocs de texte passaient sous 14 px,
   certains a 10 et 11 px. On pose un plancher de lisibilite, sans
   toucher au rendu sur ordinateur. */
.kicker,.badge,.kpi-src{font-size:12px;line-height:1.5}
.map-note,.ev-m,.hmap-read,.f-bot{font-size:12.5px;line-height:1.6}
.sub,.nm,.f-desc,.hmap-txt{font-size:14px;line-height:1.65}
.pp .post{font-size:.78rem}
p{line-height:1.7}

/* Retour visuel au toucher, aux couleurs du parti. */
a,button{-webkit-tap-highlight-color:rgba(134,7,247,.16)}

}


/* --- Ecrans les plus etroits (iPhone SE et assimiles) ---------------- */
@media (max-width:380px){
  header .wrap.nav{padding-inline:11px;gap:8px}
  .nav-act{gap:6px}
  .langsel a{min-width:34px;padding:0 6px;font-size:11.5px}
  .nav-act .btn-sm{padding:0 12px;font-size:13.5px}
}


/* --- 5. Un bandeau d adhesion moins haut ---------------------------
   Il occupait 98 px, soit pres d un huitieme de l ecran d un telephone,
   en permanence. On resserre les marges et le bouton sans rien retirer :
   l appel a l action et sa precision - trois minutes, sans cotisation -
   restent tous les deux lisibles, mais la barre descend a environ 72 px.
   Le seuil est cale a 860 px, la ou le bandeau apparait, et non a 720.
   ------------------------------------------------------------------ */
@media (max-width:860px){
  .adh-bar{padding:7px 14px calc(7px + env(safe-area-inset-bottom,0px))}
  .adh-bar a{padding:10px 18px;font-size:.92rem}
  .adh-bar small{margin-top:3px;font-size:.64rem;line-height:1.25}
}


/* ---------------------------------------------------------------------
   AFFINAGE MOBILE — respiration (complement du 27 aout)
   ---------------------------------------------------------------------
   L affinage general applique sur ordinateur (cartes plus aerees,
   grilles plus espacees) est trop genereux sur un ecran de 390 px :
   32 px de marge interieure de chaque cote ne laissaient que 298 px
   de texte utile. On remet ici des valeurs a l echelle du telephone,
   tout en gardant l esprit : moins dense, plus lisible.
   Aucun bloc n est masque, aucun contenu n est retire.
   --------------------------------------------------------------------- */
@media (max-width:720px){

  /* 1. Les bords de l ecran respirent un peu plus (14 px etait serre). */
  .wrap{padding-left:20px;padding-right:20px}

  /* 2. Cartes et panneaux : marge interieure remise a l echelle mobile.
        Le texte utile passe de 298 px a 306 px malgre des bords plus larges. */
  .card,.panel{padding:26px 22px;border-radius:18px}
  .ico{margin-bottom:16px}

  /* 3. Grilles empilees : 18 px separent proprement deux cartes,
        30 px creaient des trous et allongeaient inutilement la page. */
  .grid-3,.grid-2,.kpi-grid{gap:18px}
  .bars{gap:16px}
  .donut-wrap{gap:20px}

  /* 4. Titres : l interlignage serre du bureau (1.04) rendait les
        titres sur deux ou trois lignes compacts et durs a lire. */
  h1{line-height:1.14}
  h2,.h-l{line-height:1.2;letter-spacing:-.6px}
  .sec-head{margin-bottom:28px}

  /* 5. Paragraphes : pleine largeur et interlignage confortable. */
  .lead{max-width:none}
  .sec p,.lead,section p{line-height:1.75}

  /* 6. Surtitres : moins d interlettrage, sinon ils passent a la ligne. */
  .kicker{letter-spacing:1.8px}
}

@media (max-width:460px){
  .wrap{padding-left:18px;padding-right:18px}
  .card,.panel{padding:24px 20px}
  .kicker{letter-spacing:1.4px}
}

/* ============================================================
   LOT 26 — Accordeons, cases a cocher et filtre sur telephone
   ============================================================
   Ces trois familles n avaient aucune regle mobile : elles
   heritaient telles quelles des valeurs du bureau. Sur un ecran
   de 380 px, l en-tete d un accordeon perdait la moitie de son
   titre et les cases a cocher tenaient sur deux colonnes trop
   etroites pour etre lues ou visees du pouce. */

@media (max-width:720px){

  /* 1. Accordeons : la pastille numerotee et les marges laterales
        mangeaient l espace du titre. On les reduit, et le titre
        cesse d etre tronque. La cible tactile reste au-dessus de
        44 px grace au calage vertical. */
  .lv{margin-bottom:12px;border-radius:16px}
  .lv-h{gap:13px;padding:17px 18px}
  .lv-n{width:38px;height:38px;border-radius:11px;font-size:.92rem}
  .lv-t b{font-size:.96rem;line-height:1.3}
  .lv-t small{font-size:.76rem;line-height:1.35;display:block;margin-top:3px}
  .lv-x{width:30px;height:30px}
  .lv-b-in{padding:18px 18px 22px}

  /* 2. Cases a cocher : deux colonnes pour dix-neuf intitules
        donnaient des libelles coupes en trois lignes. Une seule
        colonne, plus haute, se lit et se vise sans erreur. */
  .checks{grid-template-columns:1fr;gap:9px}
  .ck{padding:13px 14px;font-size:.87rem;min-height:48px;border-radius:12px}
  .ck input{width:19px;height:19px}

  /* 3. Filtre des instances : le champ prend toute la largeur, le
        bouton passe dessous plutot que de comprimer le champ. */
  .wc-filtre{margin-bottom:20px}
  .wc-filtre-q{flex:1 1 100%;font-size:16px}
}

@media (max-width:380px){
  .lv-h{gap:11px;padding:15px 15px}
  .lv-n{width:34px;height:34px;font-size:.85rem;border-radius:10px}
  .lv-t b{font-size:.92rem}
  .lv-b-in{padding:16px 15px 20px}
  .ck{font-size:.85rem;padding:12px 12px}
}

/* ============================================================
   LOT 26 — Le bandeau de mesure ne doit rien rendre intouchable
   ============================================================
   Le bandeau de consentement flotte en bas a gauche avec un
   z-index de 99999. Les deux boutons flottants avaient deja ete
   remontes, mais pas le contenu de la page : sur adherer.html il
   recouvrait « Remplir le formulaire » et « Qui est WeCan ? », les
   deux appels a l action de la page la plus importante du site.
   On allonge le pied de page de la hauteur du bandeau tant qu il
   est affiche : la page peut alors defiler au-dela, plus rien ne
   reste couvert, et la teinte sombre du pied evite la bande
   blanche qu aurait laissee une marge posee sur le corps.
   Cette regle vaut a toutes les largeurs, pas seulement sur
   telephone : le recouvrement existait aussi sur ordinateur. */
html body.wc-mesure-on footer{
  padding-bottom:calc(var(--wc-mesure-h, 150px) + 34px + env(safe-area-inset-bottom,0px));
  transition:padding-bottom .3s ease
}