/* Alertes de la commune — invitation PanneauPocket, formulaire d'inscription
   et panneau modal. Chargé sur toutes les pages : le bouton est dans l'en-tête,
   la modale est donc rendue partout. Ces règles vivaient dans home.css ; les
   dupliquer dans muzy.css aurait créé deux vérités à maintenir. */
    .pp-invite { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-top: 26px; padding: 20px 22px; background: #fff; border: 1px solid var(--sable); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
    .pp-invite-ico { width: 46px; height: 46px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--marine); color: #fff; }
    .pp-invite-ico svg { width: 22px; height: 22px; stroke-width: 1.6; }
    .pp-invite strong { display: block; font-family: 'Fraunces', serif; font-size: 1.14rem; font-weight: 600; color: var(--marine); }
    .pp-invite p { margin-top: 6px; font-size: 0.9rem; color: var(--gris); max-width: 68ch; }
    .pp-installer { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
    .pp-installer .btn { padding: 13px 22px; }
    .pp-installer .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    /* La flèche des autres boutons glisse au survol ; ici l'icône est un logo,
       elle doit rester en place. */
    .pp-installer .btn:hover svg { transform: none; }
    .pp-sans-app { margin-top: 14px; font-size: 0.86rem; color: var(--gris); }
    .pp-sans-app a { color: var(--bleu-lien); font-weight: 600; border-bottom: 1px solid rgba(44,67,196,0.25); }
    .pp-sans-app a:hover { border-bottom-color: currentColor; }

    .sms-form-full { display: block; padding: 22px 24px; }
    .sms-form-title { font-family: 'Fraunces', serif; font-size: 1.14rem; font-weight: 600; color: var(--marine); margin-bottom: 16px; }
    .sms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    /* Les champs d'une même rangée s'alignent par le bas : sans cela, une
       mention explicative sous un intitulé décale son champ par rapport au
       champ voisin. */
    .sms-fields label { display: flex; flex-direction: column; gap: 6px; }
    .sms-fields label input { margin-top: auto; }
    .sms-fields label span { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--marine-55); }
    .sms-fields label small { margin: -2px 0 2px; font-size: 0.74rem; line-height: 1.4; color: var(--marine-55); text-transform: none; letter-spacing: 0; }
    .sms-form-full input[type="text"], .sms-form-full input[type="tel"], .sms-form-full input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid var(--sable); border-radius: var(--r-sm); background: var(--pierre); color: var(--marine); font-family: inherit; font-size: 0.95rem; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); }
    .sms-form-full input:focus { outline: none; border-color: var(--marine); background: #fff; }
    .sms-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-top: 18px; font-size: 0.8rem; line-height: 1.5; color: var(--gris); }
    .sms-consent input { margin-top: 3px; accent-color: var(--accent); }
    .sms-consent a { color: var(--bleu-lien); text-decoration: underline; }
    /* Le bouton ne peut pas hériter de « .sms-form button », resté dans
       home.css : la modale existe aussi sur les pages intérieures. */
    .sms-form-full button { width: 100%; margin-top: 18px; background: var(--accent); color: #fff; border: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.92rem; padding: 14px 28px; border-radius: var(--r-sm); transition: background 0.3s ease; }
    .sms-form-full button:hover { background: var(--accent-fonce); }
    .sms-form-full button[disabled] { opacity: 0.55; cursor: progress; }
    .sms-feedback { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 0.86rem; }
    .sms-feedback.is-ok { background: #E8F3EC; border: 1px solid #A7CDB6; color: #1C5A34; }
    .sms-feedback.is-error { background: #FBEAEC; border: 1px solid #E8A9B1; color: var(--accent-fonce); }

    @media (max-width: 720px) {
      .sms-fields { grid-template-columns: 1fr; }
      .pp-invite { grid-template-columns: 1fr; }
    }

    .modale { border: none; padding: 0; background: transparent; width: min(620px, 92vw); max-width: none; max-height: 88vh; margin: auto; color: var(--texte); }
    .modale::backdrop { background: rgba(4,19,31,0.62); backdrop-filter: blur(3px); }
    .modale-boite { position: relative; background: var(--blanc); border-radius: var(--r-lg); padding: clamp(26px, 4vw, 42px); box-shadow: var(--shadow-lg); max-height: 88vh; overflow-y: auto; }
    .modale-fermer { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sable); border-radius: var(--r-sm); background: var(--pierre); color: var(--marine); cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
    .modale-fermer:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
    .modale-fermer svg { width: 18px; height: 18px; }
    .modale h2 { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 3.4vw, 2.1rem); font-weight: 600; line-height: 1.1; color: var(--marine); margin-top: 12px; }
    .modale h2 em { font-style: italic; color: var(--accent); }
    .modale-chapo { margin-top: 12px; color: var(--gris); font-size: 0.96rem; }
    .modale .pp-invite { margin-top: 22px; }
    .modale .sms-form-full { margin-top: 20px; padding: 0; border: none; box-shadow: none; background: none; }
    .modale-mention { display: block; margin-top: 14px; color: var(--marine-55); font-size: 0.78rem; }
    @media (prefers-reduced-motion: no-preference) {
      .modale[open] { animation: modale-entree 0.28s var(--ease); }
      @keyframes modale-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    }

    /* ---------- Bandeau d'alerte (dans l'en-tête) ---------- */
    .bandeau-alerte { background: var(--accent); color: #fff; }
    .bandeau-alerte[hidden] { display: none; }
    .bandeau-alerte-inner { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 10px clamp(18px, 4vw, 44px); }
    .bandeau-alerte-ico { display: flex; flex-shrink: 0; }
    .bandeau-alerte-ico svg { width: 20px; height: 20px; }
    .bandeau-alerte p { flex: 1; margin: 0; font-size: 0.88rem; line-height: 1.4; min-width: 0; }
    .bandeau-alerte strong { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem; margin-right: 8px; }
    .bandeau-alerte a { flex-shrink: 0; color: #fff; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: underline; text-underline-offset: 3px; }
    .bandeau-alerte a:hover { text-decoration-thickness: 2px; }
    .bandeau-alerte-fermer { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: var(--r-xs); background: rgba(255,255,255,0.16); color: #fff; cursor: pointer; transition: background 0.25s var(--ease); }
    .bandeau-alerte-fermer:hover { background: rgba(255,255,255,0.32); }
    .bandeau-alerte-fermer svg { width: 15px; height: 15px; }
    @media (max-width: 640px) {
      .bandeau-alerte-inner { flex-wrap: wrap; gap: 8px 12px; }
      .bandeau-alerte p { flex: 1 1 100%; order: 2; }
      .bandeau-alerte a { order: 3; }
    }

    /* Trois boutons dans l'en-tête, c'est un de plus que la maquette d'origine.
       Entre 900 px (bascule en menu) et 1180 px, la navigation complète et les
       deux libellés ne tiennent plus : « Ma commune » passait sur deux lignes.
       Le bouton d'alerte garde alors son seul pictogramme. */
    @media (max-width: 1180px) {
      .icon-btn-alerte .lbl { display: none; }
      .icon-btn-alerte { padding: 10px 13px; }
    }

    /* ---------- Mention de provenance PanneauPocket ---------- */
    .pp-source { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; color: var(--gris); font-size: 0.82rem; line-height: 1.5; }
    .pp-source { min-width: 0; }
    .pp-source > div { min-width: 0; }
    .pp-source-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--pierre); color: var(--marine); box-shadow: inset 0 0 0 1px var(--marine-10); flex-shrink: 0; }
    .pp-source-ico svg { width: 15px; height: 15px; stroke-width: 1.6; }
    .pp-source-texte { margin: 0; }
    /* « auto-fit » et non deux colonnes fixes : dans la colonne resserrée du
       fil, deux pastilles côte à côte réclamaient 180 px pour 178 disponibles,
       et « Google Play » se faisait couper. Elles se mettent l'une sous l'autre
       quand la place manque. */
    /* Dans la colonne étroite du fil, les pastilles vont d'un bord à l'autre :
       bornées à 148 px elles laissaient un vide à droite, et la colonne
       semblait mal alignée alors que c'était son contenu qui l'était. Sur les
       pages larges, « pp-source-large » leur rend leur taille naturelle. */
    .pp-source-stores { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      justify-content: stretch; gap: 8px; margin-top: 12px; }
    .pp-source-web { grid-column: 1 / -1; }
    .pp-source-stores a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px;
      border-radius: var(--r-sm); background: var(--marine); color: #fff;
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0; text-align: center; min-width: 0;
      transition: background 0.25s var(--ease); }
    .pp-source-stores a:hover { background: var(--accent); }
    .pp-source-stores svg { width: 13px; height: 13px; flex-shrink: 0; }
    @media (pointer: coarse), (max-width: 900px) {
      .pp-source-stores a { padding: 11px 10px; font-size: 0.74rem; }
    }
    /* Sur l'archive, la largeur ne manque pas : les pastilles reprennent leur
       taille naturelle plutôt que de s'étirer sur la moitié de la page. */
    .pp-source-large .pp-source-stores { grid-template-columns: repeat(2, minmax(0, 148px)); }
    .pp-source-web { margin-top: 10px; }
    .pp-source-web a { color: var(--bleu-lien); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
    .pp-source-compact { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--marine-10); }
    .pp-source-large { margin-top: 22px; max-width: 62ch; }