/*
Feuille mobile / tablette - Stardustcolors
==========================================

INVARIANT : toute regle de ce fichier vit dans un @media borne par un
max-width strictement inferieur a 992px. Ne jamais ecrire une regle hors d'un
tel bloc, ni ouvrir un @media sans borne haute : le rendu desktop (>= 992px)
doit rester identique au pixel.

Verification mecanique (les deux nombres doivent etre egaux) :
    grep -c "^@media" mobile.css
    grep "^@media" mobile.css | grep -cE "max-width: *(991\.98|359\.98)px"

Pourquoi 991.98 et non 991 : un zoom Windows a 125% ou un DPR fractionnaire
produit des largeurs de viewport non entieres (991.4px). Le couple
max-width:991px / min-width:992px laisserait une bande morte.
La syntaxe d'intervalle @media (width < 992px) serait plus lisible mais n'est
supportee par Safari qu'a partir de 16.4.

Cette feuille est chargee en DERNIER (voir functions.php, starnews_scripts) :
elle gagne a specificite egale, sans !important et sans toucher aux feuilles
existantes.
*/

@media (max-width: 991.98px) {

/* -------------------------------------------------------------------------
   1. Tokens
   Couleurs reprises telles quelles de style.css : aucune couleur inventee.
   ------------------------------------------------------------------------- */

:root {
  --sdc-ink:        #000;      /* corps de texte */
  --sdc-ink-soft:   #3d4852;
  --sdc-ink-mute:   #677783;   /* meta, placeholders */
  --sdc-title:      #1f087b;   /* .post-title, .widget-title */
  --sdc-accent:     #663399;   /* .hot-posts_title, badge date */
  --sdc-accent-2:   #ec6a2a;   /* .spacer */
  --sdc-rule:       #a9dbf1;   /* bordure sidebar */
  --sdc-footer-bg:  #000c25;
  --sdc-surface:    #fff;
  --sdc-surface-2:  #f1f5f8;
  --sdc-border:     #dae1e7;

  /* Espacements, base 4 */
  --sdc-space-4:  4px;
  --sdc-space-8:  8px;
  --sdc-space-12: 12px;
  --sdc-space-16: 16px;
  --sdc-space-24: 24px;
  --sdc-space-32: 32px;
  --sdc-space-48: 48px;

  /* Gouttiere laterale. .wrapper a padding: 2rem 0, donc zero horizontal :
     tout le contenu colle aux bords de l'ecran aujourd'hui. */
  --sdc-gutter: clamp(1rem, 4vw, 1.5rem);

  /* Typographie fluide.
     Les bornes HAUTES valent exactement les valeurs desktop, pour qu'il n'y
     ait aucun saut au franchissement de 992px. */
  --sdc-fs-body:       clamp(1.0625rem, 1rem + .25vw, 1.125rem);   /* 17 -> 18 */
  --sdc-fs-h1:         clamp(1.375rem, 1.15rem + 1.1vw, 1.6rem);
  --sdc-fs-h2:         clamp(1.25rem,  1.1rem  + .7vw,  1.4rem);
  --sdc-fs-h3:         clamp(1.125rem, 1.05rem + .4vw,  1.2rem);
  --sdc-fs-card-title: clamp(1rem, .95rem + .3vw, 1.15rem);
  --sdc-fs-meta:       .8125rem;
  --sdc-fs-ui:         1.0625rem;   /* 17px : plancher anti-zoom iOS */

  /* Corps de texte : aujourd'hui 16px/19px, soit un ratio de 1.19. */
  --sdc-lh-body:  1.65;
  --sdc-lh-tight: 1.25;
  --sdc-measure:  68ch;

  --sdc-radius: 12px;
  --sdc-tap:    48px;   /* cible tactile minimale */
}

/* -------------------------------------------------------------------------
   2. Gouttieres
   .wrapper a padding: 2rem 0, donc zero padding horizontal : tout le contenu
   colle aux bords de l'ecran. On ne touche pas .wrapper (partage avec le
   desktop), on ajoute la gouttiere ici.
   ------------------------------------------------------------------------- */

.wrapper {
  padding-left: var(--sdc-gutter);
  padding-right: var(--sdc-gutter);
}

/* .wrapper-home et .content-wrapper-home n'ont aucune regle CSS : la gouttiere
   de la page d'accueil doit etre posee sur le conteneur des cartes. */
.hot-posts_container {
  padding-left: var(--sdc-gutter);
  padding-right: var(--sdc-gutter);
}

/* -------------------------------------------------------------------------
   3. Grille de cartes : 1 colonne, puis 2 a partir de 576px.
   Le desktop conserve repeat(3, auto).
   ------------------------------------------------------------------------- */

.hot-posts_grid {
  grid-template-columns: 1fr;
  /* Correctif du trou vertical : le grid-template-rows: 350px d'origine ne
     s'applique qu'a la PREMIERE rangee. Les suivantes tombent en auto et
     suivent l'aspect-ratio des cartes, d'ou un vide d'environ 150px apres la
     premiere rangee. */
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: var(--sdc-space-16);
  margin: 0 auto var(--sdc-space-32);
}

/* Carte editoriale.
   Le desktop conserve la carte carree immersive, titre blanc pose sur la
   photo. Ici la photo passe en 16/10 et le texte descend sur fond clair : la
   lisibilite ne depend plus de l'image. Aujourd'hui le titre blanc ne tient
   que parce que les visuels sont sombres, et il devient illisible des qu'une
   photo est claire. */
.article {
  display: grid;
  grid-template-rows: auto auto auto auto;
  /* On abandonne l'aspect-ratio : c'est la photo qui le porte desormais,
     et la hauteur de la carte suit son contenu. */
  aspect-ratio: auto;
  padding: 0;
  border: 1px solid var(--sdc-border);
  border-radius: var(--sdc-radius);
  background-color: var(--sdc-surface);
}

/* La photo reprend sa place dans le flux et porte le ratio. */
.article .article__media {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
}

/* Les deux degrades n'ont plus d'objet : le texte n'est plus sur la photo. */
.article::before,
.article::after {
  display: none;
}

/* Remplace par .article__meta, en bas de carte. */
.article .date-publication {
  display: none;
}

.article__cat {
  display: block;
  padding: var(--sdc-space-12) var(--sdc-space-16) 0;
  font-size: var(--sdc-fs-meta);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sdc-accent);
}

