.elementor-56097 .elementor-element.elementor-element-ebe103b{--display:flex;}/* Start custom CSS for html, class: .elementor-element-2bb52d1 *//* ============================================================
   CSS PREMIUM — Senior Sérénité
   Pages villes — scoped .ss-article-container
   Compatible WordPress / Elementor / Neve
   Auteur : Senior Sérénité
   Version : 1.0 — Mai 2026
============================================================ */

/* ── IMPORT TYPOGRAPHIE ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,400&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
.ss-article-container {
  --ss-vert:         #2d6a4f;
  --ss-vert-clair:   #52b788;
  --ss-vert-pale:    #d8f3dc;
  --ss-vert-bg:      #f0faf4;
  --ss-or:           #c9a84c;
  --ss-or-clair:     #f4e4b0;
  --ss-texte:        #1a2e22;
  --ss-texte-moyen:  #3d5a47;
  --ss-texte-leger:  #6b8c75;
  --ss-blanc:        #ffffff;
  --ss-gris-bg:      #f7f9f7;
  --ss-gris-bord:    #dde8e1;
  --ss-ombre:        0 4px 24px rgba(45, 106, 79, 0.10);
  --ss-ombre-forte:  0 8px 40px rgba(45, 106, 79, 0.18);
  --ss-rayon:        12px;
  --ss-rayon-grand:  20px;
  --ss-police-titre: 'Playfair Display', Georgia, serif;
  --ss-police-corps: 'Source Sans 3', 'Segoe UI', sans-serif;
  --ss-max-width:    780px;
  --ss-transition:   0.25s ease;
}

/* ── RESET & BASE ──────────────────────────────────────────── */
.ss-article-container {
  font-family: var(--ss-police-corps);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ss-texte);
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

/* ── BREADCRUMB ────────────────────────────────────────────── */
.ss-breadcrumb {
  margin-bottom: 2rem;
}

.ss-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--ss-texte-leger);
}

.ss-breadcrumb li + li::before {
  content: '›';
  margin-right: 0.5rem;
  color: var(--ss-vert-clair);
}

.ss-breadcrumb a {
  color: var(--ss-texte-leger);
  text-decoration: none;
  transition: color var(--ss-transition);
}

.ss-breadcrumb a:hover {
  color: var(--ss-vert);
}

/* ── H1 ────────────────────────────────────────────────────── */
.ss-article-container h1 {
  font-family: var(--ss-police-titre);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ss-texte);
  margin: 0 0 1.75rem;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 1.25rem;
}

.ss-article-container h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--ss-vert), var(--ss-vert-clair));
  border-radius: 2px;
}

/* ── H2 ────────────────────────────────────────────────────── */
.ss-article-container h2 {
  font-family: var(--ss-police-titre);
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ss-texte);
  margin: 2.75rem 0 1.1rem;
  padding-left: 1rem;
  border-left: 4px solid var(--ss-vert-clair);
  letter-spacing: -0.01em;
}

/* ── H3 ────────────────────────────────────────────────────── */
.ss-article-container h3 {
  font-family: var(--ss-police-corps);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ss-vert);
  margin: 1.75rem 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}

/* ── PARAGRAPHES & LIENS ───────────────────────────────────── */
.ss-article-container p {
  margin: 0 0 1.2rem;
  color: var(--ss-texte-moyen);
}

.ss-article-container a {
  color: var(--ss-vert);
  text-decoration: underline;
  text-decoration-color: var(--ss-vert-clair);
  text-underline-offset: 3px;
  transition: color var(--ss-transition), text-decoration-color var(--ss-transition);
}

.ss-article-container a:hover {
  color: var(--ss-vert-clair);
  text-decoration-color: var(--ss-vert-clair);
}

/* ── IMAGES & FIGURES ──────────────────────────────────────── */
.ss-article-container figure {
  margin: 2rem 0;
  border-radius: var(--ss-rayon-grand);
  overflow: hidden;
  box-shadow: var(--ss-ombre-forte);
  position: relative;
}

.ss-article-container figure img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.ss-article-container figure:hover img {
  transform: scale(1.015);
}

.ss-article-container figcaption {
  background: var(--ss-gris-bg);
  color: var(--ss-texte-leger);
  font-size: 0.82rem;
  font-style: italic;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--ss-gris-bord);
  text-align: center;
}

/* ── ENCADRÉ ESSENTIEL ─────────────────────────────────────── */
.ss-essentiel {
  background: linear-gradient(135deg, var(--ss-vert-bg) 0%, #e8f5ed 100%);
  border: 1.5px solid var(--ss-gris-bord);
  border-left: 5px solid var(--ss-vert);
  border-radius: var(--ss-rayon);
  padding: 1.5rem 1.75rem;
  margin: 1.75rem 0 2rem;
  position: relative;
  overflow: hidden;
}

.ss-essentiel::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--ss-vert-pale) 0%, transparent 70%);
  pointer-events: none;
}

