/* ==========================================================================
   Règle « Téléphone » des exigences communes. Aucune maquette mobile n’existe :
   la règle est fixe et ne modifie rien au-dessus de 1440 px.

     · une colonne sous 760 px ;
     · navigation repliée dans un menu ;
     · tableaux transformés en cartes ;
     · boutons de 44 px de haut au moins ;
     · aucun défilement horizontal.
   ========================================================================== */

/* Le bouton du menu n’existe que sous 980 px. */
.nav__bascule { display: none; }

@media (max-width: 1440px) {
  body { min-width: 0; }
  .c { padding-inline: clamp(16px, 3.4vw, 48px); }
}

/* ── Navigation repliée ──────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Le bouton du menu se voyait à peine : du crème sur du blanc. */
  .nav__bascule {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-left: auto;
    border: 0; border-radius: 999px;
    background: var(--rouge); color: #fff;
    box-shadow: 0 6px 16px rgba(220, 26, 35, .3);
  }
  .nav__bascule:hover { background: var(--rouge-fonce); }
  .menu-ouvert .nav__bascule { background: var(--encre); box-shadow: none; }
  .nav .c { height: 72px; gap: 12px; flex-wrap: wrap; }
  .nav nav {
    display: none; order: 3; width: 100%; margin: 0 0 12px;
    flex-direction: column; gap: 2px; border-radius: 24px; padding: 10px;
  }
  .nav__item--droite { display: none; order: 4; width: 100%; }
  .nav > .c > .btn { order: 2; min-height: 44px; }
  .menu-ouvert .nav nav,
  .menu-ouvert .nav__item--droite { display: flex; flex-direction: column; width: 100%; }
  .menu-ouvert .nav__item--droite { padding: 0 10px 12px; }
  .nav__lien, .nav__aide { width: 100%; justify-content: space-between; min-height: 44px; }
  /* Les méga-menus deviennent des sous-listes dépliables. */
  .mega {
    position: static; display: none; padding: 0; transform: none;
    left: auto; right: auto; width: 100%;
  }
  .nav__item:hover > .mega, .nav__item:focus-within > .mega { display: none; }
  .nav__item.est-deplie > .mega { display: block; }
  .mega__carte { width: 100%; min-width: 0; box-shadow: none; }
  .annonce .c { height: auto; padding-block: 8px; text-align: center; flex-wrap: wrap; }
}

/* ── Palier intermédiaire : deux colonnes de 760 à 1180 px ───────────────
   Entre le téléphone et l’écran large, une grille de quatre ou cinq
   colonnes serre trop : les cartes deviennent illisibles bien avant que
   la règle « une colonne » ne s’applique. */
