/* Complément au CSS de production de costockage.fr, pour les pages « commune voisine ».
   Ne redéfinit rien du site : uniquement les primitives propres à ces pages et les deux
   règles que le CSS public ne porte pas (l'animation du menu coulissant, injectée côté JS). */

body { font-family: Inter, ui-sans-serif, system-ui, sans-serif }

@keyframes fade-in-left { from { transform: translateX(100%); opacity: .4 } to { transform: translateX(0); opacity: 1 } }
.animation-fade-in-left { animation: fade-in-left .28s ease-out both }
.side-bar-menu { box-shadow: -8px 0 24px rgba(0, 0, 0, .18) }

:root {
  --teal: #005054; --rose: #F4A9BE; --rose-fonce: #EA95B3;
  --jaune: #FFC948; --creme: #F4F2EC; --gris: #F5F5F5;
  --encre: #1D1D1B; --texte: #4B5563; --discret: #787777; --trait: #E5E7EB;
}

.h-sec  { font-family: Figtree, sans-serif; font-size: 24px; line-height: 29px; font-weight: 600; color: var(--teal) }
.h-sous { font-family: Figtree, sans-serif; font-size: 17px; font-weight: 600; color: var(--encre) }
.corps  { font-size: 15px; line-height: 24px; color: var(--texte) }

.carte-bord { border: 1px solid var(--trait); border-radius: 16px; background: #fff }
.puce { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
        background: var(--creme); padding: 5px 12px; font-size: 13px; color: var(--encre) }

.vignette { overflow: hidden; border-radius: 16px; background: var(--gris) }
.vignette img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease }
.vignette:hover img { transform: scale(1.04) }
.ratio-4-3 { aspect-ratio: 4/3 }

/* Tableau du corps éditorial, repris à l'identique des fiches centres :
   la grille de tailles et de prix est ce qu'un moteur reprend le plus volontiers. */
/* Le CSS de production porte « .seo-section div td { border: 1px solid #000 } » :
   à spécificité égale il gagnerait. On repasse devant avec .seo-section en tête,
   pour ne garder que le filet horizontal entre les lignes. */
.tbl { width: 100%; border-collapse: collapse; font-family: Inter, sans-serif; font-size: 14px }
.seo-section .tbl th, .seo-section .tbl td,
.tbl th, .tbl td { border: 0; border-bottom: 1px solid var(--trait) }
.tbl th { text-align: left; font-weight: 600; color: var(--encre);
          padding: 0 12px 8px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap }
.tbl td { padding: 9px 12px 9px 0; color: var(--texte); vertical-align: top }
.tbl td.n { font-variant-numeric: tabular-nums; white-space: nowrap }
.tbl-wrap { overflow-x: auto; margin: 4px 0 }

/* Listes du corps éditorial : puces et numéros comme sur les pages centres,
   dont le CSS de production ne porte pas le style (reset Tailwind). */
/* Le CSS de production met « .seo-section li { display: flex } » et ajoute sa propre
   puce en ::before : le <strong> du motif se retrouvait seul dans une colonne étroite,
   le texte poussé à droite. On rend la puce au navigateur et la ligne au texte. */
.liste { display: flex; flex-direction: column; gap: 10px; padding-left: 20px }
ul.liste { list-style: disc }
ol.liste { list-style: decimal }
.seo-section .liste li, .liste li { display: list-item; padding-left: 2px; gap: 0 }
.seo-section .liste li::before { content: none }
.liste li::marker { color: var(--teal) }

/* Chaque section respire comme sur les pages centres, séparée d'un filet. */
.bloc { padding-top: 32px; padding-bottom: 32px }
.bloc + .bloc { border-top: 1px solid var(--trait) }

/* Galerie : mosaïque 4 colonnes en desktop, 2 en mobile. La 4e vignette se replie sous
   1024px, sinon elle reste seule sur sa ligne ; le compteur passe alors sur la 3e. */
.galerie { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px }
.galerie .g1 { grid-column: span 2; grid-row: span 2 }
.galerie .g4 { display: none }
.compteur-mobile { display: flex }

/* Le nombre de tailles de box varie d'un centre à l'autre (de 1 à 5 selon la page mère) :
   la grille s'ajuste au lieu d'imposer trois colonnes vides. */
.grille-box { display: grid; gap: 16px; grid-template-columns: 1fr }

/* auto-fill, pas auto-fit : un centre qui n'a qu'une taille de box garde une carte de
   largeur normale au lieu de l'étirer sur toute la colonne. */
@media (min-width: 640px) {
  .grille-box { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) }
}

@media (min-width: 1024px) {
  .galerie { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 176px }
  .galerie .g2 { grid-column: span 2 }
  .galerie .g4 { display: block }
  .compteur-mobile { display: none }
}

/* ── FAQ : sans marqueur, les questions ressemblaient à des cartes inertes et on
   ne devinait pas qu'elles s'ouvrent. Chevron à droite, qui pivote à l'ouverture,
   et un fond au survol pour dire que la ligne est cliquable. */
.faq-item { overflow: hidden }
.faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-family: Figtree, sans-serif; font-size: 16px; font-weight: 600; color: var(--encre);
}
.faq-item > summary::-webkit-details-marker { display: none }
.faq-item > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px) }
.faq-item > summary:hover { background: var(--creme) }
.faq-item[open] > summary { border-bottom: 1px solid var(--trait) }
.faq-item > p { padding: 14px 16px; margin: 0 }

/* ── Respiration du corps éditorial.
   Les sous-titres étaient collés au paragraphe précédent : à l'œil, on ne
   voyait plus où finissait une idée et où commençait la suivante. Le titre se
   rapproche du texte qu'il annonce et s'éloigne de celui qu'il clôt — c'est ce
   qui fait lire un enchaînement comme des sections distinctes. */
.seo-section .corps > h2,
.seo-section .corps > h3 { margin-top: 22px }
.seo-section .corps > h2:first-child,
.seo-section .corps > h3:first-child { margin-top: 0 }
/* Le paragraphe qui suit immédiatement un titre lui reste attaché. */
.seo-section .corps > h2 + p,
.seo-section .corps > h3 + p { margin-top: -6px }
/* Tableaux et listes du corps : même logique, ils respirent avant et après. */
.seo-section .corps > .tbl-wrap { margin: 6px 0 10px }
.seo-section .corps > .liste { margin-bottom: 6px }

/* La fin de page a besoin de plus d'air : la dernière section, le maillage et
   le pied de page s'enchaînaient sans pause. `:last-child` et non `:last-of-type` :
   quand le bloc des communes voisines suit, c'est lui le dernier <section>, et un
   sélecteur de type ne matchait plus rien — la règle était morte sur ces pages. */
.bloc.seo-section:last-child { padding-bottom: 44px }
.seo-section .corps > *:last-child { margin-bottom: 8px }

/* ── Communes voisines, le dernier contenu de la page. Deux espacements que les
   utilitaires du CSS extrait ne fournissent pas : `gap-x-5` n'existe pas dans la
   feuille de production, donc les liens se collaient bord à bord ; et rien ne
   séparait la carte du pied de page. */
.voisines { margin: 12px 0 56px }
.voisines ul { gap: 10px 20px }