.article .titre-article {
  padding: var(--sdc-space-8) var(--sdc-space-16) 0;
  color: var(--sdc-title);
  font-size: var(--sdc-fs-card-title);
  line-height: var(--sdc-lh-tight);
  /* Deux lignes : au-dela, les cartes de la grille perdent leur alignement
     et le titre cesse d'etre balayable. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  /* Annule le text-shadow, qui n'a de sens que sur une photo. */
  text-shadow: none;
}

.article__meta {
  display: block;
  margin: 0;
  padding: var(--sdc-space-8) var(--sdc-space-16) var(--sdc-space-16);
  font-size: var(--sdc-fs-meta);
  color: var(--sdc-ink-mute);
}

.spacer {
  margin: var(--sdc-space-12) auto 0 var(--sdc-space-16);
}

.hot-posts_title {
  font-size: var(--sdc-fs-h2);
  padding: var(--sdc-space-24) 0;
}

.all-posts a {
  /* Aujourd'hui aucune couleur n'est definie : le lien tombe sur le bleu par
     defaut du navigateur (#0000ee), et sa cible tactile fait 22px de haut. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sdc-tap);
  padding: 0 var(--sdc-space-24);
  color: var(--sdc-surface);
  background-color: var(--sdc-accent);
  border-radius: var(--sdc-radius);
  font-size: var(--sdc-fs-ui);
}

/* -------------------------------------------------------------------------
   4. Typographie de lecture
   Aujourd'hui : font-size 16px / line-height 19px, soit un ratio de 1.19.
   ------------------------------------------------------------------------- */

body {
  font-size: var(--sdc-fs-body);
  line-height: var(--sdc-lh-body);
}

.post-content {
  padding: 0;
}

.post-content p,
.post-content li {
  font-size: var(--sdc-fs-body);
  line-height: var(--sdc-lh-body);
}

.post-content p  { margin: 0 0 1.25em; }
.post-content li { margin-top: .4em; }

/* Longueur de ligne. A 17px, 68ch vaut environ 510px : la regle ne mord donc
   que sur tablette, exactement la ou elle est utile. */
.post-content > * {
  max-width: var(--sdc-measure);
}

.post-title {
  font-size: var(--sdc-fs-h1);
  line-height: var(--sdc-lh-tight);
  margin-bottom: var(--sdc-space-16);
}

.post-content h2 { font-size: var(--sdc-fs-h2); line-height: 1.3;  margin: 2em 0 .6em; }
.post-content h3 { font-size: var(--sdc-fs-h3); line-height: 1.35; margin: 1.8em 0 .5em; }
.post-content h4 { font-size: 1.1rem;           line-height: 1.4;  margin: 1.6em 0 .5em; }

/* Un h1 nu dans le corps d'article : reset.css (normalize, charge APRES
   style.css) le fixe a 2em sous 992px. On reprend la main explicitement
   plutot que de reordonner les feuilles, ce qui deplacerait aussi le desktop. */
.post-content h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.75rem);
  line-height: var(--sdc-lh-tight);
  margin: 1.5em 0 .5em;
}

