/* =========================================================================
   Ville&Gé — reprise des écrans d'avant la refonte
   Refonte « Concept 1 validé », 08/09/2026.

   Cinquante-quatre écrans ont été écrits avant la refonte, avec leurs propres
   classes. Les réécrire d'un bloc aurait laissé l'application incohérente
   pendant des jours ; les laisser en l'état aurait donné une moitié d'interface
   à l'ancienne charte et l'autre à la nouvelle.

   Cette feuille fait le pont : elle REDESSINE les anciennes classes avec la
   palette et les formes du concept. Aucun écran n'a été touché, et tous
   changent d'apparence ensemble. Elle se vide au fur et à mesure que les vues
   migrent vers les composants du concept ; le jour où elle est vide, elle
   disparaît.

   Elle se charge APRÈS concept.css et n'en redéfinit aucun sélecteur.
   ========================================================================= */

/* ---------------------------------------------------------------- structure */

.side-legal{padding:0 18px 10px;font-size:11.5px;opacity:.62}
.side-legal a{color:#cfe0f0}

.sidebar-commune{margin:2px 18px 14px;padding:11px 13px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}
.sidebar-commune small{display:block;font-size:10.5px;letter-spacing:1.1px;
  text-transform:uppercase;color:#9fbdd8}
.sidebar-commune b{display:block;font-size:13.5px;color:#fff;margin-top:2px;line-height:1.3}

/* La zone de contenu des anciennes vues. */
.wrap{display:flex;flex-direction:column;gap:20px}

/* ------------------------------------------------------------- titres, kick */

.kick{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange)}
.lbl{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:#8fb0cd;padding:14px 20px 5px}

/* --------------------------------------------------------------- indicateurs */

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  box-shadow:var(--shadow);display:block;text-decoration:none;color:inherit}
.kpi .n{font-size:27px;font-weight:800;color:var(--navy);line-height:1.15;
  font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:3px}
a.kpi:hover{border-color:var(--blue)}

/* ------------------------------------------------------------------- cartes */

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.mcard,.box,.formcard,.tablecard,.panel{background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow)}
.mcard,.box,.formcard{padding:20px 22px}
.tablecard{padding:0;overflow:hidden}
.mcard .t,.box .t{font-weight:700;color:var(--navy);font-size:15px}
.mcard .d,.box .d,.hint,.note{font-size:13px;color:var(--muted);line-height:1.55}

/* ------------------------------------------------------------------ tableaux */

table.dt{width:100%;border-collapse:collapse;font-size:13.5px}
table.dt th{background:#f2f6fa;color:var(--navy);font-weight:700;text-align:left;
  padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dt td{padding:11px 14px;border-bottom:1px solid #eef3f7;vertical-align:top}
table.dt tr:last-child td{border-bottom:none}
table.dt tbody tr:hover{background:#f7fafd}
.data{color:var(--navy);font-variant-numeric:tabular-nums}

/* ------------------------------------------------- barres d'outils, filtres */

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.filters,.subtabs,.tabs{display:flex;gap:8px;flex-wrap:wrap}
.filters a,.subtabs a{padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;
  color:var(--muted);background:#fff;border:1px solid var(--line);text-decoration:none}
.filters a.on,.subtabs a.on{background:var(--navy);border-color:var(--navy);color:#fff}
.filters a:hover,.subtabs a:hover{border-color:var(--blue);color:var(--blue)}
.filters a.on:hover,.subtabs a.on:hover{color:#fff}

/* ------------------------------------------------------------------ boutons */

.btn,.btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:8px;border:1px solid var(--blue);background:var(--navy);color:#fff;
  font-weight:750;text-decoration:none;cursor:pointer;box-shadow:0 4px 12px rgba(3,42,77,.12)}
.btn{height:48px;padding:0 20px;font-size:15px}
.btn-sm{height:38px;padding:0 15px;font-size:13.5px}
.btn:hover,.btn-sm:hover{filter:brightness(1.08)}
.btn-ghost{background:#fff;color:var(--blue);box-shadow:none}
.ic-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--blue);
  text-decoration:none;cursor:pointer}
.ic-btn:hover{border-color:var(--blue);background:#f2f7fc}
.act{display:flex;gap:6px;align-items:center}

/* ------------------------------------------------------------- formulaires */

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#3a5570}
.field input,.field select,.field textarea{height:44px;padding:0 13px;border:1px solid var(--line);
  border-radius:8px;background:#fbfdff;color:var(--navy);font:inherit;font-size:14.5px}
.field textarea{height:auto;padding:11px 13px;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  background:#fff;box-shadow:0 0 0 3px rgba(0,83,167,.12)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 16px}
.formactions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}

/* ------------------------------------------------------- messages et états */

.flash{background:#e9f6ef;border-left:4px solid var(--green);color:#0a5c31;
  padding:12px 16px;border-radius:0 8px 8px 0;font-size:14px}
.alert,.err{background:#fdecec;border-left:4px solid var(--red);color:#8a1a1a;
  padding:12px 16px;border-radius:0 8px 8px 0;font-size:14px}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:14px}

/* Pastilles d'état : la couleur ne suffit jamais, le libellé reste lisible. */
.st,.badge,.tag{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;
  font-weight:700;background:#eef3f8;color:#3a5570;white-space:nowrap}
.st.traite,.st.termine,.st.payee,.st.accorde,.st.accordee,.st.approuve,.st.signe,
.st.versee,.st.actif,.st.titulaire,.st.recette,.st.paye{background:#e3f5ea;color:#0a6b36}
.st.en_cours,.st.instruction,.st.demandee,.st.planifie,.st.a_traiter,.st.en_attente,
.st.contractuel,.st.stagiaire{background:#fdf1e0;color:#8a4f06}
.st.en_retard,.st.refuse,.st.refusee,.st.decede,.st.depense,.st.echoue{background:#fdecec;color:#8a1a1a}
.st.archive,.st.non_requise,.st.off,.st.parti,.st.annule{background:#eef3f8;color:#5c6f85}
.b-emer{background:#e3f5ea;color:#0a6b36}
.b-bleu{background:#e7effa;color:#0b3d78}
.b-ocre{background:#fdf1e0;color:#8a4f06}

/* --------------------------------------------------------------- divers hérité */

.pager{display:flex;gap:6px;justify-content:center;margin-top:6px;font-size:13.5px}
.search-i{position:relative}
.who{display:flex;align-items:center;gap:11px}
.av{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:13px}
.legal-links{display:flex;gap:10px;flex-wrap:wrap}
.legal-links a{font-size:11.5px}

/* ------------------------------------------------ page « Design system » */

.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.swatches>div{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.swatches i{display:block;height:56px}
.swatches b{display:block;padding:9px 12px 0;font-size:13px;color:var(--navy)}
.swatches code{display:block;padding:0 12px;font-size:12px;color:var(--muted)}
.swatches small{display:block;padding:4px 12px 11px;font-size:11.5px;color:var(--muted);line-height:1.4}

.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.design-grid>span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy)}
.design-grid small{font-size:10.5px;color:var(--muted);text-align:center;word-break:break-word}

/* ------------------------------------------- tableau de bord (planche 17) */

.dashboard-panels{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:18px;align-items:start}

/* --- indicateurs du tableau de bord ---------------------------------------
   concept.css pose .kpi en tuile colorée flex de 122 px de haut ; la section
   « indicateurs » de cette feuille la repose en display:block pour les anciens
   écrans. Les deux se croisaient sur le tableau de bord : le contenu s'empilait
   dans une hauteur figée et le libellé sortait de la tuile par le bas.

   La règle ci-dessous ne vaut QUE dans .kpi-row et rétablit une tuile compacte.
   Elle ne touche pas au fond : les couleurs .kpi.blue/.teal/.orange/.green de
   concept.css restent seules maîtres de la palette.

   Disposition en flex, jamais en grid auto-fit : six tuiles tiennent sur une
   ligne, et quatre s'y répartissent également au lieu de laisser un vide. */

.kpi-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.kpi-row .kpi{flex:1 1 calc((100% - 60px) / 6);min-width:148px;
  height:auto;min-height:82px;display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:0;border-radius:11px;color:#fff;text-decoration:none}
.kpi-row .kpi .icon-box{width:38px;height:38px;border-radius:9px;flex:none;
  background:rgba(255,255,255,.18);color:#fff}
.kpi-row .kpi > span{display:flex;flex-direction:column;min-width:0}
.kpi-row .kpi strong{font-size:23px;font-weight:800;line-height:1.1;color:#fff;
  font-variant-numeric:tabular-nums}
.kpi-row .kpi small{font-size:11.5px;line-height:1.3;color:rgba(255,255,255,.92)}
.kpi-row .kpi em{font-style:normal;font-weight:700;font-size:11px;margin-top:4px}
.kpi-row a.kpi:hover{filter:brightness(1.08)}

/* Contours des cartes du tableau de bord : le trait de --line se perdait sur
   le fond de page. Un cadre plus franc, sans changer la forme. */
.dashboard-panels .panel{border:1.5px solid #9db6cc;box-shadow:0 4px 14px rgba(3,42,77,.12)}

/* Messagerie interne : une carte de formulaire large de toute la page donne des
   champs de 1 500 px pour saisir un sujet. Largeur de lecture, comme ailleurs. */
.messagerie-form{max-width:720px}


.entry-row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;
  padding:12px 4px;border-bottom:1px solid #eef3f7;text-decoration:none;color:inherit}
.entry-row:last-child{border-bottom:none}
.entry-row:hover{background:#f7fafd}
.entry-row b{display:block;font-size:14px;color:var(--navy)}
.entry-row small{font-size:11.5px;color:var(--muted)}
.entry-row .icon-box{width:34px;height:34px}

.map-image{width:100%;border-radius:9px;display:block}
.map-legend{display:flex;gap:14px;flex-wrap:wrap;padding-top:10px;font-size:11.5px;color:var(--muted)}
.map-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}

.mini-news{display:flex;gap:11px;align-items:center;padding:10px 4px;border-bottom:1px solid #eef3f7}
.mini-news:last-child{border-bottom:none}
.mini-news b{display:block;font-size:13.5px;color:var(--navy)}
.mini-news small{font-size:11.5px;color:var(--muted)}

.city-banner{position:relative;min-height:150px;border-radius:12px;overflow:hidden;
  background:linear-gradient(90deg,rgba(6,42,77,.94) 0%,rgba(6,42,77,.72) 45%,rgba(6,42,77,.18) 100%),
             url('/images/concept/city-waterfront-banner.jpg') center/cover;
  display:flex;align-items:center;padding:0 40px}
.city-banner b{display:block;color:#fff;font-size:22px;line-height:1.35}

/* ---------------------------------------------- barre latérale : liens réels

   Le prototype naviguait par <button> : tout le style du menu ne visait que ce
   sélecteur. L'application pose de vrais <a> — une navigation qui fonctionne
   sans JavaScript, s'ouvre dans un onglet et se donne au clavier. Sans ces
   règles, les libellés héritent du bleu des liens et sortent BLEU SUR BLEU
   NUIT : illisibles. Vu en capture, corrigé aussitôt.
   ------------------------------------------------------------------------ */

.sidebar nav a{height:52px;border:0;background:transparent;border-radius:7px;color:#fff;
  display:flex;align-items:center;gap:13px;padding:0 14px;font-weight:650;text-align:left;
  font-size:14px;text-decoration:none;line-height:1.25}
.sidebar nav a span{flex:1}
.sidebar nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.sidebar nav a.active{background:#fff;color:var(--navy)}
.sidebar nav a.active .nav-caret{color:var(--navy)}
.sidebar nav a svg{flex:none}
.sidebar nav .nav-caret{opacity:.65}

.sidebar>a{text-decoration:none}
.sidebar-user b{font-size:13.5px;color:#fff;line-height:1.3}
.sidebar-user small{font-size:11.5px}
.sidebar-user button{border:0;background:transparent;color:#b6cadb;padding:0;display:flex}
.sidebar-user button:hover{color:#fff}

/* Les mentions légales tiennent sur UNE ligne discrète, au-dessus du compte :
   empilées, trois liens mangeaient cent pixels de hauteur dans le menu. */
.side-legal{margin-top:auto;padding:14px 14px 4px}
.side-legal .legal-links{flex-direction:row;align-items:center;gap:10px;line-height:1.2}
.side-legal br{display:none}
.side-legal a{color:#9fbdd8;font-size:11px;text-decoration:none}
.side-legal a:hover{color:#fff;text-decoration:underline}
/* --- la barre latérale s'adapte à la hauteur de l'écran ------------------
   Elle mesurait 1 063 px de contenu pour une hauteur figée à 100vh : sur un
   écran de 900 px, deux entrées ET le bloc du compte — donc le bouton « Se
   déconnecter » — tombaient hors de l'écran, sans rien pour y accéder. Sur
   700 px, six entrées manquaient. Le menu ne s'était pas allongé d'un coup :
   il grandit à chaque module ouvert, et il grandira encore.

   Trois zones, et une seule qui bouge : le logo et l'identité de la
   collectivité restent en tête, le compte reste collé en bas — on doit
   pouvoir se déconnecter sans chercher — et SEULE la liste des entrées
   défile, dans la place qui lui reste. */

.sidebar{height:100dvh;overflow:hidden}
.sidebar>a:first-child,.sidebar-commune{flex:none}

.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
.sidebar nav::-webkit-scrollbar{width:6px}
.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}

/* Le compte ne défile pas avec les entrées : il ferme la barre, séparé par un
   trait, quelle que soit la hauteur de l'écran. */
.sidebar-user{flex:none;margin-top:0;border-top:1px solid rgba(255,255,255,.25);
  padding-top:14px;margin-top:12px}

/* (règle d'origine conservée plus bas pour mémoire) */

/* La barre supérieure porte aussi de vrais liens. */
.app-top a{color:var(--navy);display:inline-flex;align-items:center}
.app-top a:hover{color:var(--blue)}

/* Dans une liste, le lien porte la ligne entière : ni bleu, ni souligné. */
.request-list a,.request-list a b,.request-list a small{text-decoration:none}
.request-list a b{color:var(--navy)}

/* ----------------------------------------- espace administré (D3, Concept 1)

   Le pack dessine la conversation pour un <input> d'une ligne. Un administré
   qui explique une situation à sa mairie écrit un paragraphe, pas une ligne :
   d'où le <textarea>, aligné sur les mêmes valeurs.
   ------------------------------------------------------------------------ */

.chat-input textarea{flex:1;border:1px solid var(--line);border-radius:8px;padding:13px;
  font:inherit;font-size:14.5px;color:var(--navy);background:#fbfdff;resize:vertical;min-height:82px}
.chat-input textarea:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px rgba(0,83,167,.12)}
.chat-input{align-items:flex-end;padding-top:14px;border-top:1px solid var(--line)}
.chat-input .button{height:82px;white-space:nowrap}
.chat .bubble b{display:block;font-size:12.5px;margin-bottom:5px;opacity:.85}
.chat .bubble p{margin:0;font-size:14.5px;line-height:1.5}
.chat .bubble time{display:block;font-size:11px;margin-top:7px;opacity:.72}

/* La tuile de démarche porte un lien : ni bleu, ni souligné. */
.service-tile{text-decoration:none;color:var(--navy)}
.service-tile:hover{border-color:var(--blue)}
.service-tile b{display:block;font-size:14.5px;margin-bottom:3px}
.service-tile small{display:block;font-size:12px;color:var(--muted);line-height:1.45}
.service-tile small.delai{margin-top:6px;color:var(--blue);font-weight:700}

/* Compteur de messages non lus, dans le menu. */
.pastille-nb{font-style:normal;background:var(--orange);color:#fff;font-size:11px;font-weight:800;
  min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 6px}
.sidebar nav a.active .pastille-nb{background:var(--orange)}

/* ------------------------------------------------- vitrine publique (D4)

   Le pack navigue par <button> ; l'application pose de vrais liens. Ces règles
   reprennent EXACTEMENT les valeurs du pack, appliquées à <a> — sans quoi tout
   sortait bleu et souligné, y compris les tuiles d'accès rapide posées sur la
   photographie.
   ------------------------------------------------------------------------ */

.public-screen a{text-decoration:none}
.public-header nav a{background:none;border:0;color:var(--navy);font-size:14px;font-weight:700;
  display:inline-flex;align-items:center}
.public-header nav a:hover,.public-header nav a.active{color:var(--blue)}
.public-header .logo-primary{display:block}

.quick-row a{height:118px;background:#fff;border:1px solid #dce5ec;border-radius:9px;
  color:var(--navy);display:grid;place-items:center;padding:14px;gap:8px;text-align:center;
  box-shadow:0 5px 16px rgba(3,42,77,.18);font-weight:700;font-size:13.5px;line-height:1.3}
.quick-row a svg{color:#0752ae}
.quick-row a:nth-child(3) svg{color:var(--red)}
.quick-row a:hover{border-color:var(--blue)}

.entry b{display:block;font-size:16px}
.entry small{display:block;font-size:12.5px;opacity:.86;line-height:1.4;margin-top:3px}
.entry span{flex:1}
.entry:hover{filter:brightness(1.06)}

/* Bandeau d'appel : le pack le veut haut et illustré. Le contenu reste lisible
   par-dessus la photographie, jamais gris sur gris. */
.public-band{gap:26px;justify-content:space-between;padding-right:7vw}
.public-band>div{max-width:640px}
.public-band b{display:block;font-size:26px;line-height:1.3;color:#fff}
.public-band p{margin:8px 0 0;font-size:15px;color:#fff;opacity:.92}
.public-band .button{position:relative;z-index:1;white-space:nowrap;color:#fff}
.demo-band{height:210px}

/* Pied de page : sobre, sans image — le bandeau d'appel a déjà la sienne. */
.public-footer{background:var(--navy);color:#fff;padding:34px 5.2vw;display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.public-footer p{margin:6px 0 0;font-size:13px;opacity:.8}
.public-footer nav{display:flex;gap:22px;flex-wrap:wrap}
.public-footer nav a{color:#cfe0f0;font-size:13px}
.public-footer nav a:hover{color:#fff;text-decoration:underline}

/* Les blocs de contenu des pages intérieures. */
.public-content .page-head{margin-bottom:6px}
.principles{flex-wrap:wrap}
.principles>div{flex:1 1 240px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:22px;box-shadow:var(--shadow);display:grid;gap:9px;align-content:start}
.principles b{font-size:15.5px;color:var(--navy)}
.principles p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.facts{grid-template-columns:repeat(3,1fr);margin-top:26px}
.facts>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;
  box-shadow:var(--shadow);text-align:center}
.facts b{font-size:28px;color:var(--navy)}
.contact-card{display:grid;grid-template-columns:1fr;padding:24px;gap:10px;align-content:start}
.contact-card>span.icon-box{width:46px;height:46px}
.contact-card b{font-size:15.5px;color:var(--navy)}
.contact-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}
.news-grid article div{padding:18px}
.news-grid b{display:block;font-size:15px;color:var(--navy);margin:6px 0}
.news-grid small{font-size:11.5px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
.news-grid p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}

/* Le titre de la carte d'entrée héritait d'une couleur au lieu de celle de sa
   carte : « Je suis un administré » sortait gris pâle sur bleu nuit. */
.entry b,.entry small,.entry svg{color:inherit}
.entry.admin b{color:#fff}
.entry.city b{color:var(--navy)}

/* ----------------------------------------------------- rendez-vous (D5)

   Les creneaux sont des cibles de clic : assez grandes pour un pouce sur
   telephone, assez denses pour qu'une journee tienne a l'ecran.
   ------------------------------------------------------------------------ */

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.slots form{margin:0}
.slots button{width:100%;min-height:74px;background:#fff;border:1px solid var(--line);
  border-radius:9px;color:var(--navy);display:grid;place-items:center;gap:2px;padding:10px 8px;
  cursor:pointer;box-shadow:0 2px 8px rgba(3,42,77,.07)}
.slots button:hover{border-color:var(--blue);background:#f2f7fc}
.slots b{font-size:16px;font-variant-numeric:tabular-nums}
.slots small{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.3}

.st.reserve{background:#fdf1e0;color:#8a4f06}
.st.confirme{background:#e3f5ea;color:#0a6b36}
.st.honore{background:#e3f5ea;color:#0a6b36}
.st.absent{background:#fdecec;color:#8a1a1a}

/* --------------------------------------------------- projets & travaux (D5) */

.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.project-grid .mcard{display:grid;gap:8px;text-decoration:none;color:inherit}
.project-grid .mcard:hover{border-color:var(--blue)}

.progress{height:8px;border-radius:5px;background:#e6edf3;overflow:hidden}
.progress i{display:block;height:100%;background:var(--blue);border-radius:5px}

.timeline{display:grid;gap:2px}
.tl-item{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #eef3f7}
.tl-item:last-child{border-bottom:none}
.tl-item form{margin:0}
.tl-item.done .tl-h{color:var(--green)}
.tl-h{display:block;font-size:14px;color:var(--navy)}
.tl-d{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* =========================================================================
   D6 — MOBILE
   Refonte « Concept 1 validé », 08/09/2026.

   Le pack a été dessiné pour un poste de travail en 1920 × 1080, et ses notes
   le disent : « le responsive mobile reste à la charge de l'application ».
   C'est ce que fait cette section — sans toucher une seule règle d'origine,
   uniquement par surcharge sous les points de rupture.

   Trois décisions, prises d'après le modèle mobile validé et d'après la cible :

     1. L'ADMINISTRÉ NAVIGUE PAR UNE BARRE EN BAS. C'est ce que montrait la
        planche mobile, et c'est la seule zone qu'un pouce atteint sans effort
        sur un grand téléphone. Cinq entrées, cinq icônes, pas de menu caché.

     2. L'AGENT GARDE SON MENU, ESCAMOTABLE, SANS JAVASCRIPT. Douze entrées ne
        tiennent pas dans une barre du bas. Le menu s'ouvre par une case à
        cocher masquée : ça fonctionne même quand le script ne se charge pas —
        et sur la cible, il ne se charge pas toujours.

     3. AUCUN TABLEAU N'EST TRONQUÉ. Une colonne coupée fait disparaître une
        donnée sans le dire. Ils défilent horizontalement, dans leur carte.

   Points de rupture : 1024 px (tablette), 820 px (grand téléphone posé en
   paysage), 560 px (téléphone).
   ========================================================================= */

/* Par defaut — donc AVANT les points de rupture, sinon cette regle annule
   celle qui affiche le bouton en mobile : a specificite egale, la derniere
   ecrite gagne. Defaut vu en capture a 390 px. */
.ouvre-menu,.voile-menu{display:none}

/* ------------------------------------------------------------ ≤ 1024 px */

@media (max-width: 1024px) {
    .app-screen{grid-template-columns:200px 1fr}
    .app-content{padding:20px 18px 40px}
    .kpi-row .kpi{flex-basis:calc((100% - 24px) / 3)}
    .dashboard-panels{grid-template-columns:1fr}
    .cards{grid-template-columns:1fr}
    .service-grid{grid-template-columns:repeat(2,1fr)}
    .news-grid{grid-template-columns:repeat(2,1fr)}
    .project-grid{grid-template-columns:1fr}
    .public-content{padding:32px 5vw}
}

/* ------------------------------------------------------------- ≤ 820 px */

@media (max-width: 820px) {

    /* --- l'écran passe en une colonne, la barre latérale sort du flux --- */
    .app-screen{display:block}
    .page-scroll{width:100%}
    .app-content{padding:16px 14px 96px}   /* 96 px : la barre du bas ne masque rien */

    /* --- barre supérieure : la recherche prend la place, l'identité se réduit --- */
    .app-top{padding:10px 14px;gap:10px;height:auto;flex-wrap:wrap}
    .global-search{flex:1;min-width:0}
    .global-search input{min-width:0;width:100%}
    .app-top span b,.app-top span small{max-width:38vw;overflow:hidden;text-overflow:ellipsis;
        white-space:nowrap;display:block}

    /* ================= ESPACE ADMINISTRÉ : barre du bas ================= */

    .sidebar.citizen{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;
        flex-direction:row;padding:0;z-index:40;border-top:1px solid rgba(255,255,255,.14);
        box-shadow:0 -6px 20px rgba(3,42,77,.28)}
    .sidebar.citizen>a:first-child,          /* le logo */
    .sidebar.citizen .sidebar-commune,
    .sidebar.citizen .side-legal,
    .sidebar.citizen .sidebar-user{display:none}
    .sidebar.citizen nav{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0}
    .sidebar.citizen nav a{height:60px;flex-direction:column;justify-content:center;gap:3px;
        padding:6px 2px;border-radius:0;font-size:10.5px;font-weight:700;text-align:center}
    .sidebar.citizen nav a span{flex:none;line-height:1.1}
    .sidebar.citizen nav a.active{background:rgba(255,255,255,.14);color:#fff;
        box-shadow:inset 0 3px 0 var(--orange)}
    .sidebar.citizen nav .nav-caret{display:none}
    .sidebar.citizen .pastille-nb{position:absolute;transform:translate(14px,-16px)}
    .sidebar.citizen nav a{position:relative}

    /* ============ ESPACE MUNICIPAL : menu escamotable, sans script ======= */

    .sidebar:not(.citizen){position:fixed;inset:0 auto 0 0;width:270px;z-index:50;
        transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto}
    #menu-mobile:checked ~ .screen .sidebar:not(.citizen),
    .screen:has(#menu-mobile:checked) .sidebar:not(.citizen){transform:none}

    /* Le bouton d'ouverture, posé dans la barre supérieure. */
    .ouvre-menu{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
        border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--navy);
        cursor:pointer;flex:none}
    .ouvre-menu:hover{border-color:var(--blue);color:var(--blue)}

    /* Le voile qui referme le menu d'un toucher à côté. */
    .voile-menu{display:none;position:fixed;inset:0;background:rgba(3,42,77,.5);z-index:45}
    .screen:has(#menu-mobile:checked) .voile-menu{display:block}

    /* ------------------------------- contenu ------------------------------- */

    .kpi-row{gap:10px}
    .kpi-row .kpi{flex-basis:calc((100% - 10px) / 2);min-height:76px;padding:12px 14px}
    .kpi-row .kpi strong{font-size:21px}
    .kpis{grid-template-columns:1fr 1fr;gap:10px}

    .page-head{flex-direction:column;align-items:flex-start;gap:12px}
    .page-head h1{font-size:22px}
    .head-actions{width:100%;display:flex;gap:8px;flex-wrap:wrap}

    /* Aucun tableau tronqué : une colonne coupée fait disparaître une donnée
       sans le dire. Ils défilent, dans leur carte. */
    .tablecard,.panel{overflow-x:auto}
    table.dt{min-width:640px}

    .service-grid,.news-grid{grid-template-columns:1fr}
    .fgrid{grid-template-columns:1fr}
    .filters,.subtabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
    .filters a,.subtabs a{white-space:nowrap}
    .slots{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}

    /* --------------------------------- vitrine --------------------------- */

    .public-header{height:auto;padding:12px 5vw;flex-wrap:wrap;gap:12px}
    .public-header .logo-primary{width:180px}
    .public-actions{margin-left:auto;gap:8px}
    .public-actions .button{height:40px;padding:0 13px;font-size:13.5px}

    /* Le hero du pack empile des blocs en position absolue sur une image de
       1920 px de large. Sur téléphone, tout repasse en flux : sinon les accès
       rapides se retrouvent par-dessus la photographie, illisibles. */
    .landing-hero{height:auto;min-height:0;padding:26px 5vw 30px;display:flex;
        flex-direction:column;gap:20px}
    .landing-hero .hero-copy,
    .landing-hero .entry-row,
    .landing-hero .quick-row,
    .landing-hero .values,
    .landing-hero .hero-quote{position:static;width:auto;left:auto;right:auto;top:auto;bottom:auto}
    .hero-copy h1{font-size:34px;line-height:1.12}
    .hero-quote{font-size:17px;order:5}
    .hero-quote i{display:none}
    .entry-row{flex-direction:column;gap:12px}
    .entry{width:100%;height:auto;padding:16px 18px}
    .quick-row{grid-template-columns:1fr 1fr;gap:10px}
    .quick-row a{height:96px}
    .values{width:100%;border-radius:14px}

    .proof-strip{height:auto;grid-template-columns:1fr 1fr;gap:16px;padding:22px 5vw;
        border-bottom-width:10px}
    .proof-strip>div{height:auto;border-right:0;padding-left:0}
    .proof-strip>div:last-child{grid-column:1/3}

    .public-band{height:auto;padding:26px 5vw;flex-direction:column;align-items:flex-start;gap:14px}
    .public-band b{font-size:20px}
    .demo-band{height:auto}
    .public-footer{flex-direction:column;align-items:flex-start;gap:14px;padding:26px 5vw}

    .principles>div{flex:1 1 100%}
    .facts{grid-template-columns:1fr}

    /* ------------------------ authentification --------------------------- */

    .auth-screen{display:block}
    .auth-visual{padding:30px 24px}
    .auth-visual h2{font-size:22px}
    .auth-card{padding:26px 22px 40px}

    /* --------------------------- conversation ---------------------------- */

    .chat{min-height:0}
    .bubble{max-width:88%}
    .chat-input{flex-direction:column;align-items:stretch}
    .chat-input .button{height:46px;width:100%}
}

/* ------------------------------------------------------------- ≤ 560 px */

@media (max-width: 560px) {
    .kpis{grid-template-columns:1fr}
    .kpi-row .kpi{flex-basis:100%}
    .quick-row{grid-template-columns:1fr}
    .proof-strip{grid-template-columns:1fr}
    .proof-strip>div:last-child{grid-column:auto}
    .hero-copy h1{font-size:28px}
    .app-content{padding:14px 12px 96px}
    .app-top span{display:none}          /* l'identité passe dans le menu */
    .sidebar.citizen nav a{font-size:9.5px}
    .slots{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
    .public-header .logo-primary{width:150px}
    .entete-mobile-titre{display:block}
}


/* --------------------------------------------------- corrections mobile (D6)

   Vues en capture a 390 px :

     1. Les deux cartes de profil restaient cote a cote et debordaient a droite.
        Le pack les pose avec `.entry-row{display:flex}` ET `.entry{width:355px}`;
        il fallait la meme specificite pour reprendre la main, pas moins.

     2. Le hero perdait son contraste : le voile du pack est dimensionne pour
        une image de 1920 px de large. Sur telephone, l image est recadree et le
        texte blanc passait sur des zones claires. Le voile est renforce.
   ------------------------------------------------------------------------ */

@media (max-width: 820px) {
    .landing-hero .entry-row{flex-direction:column;gap:12px;width:100%}
    .landing-hero .entry{width:100%;height:auto;min-height:0;padding:16px 18px}
    .landing-hero .quick-row{width:100%}
    .landing-hero .values{width:100%;box-sizing:border-box}

    /* Le texte doit rester lisible quelle que soit la zone de l'image qui
       tombe derriere lui apres recadrage. */
    .landing-hero{background-position:60% center}
    .landing-hero .hero-shade{position:absolute;inset:0;
        background:linear-gradient(180deg,rgba(3,42,77,.86) 0%,rgba(3,42,77,.72) 55%,rgba(3,42,77,.88) 100%)}
    .landing-hero>*:not(.hero-shade){position:relative;z-index:1}
    .hero-copy small{color:#e6eef7}
    .hero-copy p{color:#eaf1f8}
}

/* Les deux cartes de profil restaient obstinement cote a cote : la regle du
   pack `.entry-row{display:flex}` gagnait, la mienne posait bien
   `flex-direction:column` mais l'axe restait horizontal parce que le conteneur
   est reconstruit en flux. On force la mise en grille — une colonne, largeur
   contrainte — plutot que de discuter de l'axe d'un flex. */
@media (max-width: 820px) {
    section.landing-hero div.entry-row{display:grid;grid-template-columns:1fr;gap:12px;
        width:100%;max-width:100%}
    section.landing-hero a.entry{width:100%;max-width:100%;box-sizing:border-box}
    section.landing-hero div.quick-row{grid-template-columns:1fr 1fr;width:100%;max-width:100%}
}

/* --------------------------------------------------- formulaire de contact

   Le leurre anti-robots doit etre INVISIBLE mais present dans le document :
   `display:none` est repere par les robots serieux, un decalage hors ecran ne
   l est pas. Il est aussi retire du parcours au clavier et des lecteurs
   d ecran, pour qu aucun humain ne tombe dessus.
   ------------------------------------------------------------------------ */

.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-contact{max-width:760px}
.form-contact .field select{height:44px;padding:0 13px;border:1px solid var(--line);
  border-radius:8px;background:#fbfdff;color:var(--navy);font:inherit;font-size:14.5px}
.form-contact textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:8px;
  background:#fbfdff;color:var(--navy);font:inherit;font-size:14.5px;resize:vertical}
.form-contact textarea:focus,.form-contact select:focus{outline:none;border-color:var(--blue);
  background:#fff;box-shadow:0 0 0 3px rgba(0,83,167,.12)}
.form-contact .hint{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ------------------------------------------- tuiles de service : la grille

   Le pack dessine `.service-tile` en flex avec `span{flex:1}`. Une tuile qui
   ne porte qu un titre — les modules de gestion — laissait donc la boite
   d icone s etirer sur toute la largeur, et le libelle partait a droite. La
   boite d icone garde sa taille, le texte prend le reste : c est la seule
   lecture qui tienne debout quand le contenu varie.
   ------------------------------------------------------------------------ */

.service-grid{align-items:stretch}
.service-tile{min-height:104px;align-items:center;gap:14px}
.service-tile>.icon-box{width:46px;height:46px;flex:0 0 46px}
.service-tile>span{flex:1 1 auto;min-width:0}
.service-tile>svg{flex:0 0 auto;color:var(--blue);opacity:.6}
.service-tile b{white-space:normal}

/* Ce qui est facultatif le dit, en toutes lettres et sans crier. */
.formcard label em,.field label em{font-style:normal;font-weight:600;text-transform:none;
  letter-spacing:0;color:var(--muted);font-size:11px;margin-left:5px}
.formcard .formactions{gap:10px;align-items:center}

/* ------------------------------------- formulaires du portail d une commune

   Le gabarit du portail est passe a la charte du concept ; sa grille, elle,
   etait restee celle de l ancienne feuille : `auto-fit` donnait trois colonnes
   serrees sur un ecran large, avec des libelles colles aux champs. Deux
   colonnes fixes, une largeur de lecture, et les champs qui occupent leur
   ligne entiere quand le contenu le demande.
   ------------------------------------------------------------------------ */

.pub-main .formcard{max-width:860px;margin:0 auto;padding:28px 32px}
.pub-main .formcard h2{font-size:20px;color:var(--navy);margin:0 0 4px}
.pub-main .fgrid{grid-template-columns:1fr 1fr;gap:0 22px}
.pub-main .fgrid>div{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;min-width:0}
.pub-main .fgrid>div.full{grid-column:1/-1}
.pub-main .fgrid label{font-size:11.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:#3a5570}
.pub-main .fgrid input,.pub-main .fgrid select,.pub-main .fgrid textarea{width:100%;
  height:44px;padding:0 13px;border:1px solid var(--line);border-radius:8px;background:#fbfdff;
  color:var(--navy);font:inherit;font-size:14.5px}
.pub-main .fgrid textarea{height:auto;padding:11px 13px;min-height:118px;resize:vertical}
.pub-main .fgrid input:focus,.pub-main .fgrid select:focus,.pub-main .fgrid textarea:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,83,167,.12)}
.pub-main .formactions{justify-content:flex-start;margin-top:8px}

/* Le portail d une commune ne souligne pas ses liens de navigation. */
.pub-head a,.pub-foot a,.pub-main .formcard>a{text-decoration:none}
.pub-head a:hover,.pub-foot a:hover{text-decoration:underline}

@media (max-width: 820px) {
    .pub-main .fgrid{grid-template-columns:1fr}
    .pub-main .formcard{padding:20px 18px}
}

/* ------------------------------------------------ planning de rendez-vous

   Douze creneaux de 30 minutes, 8h30–12h et 14h–16h30. Les cases sont assez
   grandes pour un pouce, et l heure retenue se voit d un coup d oeil : un
   choix qu on ne distingue pas est un choix qu on refait deux fois.
   ------------------------------------------------------------------------ */

.planning-rdv .d{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.grille-horaires{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  gap:9px;margin-top:8px;align-items:stretch}
.creneau-choix{margin:0}
.creneau-choix input{position:absolute;opacity:0;width:0;height:0}
.creneau-choix span{display:flex;align-items:center;justify-content:center;height:46px;
  border:1px solid var(--line);border-radius:9px;background:#fbfdff;color:var(--navy);
  font-weight:700;font-size:14.5px;cursor:pointer;font-variant-numeric:tabular-nums}
.creneau-choix:hover span{border-color:var(--blue);background:#f2f7fc}
.creneau-choix input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.creneau-choix input:focus-visible + span{box-shadow:0 0 0 3px rgba(0,83,167,.28)}

/* La coupure de midi se dit, elle ne se devine pas a un trou dans la grille. */
.coupure{grid-column:1/-1;font-size:11.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:1.1px;font-weight:700;padding:8px 0 2px;display:flex;align-items:center;gap:10px}
.coupure:after{content:"";flex:1;height:1px;background:var(--line)}

/* --------------------------------- signalement : localisation et photos */

.ligne-geoloc{display:flex;gap:8px;align-items:stretch}
.ligne-geoloc input{flex:1;min-width:0}
.ligne-geoloc .btn-sm{white-space:nowrap;flex:none;height:44px}
.champ-photos{width:100%;padding:11px 13px;border:1px dashed var(--line);border-radius:8px;
  background:#fbfdff;color:var(--navy);font:inherit;font-size:13.5px;cursor:pointer;height:auto}
.champ-photos:hover{border-color:var(--blue);background:#f2f7fc}

/* ------------------------------------------------- actualites : la grille

   Cinq par ligne, l information sous l image. Les cartes du pack etaient
   dessinees pour trois colonnes larges ; a cinq, l image se reduit et le texte
   se resserre — sans jamais couper un titre au milieu d un mot.
   ------------------------------------------------------------------------ */

.news-grid{grid-template-columns:repeat(5,1fr);gap:16px}
.carte-actu{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit}
.carte-actu:hover{border-color:var(--blue);transform:translateY(-2px);transition:.15s}
.carte-actu img{width:100%;height:132px;object-fit:cover;display:block}
.carte-actu>div{padding:14px 15px 16px;display:flex;flex-direction:column;gap:5px;flex:1}
.carte-actu small{font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);
  font-weight:700}
.carte-actu b{font-size:14px;color:var(--navy);line-height:1.35}
.carte-actu p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5;flex:1}
.carte-actu .lire{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;
  color:var(--blue);margin-top:4px}

.article-actu{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow);max-width:900px}
.article-actu>img{width:100%;height:300px;object-fit:cover;display:block}
.article-actu>div{padding:28px 34px 34px}
.article-actu h1{font-size:27px;color:var(--navy);margin:6px 0 0;line-height:1.2}
.article-actu small{font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--orange);font-weight:700}
.corps-actu{margin-top:16px;font-size:15px;line-height:1.7;color:var(--encre,#16202e)}

@media (max-width: 1400px) { .news-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 1100px) { .news-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 820px)  { .news-grid{grid-template-columns:repeat(2,1fr)}
                             .article-actu>img{height:200px}
                             .article-actu>div{padding:20px 18px 26px} }
@media (max-width: 560px)  { .news-grid{grid-template-columns:1fr} }

/* La mention cookies : presente, lisible, et qui ne reclame rien. */
.mention-cookies{flex:1 1 300px;max-width:520px;font-size:12px;line-height:1.55;color:#a8c2d8}
.mention-cookies b{color:#dbe7f2}
.public-footer{align-items:flex-start}

/* ------------------------------------------------------- page d un module */

.entete-module{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow)}
.entete-module>div{padding:32px 34px}
.entete-module small{font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--orange);font-weight:800}
.entete-module h1{font-size:30px;color:var(--navy);margin:6px 0 0;line-height:1.15}
.entete-module .accroche{font-size:16px;color:var(--muted);margin:10px 0 0;line-height:1.6}
.entete-module>img{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
.points-module{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.points-module li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.55;
  color:var(--navy)}
.points-module svg{color:var(--green);flex:none;margin-top:1px}

@media (max-width: 900px) {
    .entete-module{grid-template-columns:1fr}
    .entete-module>img{min-height:190px;order:-1}
    .entete-module>div{padding:22px 20px}
    .entete-module h1{font-size:24px}
}

/* ------------------------------------- accueil d une commune : la cascade

   Les tuiles se decalent autour de la photographie, comme sur la planche
   fournie. Le decalage est purement decoratif : sur telephone, elles
   redeviennent une colonne bien alignee — une cascade illisible ne vaut pas
   mieux qu une liste.
   ------------------------------------------------------------------------ */

.accueil-commune{position:relative;display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  gap:28px;align-items:center;margin-top:6px}

.photo-commune{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 22px 54px rgba(3,42,77,.28)}
.photo-commune img{width:100%;height:420px;object-fit:cover;display:block}
.bandeau-commune{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 20px;
  background:linear-gradient(180deg,rgba(3,42,77,0),rgba(3,42,77,.9));color:#fff}
.bandeau-commune small{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  opacity:.85}
.bandeau-commune b{display:block;font-size:22px;line-height:1.2;margin-top:3px}

.cascade{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tuile-cascade{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  box-shadow:0 10px 26px rgba(3,42,77,.10);text-decoration:none;color:inherit;display:grid;gap:5px;
  align-content:start;transition:.16s}
.tuile-cascade:hover{border-color:var(--blue);transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(3,42,77,.16)}
.tuile-cascade .icon-box{width:38px;height:38px}
.tuile-cascade b{font-size:14.5px;color:var(--navy)}
.tuile-cascade small{font-size:12.5px;color:var(--muted);line-height:1.5}
.tuile-cascade em{font-style:normal;font-size:12px;font-weight:700;color:var(--blue);margin-top:3px}
.tuile-cascade.suivi{border-style:dashed}

/* Le decalage : une tuile sur deux descend, la suivante remonte. */
.cascade>*:nth-child(odd){transform:translateY(-14px)}
.cascade>*:nth-child(odd):hover{transform:translateY(-18px)}
.cascade>*:nth-child(4n){transform:translateY(12px)}
.cascade>*:nth-child(4n):hover{transform:translateY(8px)}

.recu-depot{max-width:100%;margin-bottom:22px;border-left:4px solid var(--green)}
.recu-depot h2{font-size:18px;color:var(--navy);margin:0 0 4px}
.recu-depot p{color:var(--muted);margin:0 0 14px;font-size:14px}
.numero-dossier{background:#f2f6fa;border-radius:10px;padding:16px 18px;text-align:center}
.numero-dossier small{display:block;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted)}
.numero-dossier b{display:block;font-size:26px;font-weight:800;letter-spacing:2px;margin-top:4px;
  color:var(--navy)}

@media (max-width: 1000px) {
    .accueil-commune{grid-template-columns:1fr}
    .photo-commune img{height:240px}
}
@media (max-width: 620px) {
    .cascade{grid-template-columns:1fr}
    /* Une cascade illisible ne vaut pas mieux qu une liste : on realigne. */
    .cascade>*{transform:none !important}
}