.ss-essentiel__titre {
  font-family: var(--ss-police-titre);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ss-vert);
  margin: 0 0 0.9rem !important;
}

.ss-essentiel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ss-essentiel ul li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.97rem;
  color: var(--ss-texte-moyen);
  line-height: 1.6;
}

.ss-essentiel ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ss-vert-clair);
  font-weight: 700;
}

/* ── TABLE DES MATIÈRES ────────────────────────────────────── */
.ss-toc {
  background: var(--ss-blanc);
  border: 1.5px solid var(--ss-gris-bord);
  border-radius: var(--ss-rayon);
  padding: 1.35rem 1.75rem;
  margin: 2rem 0;
  box-shadow: var(--ss-ombre);
}

.ss-toc__titre {
  font-family: var(--ss-police-titre);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ss-texte-leger);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.85rem !important;
}

.ss-toc ol {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ss-toc ol li {
  font-size: 0.95rem;
}

.ss-toc a {
  color: var(--ss-texte-moyen);
  text-decoration: none;
  transition: color var(--ss-transition), padding-left var(--ss-transition);
  display: inline-block;
}

.ss-toc a:hover {
  color: var(--ss-vert);
  padding-left: 4px;
}

/* ── TABLEAUX ──────────────────────────────────────────────── */
.ss-table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0 2rem;
  border-radius: var(--ss-rayon);
  box-shadow: var(--ss-ombre);
}

.ss-article-container table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  background: var(--ss-blanc);
  border-radius: var(--ss-rayon);
  overflow: hidden;
}

.ss-article-container caption {
  font-size: 0.82rem;
  color: var(--ss-texte-leger);
  font-style: italic;
  padding: 0.6rem 1rem;
  text-align: left;
  background: var(--ss-gris-bg);
  border-bottom: 1px solid var(--ss-gris-bord);
}

.ss-article-container thead th {
  background: var(--ss-vert);
  color: var(--ss-blanc);
  padding: 0.8rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
}

.ss-article-container tbody tr {
  border-bottom: 1px solid var(--ss-gris-bord);
  transition: background var(--ss-transition);
}

.ss-article-container tbody tr:hover {
  background: var(--ss-vert-bg);
}

.ss-article-container tbody td {
  padding: 0.75rem 1rem;
  color: var(--ss-texte-moyen);
  vertical-align: middle;
}

.ss-article-container tbody tr:last-child {
  border-bottom: none;
}

/* ── CHECKLIST ─────────────────────────────────────────────── */
.ss-checklist ul {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ss-checklist ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  background: var(--ss-blanc);
  border: 1px solid var(--ss-gris-bord);
  border-radius: var(--ss-rayon);
  font-size: 0.96rem;
  color: var(--ss-texte-moyen);
  line-height: 1.55;
  transition: box-shadow var(--ss-transition), border-color var(--ss-transition);
}

.ss-checklist ul li:hover {
  box-shadow: var(--ss-ombre);
  border-color: var(--ss-vert-clair);
}

/* ── CTA PRINCIPAL ─────────────────────────────────────────── */
.ss-cta--principal {
  background: linear-gradient(135deg, var(--ss-vert) 0%, #1b4332 100%);
  border-radius: var(--ss-rayon-grand);
  padding: 2rem 2.25rem;
  margin: 2.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--ss-ombre-forte);
}

.ss-cta--principal::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(201,168,76,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.ss-cta--principal .ss-cta__titre {
  font-family: var(--ss-police-titre);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ss-blanc);
  margin: 0 0 0.6rem !important;
  line-height: 1.3;
}

.ss-cta--principal .ss-cta__texte {
  color: rgba(255,255,255,0.85);
  font-size: 0.97rem;
  margin: 0 0 1.35rem !important;
  line-height: 1.6;
}