.post-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.post-content img,
.post-content iframe {
  max-width: 100%;
  height: auto;
}

.post-content iframe { aspect-ratio: 16 / 9; }

/* Ces deux classes flottent a 49% cote a cote et ne sont jamais repassees a
   100% sur petit ecran. */
.video-demi-gauche,
.video-demi-droite {
  display: block;
  max-width: 100%;
  float: none;
  margin: 0 0 var(--sdc-space-16);
}

/* -------------------------------------------------------------------------
   5. Colonne laterale
   ------------------------------------------------------------------------- */

/* En dessous de 992px la sidebar passe en flux normal mais conserve son
   padding-left et son border-left, d'ou une barre bleue verticale orpheline. */
#secondary.widget-area,
.widget-area {
  padding-left: 0;
  border-left: 0;
}

#secondary.widget-area {
  border-top: 1px solid var(--sdc-rule);
  padding-top: var(--sdc-space-24);
  margin-top: var(--sdc-space-32);
}

/* -------------------------------------------------------------------------
   6. Icones sociales flottantes (extension Ultimate Social Media Icons)
   En position fixed, elles recouvrent le H1 des articles, la colonne de
   droite des cartes et le bouton de fermeture de la recherche.
   Remplacees par le partage natif (voir .sdc-share).
   ------------------------------------------------------------------------- */

#sfsi_floater,
.sfsi_outr_div {
  display: none !important;
}

/* -------------------------------------------------------------------------
   7. Formulaire de commentaire
   Rendu aujourd'hui en style navigateur brut.
   ------------------------------------------------------------------------- */

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  /* Au moins 16px : en deca, iOS Safari zoome automatiquement a la prise de
     focus et laisse le viewport decale apres fermeture du clavier. */
  font-size: var(--sdc-fs-ui);
  padding: var(--sdc-space-12);
  border: 1px solid var(--sdc-border);
  border-radius: 4px;
  background: var(--sdc-surface);
  -webkit-appearance: none;
  appearance: none;
}

.comment-form label {
  display: block;
  margin-bottom: var(--sdc-space-4);
  font-size: .9375rem;
}

.comment-form .submit {
  width: 100%;
  min-height: var(--sdc-tap);
  font-size: var(--sdc-fs-ui);
  background: var(--sdc-accent);
  color: var(--sdc-surface);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

/* L'iframe reCAPTCHA v2 fait 302px de large et deborde sous 360px. */
.g-recaptcha {
  transform: scale(.87);
  transform-origin: 0 0;
  margin-bottom: -20px;
}

/* -------------------------------------------------------------------------
   8. Pied de page
   24 liens sur 24 ont aujourd'hui une hauteur inferieure a 44px.

   Le confort tactile est obtenu par du padding et non par un line-height de
   48px : mesure faite, un line-height de 48px faisait passer le pied de page
   de 1272px a 2465px.

   Les listes restent sur une colonne. Un essai en deux colonnes a ete mesure
   puis abandonne : les libelles sont trop longs ("Contacter les differents
   services de Stardustcolors") et passaient sur trois lignes dans une colonne
   de 180px, ce qui donnait des liens de 67 a 93px de haut.
   Un pied de page en accordeon reste la bonne reponse, mais il demande du
   balisage et du JS : a traiter dans un lot dedie.
   ------------------------------------------------------------------------- */

.footer-widget-area a,
.footer-menu a {
  display: block;
  padding: var(--sdc-space-8) 0;
  line-height: 1.5;
}

}


/* =========================================================================
   Paliers intermediaires. Chacun reste borne a 991.98px.
   ========================================================================= */

@media (min-width: 576px) and (max-width: 991.98px) {
  .hot-posts_grid {
    /* minmax(0, 1fr) et NON 1fr : "1fr" vaut "minmax(auto, 1fr)", dont le
       minimum "auto" vaut min-content. Un titre long fait alors exploser la
       piste. C'est la cause exacte du debordement observe entre 651 et 768px. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hot-posts_grid { gap: var(--sdc-space-24); }
  /* On se rapproche du carre du desktop, ou la photo est en 1/1. */
  .article .article__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 359.98px) {
  .g-recaptcha { transform: scale(.77); }
}