/* =========================================================
   ADAPTATION AUX ÉCRANS
   Chargé en dernier : ce fichier n'ajoute que des points de rupture.
   Principe : sur téléphone, les cartes passent DEUX PAR DEUX au lieu
   de s'empiler — la page reste courte et se parcourt au pouce.
   ========================================================= */

/* Les ancres ne doivent pas atterrir sous l'en-tête collant */
[id] { scroll-margin-top: 92px; }

/* ═══════════ TABLETTE PAYSAGE ET PETIT PORTABLE ═══════════
   Entre 981 et 1100 px la navigation complète tient encore, mais de
   justesse : on resserre plutôt que de la faire passer à la ligne. */
@media (max-width: 1100px) {
  .entete__nav a { font-size: .82rem; padding: .4rem .55rem; }
  .entete__in { gap: .6rem; }
  .entete__outils .btn span,
  .entete__outils .btn { font-size: .78rem; }
  .pv-jalon { font-size: .72rem; }
  .eq-chiffres { gap: .5rem; }
  .ccas-nav a { padding: .5rem .55rem; font-size: .82rem; }
}

/* ═══════════ TABLETTE ET EN DESSOUS ═══════════ */
@media (max-width: 980px) {

  /* L'en-tête garde sa navigation : elle passe en rangée défilante */
  .entete__in { flex-wrap: wrap; padding-bottom: .1rem; }
  .entete__nav {
    display: flex; order: 3; width: 100%;
    flex-wrap: nowrap; overflow-x: auto; gap: .35rem;
    margin: 0 0 .5rem; padding-bottom: .15rem;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .entete__nav::-webkit-scrollbar { display: none; }
  .entete__nav a {
    white-space: nowrap; flex: none;
    background: var(--bg-alt); font-size: .82rem; padding: .42rem .8rem;
  }
  .entete__outils { margin-left: auto; }

  .duo { grid-template-columns: 1fr !important; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
}

/* ═══════════ TÉLÉPHONE ═══════════ */
@media (max-width: 640px) {

  :root { --sp-6: 2.6rem; --sp-7: 3.4rem; }
  .contenu { width: calc(100% - 1.7rem); }
  .section { padding: 2.3rem 0; }
  .section__tete { margin-bottom: 1rem; gap: .5rem; }
  .section__tete h2 { font-size: 1.85rem; }
  .section__tete .lien-tout { font-size: .8rem; }

  /* ---- En-tête ---- */
  .entete__in { min-height: 58px; gap: .5rem; }
  .entete__logo img { height: 44px; border-radius: 8px; }
  .icone-btn { width: 38px; height: 38px; }
  .bandeau-alerte { font-size: .8rem; }
  .bandeau-alerte .contenu { gap: .45rem; padding: .5rem 0; }
  .bandeau-alerte a { margin-left: 0; }

  /* ---- Héro ---- */
  .hero { padding: 2.1rem 0 2.4rem; }
  .hero h1 { font-size: clamp(2.3rem, 12vw, 3.2rem); }
  .hero .accroche { font-size: .92rem; }
  .recherche { margin: 1.4rem auto .9rem; padding: .35rem .35rem .35rem 1rem; }
  .recherche input { font-size: 1rem; padding: .5rem 0; }
  .recherche .btn { padding: .5rem .85rem; }
  .suggestions span { display: none; }

  /* ---- LES CARTES, DEUX PAR DEUX ---- */
  .grille-besoins,
  .grille-rapide,
  .grille-lieux { grid-template-columns: 1fr 1fr; gap: .6rem; }

  .besoin { padding: .95rem .85rem 1.05rem; border-radius: 16px; }
  .besoin__ico { width: 38px; height: 38px; border-radius: 11px; margin-bottom: .3rem; }
  .besoin__ico svg { width: 19px; height: 19px; }
  .besoin h3 { font-size: 1.18rem; line-height: 1; }
  .besoin p { font-size: .78rem; line-height: 1.35; }
  .besoin__ex { display: none; }          /* les exemples vivent sur la page du besoin */

  .rapide { padding: .95rem .5rem; font-size: .8rem; border-radius: 16px; gap: .35rem; }
  .rapide .ic { width: 38px; height: 38px; }
  .rapide .ic svg { width: 18px; height: 18px; }
  .rapide small { font-size: .68rem; }

  .lieu { min-height: 148px; padding: .8rem; border-radius: 16px; }
  .lieu h3 { font-size: 1.15rem; }
  .lieu small { font-size: .62rem; letter-spacing: .07em; }

  /* ---- Actualités : vignette à gauche, texte à droite ---- */
  .grille-actus { grid-template-columns: 1fr; gap: .6rem; }
  .actu { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; }
  .actu__img { aspect-ratio: auto; height: 100%; min-height: 96px; }
  .actu__img .tag { left: .35rem; top: .35rem; font-size: .58rem; padding: .18rem .45rem; }
  .actu__txt { padding: .7rem .85rem; }
  .actu__txt h3 { font-size: 1.05rem; }
  .actu__txt p { font-size: .78rem; }
  .actu__date { font-size: .64rem; }

  /* ---- Agenda ---- */
  .event { padding: .6rem .7rem; gap: .65rem; }
  .event__date { width: 44px; padding: .35rem 0; }
  .event__date b { font-size: 1.25rem; }

  /* ---- Réseaux sociaux ---- */
  .portail-social { gap: .4rem; margin-top: 1.1rem; padding-top: 1rem; }
  .reseau { font-size: .72rem; padding: .35rem .7rem .35rem .35rem; }
  .reseau .rond { width: 24px; height: 24px; }

  /* ---- Mot du maire ---- */
  .section .duo img { max-width: 220px; margin-inline: auto; }

  /* ---- Pied ---- */
  .pied { padding: 2.4rem 0 1.4rem; }
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
  .pied__grille > :first-child { grid-column: 1 / -1; }
  .pied__logo { height: 68px; }
  .pied h4 { font-size: 1.02rem; }
  .pied ul { font-size: .8rem; }
  .pied__bas { flex-direction: column; gap: .5rem; }
  .pied__bas .droite { margin-left: 0; flex-wrap: wrap; gap: .7rem; }

  /* ---- Espace CCAS ---- */
  .ccas-entete { padding: 1.8rem 0 2.6rem; }
  .ccas-marque { gap: .8rem; margin: 1.2rem 0 .8rem; }
  .ccas-sceau { width: 58px; height: 58px; border-radius: 16px; font-size: 1.35rem; }
  .ccas-sites { grid-template-columns: 1fr; gap: .5rem; margin-top: 1.3rem; }
  .ccas-site { padding: .8rem .9rem; }
  .demarche { grid-template-columns: auto 1fr; gap: .7rem; padding: .85rem .9rem; }
  .demarche .marq { grid-column: 2; justify-self: start; }

  /* ---- Portail ---- */
  .carte-choix { border-radius: 26px; padding: 1.3rem 1.1rem 1.5rem; }
  .carte-choix .logo-mini { width: 88px; margin-bottom: .7rem; }
  .portail-question { font-size: clamp(1.7rem, 8.5vw, 2.3rem); }
  .portail-sous { font-size: .84rem; margin-bottom: 1.2rem; }
  .porte { padding: 1.05rem 1.1rem 1.15rem; border-radius: 20px; }
  .porte h2 { font-size: 1.7rem; }
  .porte p { font-size: .82rem; }
  .porte .fleche { width: 30px; height: 30px; right: .8rem; top: .9rem; }
  .portail-centre { padding-top: 2.2rem; padding-bottom: 5rem; }
  .pastille--anis { width: 110px; height: 110px; top: -34px; left: -28px; }
  .pastille--orange { width: 78px; height: 78px; right: -24px; }
  .portail-pied a { font-size: .68rem; padding: .35rem .75rem; }

  /* ---- Loader ---- */
  .medaillon { width: clamp(126px, 34vw, 168px); }
  .signature { width: clamp(180px, 52vw, 240px); }
  .loader__bulle { max-width: 74vw; left: 74%; }
  .loader__bulle b { font-size: .92rem; }
  .loader__masc { width: 92px; bottom: 22vh; left: 1rem; }

  /* ---- Visite guidée ----
     Le gros du cadrage mobile vit dans css/visite.css, au plus près
     du moteur. Il ne reste ici que ce qui dépend de la grille du site. */
  .pv-fin__actions { flex-direction: column; }

  /* ---- Assistant ---- */
  /* 100vw compte la barre de défilement : le panneau dépassait d'une
     quinzaine de pixels et provoquait un défilement horizontal. On
     l'ancre par ses deux bords. */
  .tg { left: .7rem; right: .7rem; align-items: stretch; }
  .tg__panneau { width: auto; max-height: 62svh; }
  .tg__bouton { align-self: flex-end; }
}

/* ═══════════ TRÈS PETITS ÉCRANS ═══════════ */
@media (max-width: 380px) {
  .grille-rapide { grid-template-columns: 1fr 1fr; }
  .besoin h3 { font-size: 1.05rem; }
  .rapide { font-size: .74rem; }
  .actu { grid-template-columns: 92px 1fr; }
}

/* ═══════════ ÉCRANS BAS (paysage sur téléphone) ═══════════ */
@media (max-height: 560px) and (orientation: landscape) {
  .loader__masc, .loader__bulle { display: none; }
  .portail-centre { padding-block: 1.2rem 3rem; }
  .carte-choix .logo-mini { width: 70px; margin-bottom: .4rem; }
  /* Paysage sur téléphone : la fiche mangerait tout l'écran. */
  .pv-fiche { max-height: 64svh; bottom: 2.6rem; }
  .pv-jalons { padding-top: .8rem; }
}

/* ═══════════ CORRECTIONS DE TÉLÉPHONE ═══════════
   Relevées en regardant le site à 375 px de large. */
@media (max-width: 640px) {
  /* Les ancres doivent tomber sous un en-tête devenu plus bas. */
  [id] { scroll-margin-top: 76px; }

  /* Un enfant de grille qui porte du texte doit pouvoir le replier.
     Sans min-width:0, un mot long élargit sa colonne et la carte
     dépasse du cadre — c'est ce qui coupait « Un coup de main » et
     « Sortir & bouger » sur le bord droit. */
  .grille-besoins > *, .grille-rapide > *, .grille-lieux > *,
  .grille-actus > *, .fx-cartes > *, .pg-cartes > *, .ki-grille > *,
  .ccas-grille > *, .rub-cartes > * { min-width: 0; }
  .besoin, .rapide, .lieu, .fx-carte, .pg-carte, .ki-carte { overflow-wrap: anywhere; }

  /* L'actualité : vignette à gauche, texte à droite. Le texte doit
     pouvoir se replier, sinon il pousse l'image hors du cadre. */
  .actu { grid-template-columns: 104px minmax(0, 1fr); }
  .actu__txt { min-width: 0; }
  .actu__txt h3 { overflow-wrap: anywhere; }
}

/* ═══════════ PETIT TÉLÉPHONE ═══════════
   À 390 px, deux colonnes de cartes à puces deviennent deux colonnes
   de mots coupés. On les empile. */
@media (max-width: 430px) {
  .grille-besoins, .grille-lieux { grid-template-columns: 1fr; }
  .besoin__ex { display: block; }
  .fx-cartes, .pg-cartes, .ki-grille, .ccas-grille { grid-template-columns: 1fr; }
  .fx-promesses, .fx-reperes { grid-template-columns: 1fr; }
  .pg-tete { border-radius: 16px; }
  .ac-arch__l-l { grid-template-columns: 1fr; }
}