/* ── CTA FINAL ─────────────────────────────────────────────── */
.ss-cta--final {
  background: linear-gradient(135deg, var(--ss-or-clair) 0%, #fff8e7 100%);
  border: 2px solid var(--ss-or);
  border-radius: var(--ss-rayon-grand);
  padding: 2rem 2.25rem;
  margin: 2.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 30px rgba(201,168,76,0.18);
}

.ss-cta--final::before {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(45,106,79,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.ss-cta--final .ss-cta__titre {
  font-family: var(--ss-police-titre);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ss-texte);
  margin: 0 0 0.6rem !important;
  line-height: 1.3;
}

.ss-cta--final .ss-cta__texte {
  color: var(--ss-texte-moyen);
  font-size: 0.97rem;
  margin: 0 0 1.35rem !important;
  line-height: 1.6;
}

/* ── BOUTON CTA (commun) ───────────────────────────────────── */
.ss-cta__bouton {
  display: inline-block;
  background: linear-gradient(135deg, var(--ss-vert-clair) 0%, var(--ss-vert) 100%);
  color: var(--ss-blanc) !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 2.25rem;
  border-radius: 50px;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 18px rgba(45,106,79,0.35);
  transition: transform var(--ss-transition), box-shadow var(--ss-transition), background var(--ss-transition);
  position: relative;
  z-index: 1;
}

.ss-cta__bouton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(45,106,79,0.45);
  background: linear-gradient(135deg, var(--ss-vert) 0%, #1b4332 100%);
  color: var(--ss-blanc) !important;
}

.ss-cta--final .ss-cta__bouton {
  background: linear-gradient(135deg, var(--ss-vert) 0%, #1b4332 100%);
  box-shadow: 0 4px 18px rgba(45,106,79,0.30);
}

/* ── FAQ ───────────────────────────────────────────────────── */
.ss-faq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.ss-faq__item {
  background: var(--ss-blanc);
  border: 1.5px solid var(--ss-gris-bord);
  border-radius: var(--ss-rayon);
  padding: 1.25rem 1.5rem;
  transition: box-shadow var(--ss-transition), border-color var(--ss-transition);
  position: relative;
  overflow: hidden;
}

.ss-faq__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--ss-vert-clair), var(--ss-vert));
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: opacity var(--ss-transition);
}

.ss-faq__item:hover {
  box-shadow: var(--ss-ombre);
  border-color: var(--ss-vert-clair);
}

.ss-faq__item:hover::before {
  opacity: 1;
}

.ss-faq__item h3 {
  font-family: var(--ss-police-corps);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ss-texte);
  margin: 0 0 0.6rem !important;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

.ss-faq__item p {
  font-size: 0.95rem;
  margin: 0 !important;
  color: var(--ss-texte-moyen);
  line-height: 1.65;
}

/* ── CLUSTER VOISINES ──────────────────────────────────────── */
.ss-cluster {
  background: var(--ss-vert-bg);
  border: 1.5px solid var(--ss-gris-bord);
  border-radius: var(--ss-rayon);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}

.ss-cluster h2 {
  margin-top: 0 !important;
  font-size: 1.1rem;
  border-left: none;
  padding-left: 0;
  color: var(--ss-vert);
}

.ss-cluster p {
  margin: 0 !important;
  font-size: 0.97rem;
}

/* ── RESSOURCES ────────────────────────────────────────────── */
.ss-ressources {
  border-top: 2px solid var(--ss-gris-bord);
  padding-top: 1.75rem;
  margin-top: 2.5rem;
}

.ss-ressources h2 {
  margin-top: 0 !important;
  font-size: 1.1rem;
  border-left: none;
  padding-left: 0;
  color: var(--ss-texte-leger);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--ss-police-corps);
  font-weight: 600;
}

.ss-ressources ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ss-ressources ul li::before {
  content: '→ ';
  color: var(--ss-vert-clair);
  font-weight: 600;
}

.ss-ressources a {
  font-size: 0.95rem;
}

/* ── RESPONSIVE MOBILE ─────────────────────────────────────── */
@media (max-width: 640px) {

  .ss-article-container {
    padding: 0 1rem 2.5rem;
    font-size: 1rem;
  }

  .ss-article-container h1 {
    font-size: 1.55rem;
  }

  .ss-article-container h2 {
    font-size: 1.2rem;
  }

  .ss-cta--principal,
  .ss-cta--final {
    padding: 1.5rem 1.25rem;
  }

  .ss-cta__bouton {
    padding: 0.8rem 1.6rem;
    font-size: 0.95rem;
    display: block;
    text-align: center;
  }

  .ss-essentiel {
    padding: 1.25rem 1.25rem;
  }

  .ss-toc {
    padding: 1.1rem 1.25rem;
  }

  .ss-faq__item {
    padding: 1rem 1.1rem;
  }

  .ss-checklist ul li {
    padding: 0.75rem 0.9rem;
  }

  .ss-article-container thead th,
  .ss-article-container tbody td {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }
}

/* ── PRINT ─────────────────────────────────────────────────── */
@media print {
  .ss-cta--principal,
  .ss-cta--final {
    display: none;
  }

  .ss-article-container {
    font-size: 11pt;
    color: #000;
    max-width: 100%;
  }

  .ss-article-container a {
    color: #000;
    text-decoration: underline;
  }

  .ss-article-container figure {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}/* End custom CSS */