@media (max-width: 1180px) {
  .chiffres, .delais, .etapes--3, .etapes--4,
  .atouts--3, .atouts--4, .offres--3, .offres--4, .offres--5,
  .croises, .croises--4, .jauges, .raccourcis, .jeux, .besoins, .apps,
  .annonces, .rubriques, .profils, .simulateur__paliers,
  .choix-groupe--3, .choix-groupe--4, .choix-groupe--5,
  .kpis, .kpis--3, .g--3, .conso-grand__chiffres, .apps--choix,
  .emplacements ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pied__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Les écrans à deux colonnes dont l’une est figée en pixels : la
     colonne figée ne tient plus à côté du contenu. */
  .hero, .tete__ligne, .faq, .cloud-accueil, .facturation, .une,
  .lecture, .doc, .contact, .erreur, .tunnel, .auth, .issue,
  .installation, .article-panier, .ajout, .ajout--court {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__texte, .hero__visuel { width: auto; }
  .recap { position: static; width: auto; margin-top: 20px; }

  /* L’espace client : la colonne latérale de 292 px passe en bandeau. */
  .espace { grid-template-columns: minmax(0, 1fr); }

  /* Le bandeau du tunnel de commande : logo, pas numérotés et mention
     rassurante tenaient sur une ligne de 92 px de haut. Les pas seuls
     font 600 px : ils passent sous le logo. */
  .tunnel__barre .c { flex-wrap: wrap; height: auto; padding-block: 12px; gap: 12px; }
  .pas { order: 3; width: 100%; margin-inline: 0; justify-content: flex-start;
         overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pas::-webkit-scrollbar { display: none; }
  .tunnel__sur { margin-left: auto; }
}

/* ── Une seule colonne sous 760 px ───────────────────────────────────────
   La liste est tirée de la feuille des maquettes : toute règle qui pose
   plusieurs colonnes y figure, sauf celles dont les colonnes sont des
   paires étiquette/valeur ou de petites cases (code à six chiffres,
   jauge de force), qui restent lisibles telles quelles. */
@media (max-width: 760px) {
  .hero, .chiffres, .tete__ligne, .duo-texte, .duo-texte--centre, .delais,
  .coches--2, .etapes, .etapes--3, .etapes--4,
  .atouts, .atouts--2, .atouts--3, .atouts--4,
  .offres, .offres--2, .offres--3, .offres--4, .offres--5,
  .faq, .croises, .croises--2, .croises--4, .jauges, .vitrine,
  .pied__haut, .pied__colonnes, .pied__bas, .compris ul,
  .raccourcis, .jeux, .cloud-accueil, .duo, .trio, .quatuor, .besoins,
  .apps, .apps--choix, .facturation, .simulateur__paliers, .fiche-cloud,
  .cartes-jeu, .emplacements ul, .processeurs, .profils, .roles, .dedie,
  .une, .annonces, .lecture, .suite, .rubriques, .doc,
  .contact, .formulaire__grille, .formulaire__grille--3, .erreur,
  .espace, .g--2, .g--3, .g--21, .g--32, .kpis, .kpis--3,
  .choix-groupe--2, .choix-groupe--3, .choix-groupe--4, .choix-groupe--5,
  .svc, .tunnel, .auth, .article-panier, .issue, .installation,
  .regles, .ajout, .ajout--court, .conso-grand__parties,
  .doc-compta__parties, .cmp, .cmp__grille, .recap-ligne,
  .cloud__grille, .paliers, .raccourcis-ec, .fiche, .offre__specs,
  .tunnel__pied, .bloc--duo, .ec-tete, .svc, .simulateur {
    display: block !important;
    grid-template-columns: none !important;
  }

  .offres > * + *, .atouts > * + *, .croises > * + *, .etapes > * + *,
  .chiffres > * + *, .faits > * + *, .delais > * + *, .apps > * + *,
  .paliers > * + *, .raccourcis-ec > * + *, .raccourcis > * + *,
  .jeux > * + *, .besoins > * + *, .annonces > * + *, .rubriques > * + *,
  .profils > * + *, .kpis > * + *, .g--2 > * + *, .g--3 > * + *,
  .choix-groupe > * + *, .emplacements ul > * + * { margin-top: 16px; }

  /* Les colonnes qui restent à deux : étiquette et valeur, pas un gabarit. */
  .prefs__tete, .prefs__ligne { grid-template-columns: minmax(0, 1fr) 76px 76px; }
  .identite dl div { grid-template-columns: 92px minmax(0, 1fr); }

  .hero__texte, .hero__visuel { width: auto; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 46px); line-height: 1.12; }
  h1 { font-size: clamp(28px, 7.6vw, 42px); line-height: 1.14; }
  h2 { font-size: clamp(24px, 6.4vw, 34px); line-height: 1.18; }
  .tete__ligne p { margin-top: 8px; }

  /* L’espace client passe en pile : le menu latéral se replie en haut. */
  .cote {
    position: static; min-height: 0; margin: 12px; padding: 16px;
    border-radius: 24px;
  }
  .cote__lien { width: auto; }
  .cote__bas { margin-top: 12px; }
  .barre { flex-wrap: wrap; gap: 8px; }
  .barre__recherche { order: 3; width: 100%; }
  .espace__principal > main { padding: 16px; }

  /* Un tableau devient une pile de cartes : chaque cellule porte son titre
     dans l’attribut data-titre, posé par le composant. */
  .liste[role="table"] .tl {
    display: block !important; grid-template-columns: none !important;
    padding: 14px 16px;
  }
  /* Après la règle précédente, et plus spécifique : à spécificité égale
     c’est la dernière qui gagne, et la ligne d’en-tête restait affichée,
     empilée, au-dessus des cartes. */
  .liste[role="table"] .tl.tl--tete { display: none !important; }
  .liste[role="table"] .tl > span,
  .liste[role="table"] .tl > span.droite {
    display: block; text-align: left !important; justify-self: stretch !important;
  }
  /* La dernière cellule ne porte que le chevron du lien : dans une carte
     il ne mène nulle part de plus, et il traîne tout seul sur sa ligne. */
  .liste[role="table"] .tl > span:last-child:not([data-titre]) { display: none; }
  .liste[role="table"] .tl > span + span { margin-top: 6px; }
  .liste[role="table"] .tl > span[data-titre]::before {
    content: attr(data-titre) " · ";
    font: 600 12px/18px "Onest", sans-serif; color: var(--discret);
  }

  /* Un vrai tableau (comparatif, facture) défile dans son propre cadre. */
  .comparatif, .table-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .comparatif table { min-width: 620px; }
  .comparatif tbody th { width: auto; }
  .resultats b { min-width: 0; }

  /* Tunnel de commande et pas numérotés */
  .pas { flex-wrap: wrap; gap: 6px; font-size: 13px; }
  .tunnel__barre .c { flex-wrap: wrap; height: auto; padding-block: 10px; gap: 10px; }
  .tunnel__sur, .tunnel__aide { display: none; }
  .recap { position: static; width: auto; margin-top: 20px; }

  /* Écrans de connexion : le panneau de droite disparaît. */
  .auth__cote { display: none !important; }
  .auth__form { width: auto; padding-inline: 20px; }

  .modale__carte, .modale__carte--large { width: calc(100vw - 24px); max-width: none; }
  .doc-compta__total { width: auto; }
}

/* ── Le menu de l’espace client se replie ───────────────────────────────
   Posé en haut de la page, il occupait un écran entier avant le moindre
   contenu : il faut faire défiler pour arriver à ce qu’on est venu voir.
   La règle demande une navigation repliée dans un menu, pas une
   navigation déplacée. */
.cote__bascule { display: none; }

@media (max-width: 980px) {
  .cote__bascule {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 46px; height: 46px; margin-right: 4px;
    border: 0; border-radius: 999px;
    background: var(--rouge); color: #fff;
    box-shadow: 0 6px 16px rgba(220, 26, 35, .3);
  }
  .menu-ouvert .cote__bascule { background: var(--encre); box-shadow: none; }

  .espace { grid-template-columns: minmax(0, 1fr); }
  .cote {
    display: none;
    position: static; min-height: 0; margin: 12px 12px 0; padding: 16px;
    border-radius: 24px;
  }
  .menu-ouvert .cote { display: flex; }
  .cote nav { flex-direction: column; }
  .cote__logo { display: none; }

  /* Le menu ouvert porte ce que la barre ne montre plus. */
  .menu-ouvert .cote .barre__solde,
  .menu-ouvert .cote .barre__recherche { display: flex; }

  /* La barre reste sous la main pendant le défilement : c’est elle qui
     porte le bouton du menu. Sa hauteur était figée à 64 px, si bien que
     ses éléments repliés débordaient sur le contenu. */
  .barre {
    position: sticky; top: 0; z-index: 40;
    height: auto; min-height: 60px; flex-wrap: nowrap;
    margin: 0; padding: 8px 12px; gap: 8px;
    background: var(--creme);
    box-shadow: 0 6px 14px -10px rgba(58, 16, 10, .5);
  }
  .barre .fil {
    min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* Le solde et la recherche se retrouvent dans le menu : la barre garde
     le fil d’Ariane, le bouton et les notifications. */
  .barre__recherche, .barre__solde { display: none; }
  .barre__rond { flex: none; }
}

/* ── Boutons et zones tactiles : 44 px au moins ──────────────────────────── */
@media (pointer: coarse), (max-width: 760px) {
  .btn, .mini, button, .bascule, .choix,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, .cote__lien, .ec-onglets a, .onglets button {
    min-height: 44px;
  }
  .btn--petit { min-height: 44px; padding-inline: 16px; }
}

/* ── Aucun défilement horizontal, jamais ───────────────────────────────── */
@media (max-width: 1440px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, iframe, pre, code { max-width: 100%; }
  pre { overflow-x: auto; }

  /* Les rubans sont des décors posés en pixels derrière les titres. Ils
     dépassaient de l’écran et faisaient grandir la page : chacun est
     maintenant bridé à la largeur de son bloc. */
  .hero__ruban, .panneau__ruban, .appel__ruban, .erreur__ruban,
  .svc__ruban, .auth__ruban, .issue__ruban, .installation__ruban,
  .bandeau__ruban, .solde__ruban, .mail__ruban,
  .panneau--infra .panneau__ruban {
    max-width: 100%; height: auto;
  }

  /* Un bloc qui porte un décor en débordement le garde pour lui. */
  .hero, .panneau, .appel, .erreur, .svc, .auth, .issue,
  .installation, .bandeau, .solde, .bloc, .duo, .vitrine,
  .une, .tete, .essentiel, .lecture { overflow: hidden; }

  .mega__carte { max-width: calc(100vw - 32px); }
  .barre__recherche { max-width: 100%; }
}

/* ── Compléments, sur téléphone ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .deuxfa { display: block; }
  .codes-secours { grid-template-columns: 1fr; }
}

/* ── Les rembourrages des grands blocs ──────────────────────────────────
   Les maquettes sont dessinées à 1440 px : un bloc respire avec 72 px de
   chaque côté. Sur un téléphone de 360 px, ces 144 px ne laissent que
   216 px au texte. La liste est tirée de la feuille des maquettes : toute
   règle qui pose 36 px ou plus de rembourrage horizontal y figure. */
@media (max-width: 1180px) {
  .hero--accueil, .bloc, .lecture, .doc, .installation, .auth__form,
  .auth__cote, .issue, .formulaire, .duo .panneau,
  .pied { padding-inline: 40px; }
}

@media (max-width: 760px) {
  .auth__form, .hero--accueil, .bloc, .lecture, .doc, .auth__cote,
  .installation, .duo .panneau, .formulaire, .issue, .vide,
  .issue--echec, .notif, .processeur, .carte-coches, .role, .dedie .offre,
  .prose__encadre, .essentiel, .solde, .simulateur, .carte-jeu,
  .formulaire--carte, .svc, .modale__carte, .etape-c, .espace__principal {
    padding-inline: 20px;
  }

  /* Le pied de page : 72 px de chaque côté ne laissaient que 184 px au
     contenu, et son bouton d’appel en débordait de 48 px. */
  .pied { padding: 36px 20px 28px; border-radius: 32px; }
  .pied__haut { gap: 20px; }
  .pied__haut .btn { width: 100%; justify-content: center; }
  .pied__bas { gap: 10px; margin-top: 28px; }

  .question p { padding-inline: 0; }
  .jeu__prix { padding-inline: 18px; }
  .hero, .panneau, .hero--seul { padding-inline: 20px; }

  /* Les hauteurs dessinées pour un grand écran ne valent plus rien. */
  .hero--accueil { min-height: 0; padding-block: 36px 48px; }
  .hero, .panneau, .erreur { min-height: 0; }

  /* Les raccourcis chevauchent le hero de 96 px dans la maquette : sur un
     téléphone ils recouvraient le second bouton. Ils se posent dessous. */
  .raccourcis { margin: 16px 0 0; }
}

/* ── Les rangées en flex passent à la ligne ─────────────────────────────
   Une rangée dessinée pour 1440 px pousse son dernier élément hors de
   l’écran : la bande d’essai poussait son bouton à 580 px, la pastille
   d’une rangée sortait du cadre. Rien ne tient sur une ligne par
   principe ; tout se replie. */
@media (max-width: 760px) {
  .essai-bande, .rangee, .tete__ligne, .carte__tete, .ec-tete,
  .fil, .pas, .onglets, .ec-onglets, .filtres, .barre__droite,
  .tunnel__pied, .recap-ligne, .annonce .c, .jeu__tete, .offre__tete,
  .formulaire__bas, .pied__bas, .delais--pile li {
    flex-wrap: wrap;
  }

  /* Le bas d’un formulaire : la mention légale et le bouton d’envoi se
     tenaient sur une ligne, à 32 px d’écart. */
  .formulaire__bas { gap: 14px; }
  .formulaire__bas .btn { width: 100%; justify-content: center; }

  /* Un grand chiffre à largeur plancher ne tient pas dans une pastille. */
  .delais--pile b { min-width: 0; }
  .pied__bas span { display: block; }

  .essai-bande { padding: 16px 20px; gap: 12px; }
  .essai-bande .btn { margin-left: 0; width: 100%; justify-content: center; }
  .rangee { padding: 12px 16px; gap: 12px; border-radius: 24px; }

  /* Un bouton seul sur sa ligne vaut mieux qu’un bouton coupé. */
  .actions { width: 100%; }
  .actions > .btn { flex: 1 1 100%; justify-content: center; }
  .hero .actions > .btn, .panneau .actions > .btn { flex: 1 1 auto; }

  /* Un libellé long tenait sur une ligne par principe, et faisait un
     bouton de 438 px dans un cadre de 288. Il se plie. */
  .btn {
    white-space: normal; text-align: center;
    height: auto; min-height: 48px; padding: 10px 20px;
    max-width: 100%;
  }
  .btn--petit { min-height: 44px; padding: 8px 16px; }
}