/* =========================================================
   ESPACE CCAS
   Univers propre, tiré du logo : bleu pétrole, anis, blanc.
   Le trèfle du logo sert de motif — filigrane, puces, séparateurs.
   ========================================================= */

.vue--ccas { min-height: 100svh; background: var(--bg); }

/* ---------- EN-TÊTE ---------- */
.ccas-entete {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 88% -10%, var(--ccas-bleu-700), transparent 58%),
    linear-gradient(155deg, var(--ccas-bleu) 0%, var(--ccas-bleu-800) 100%);
  color: #fff;
  padding: clamp(1.6rem, 4vh, 2.6rem) 0 clamp(3.4rem, 9vh, 6rem);
}
/* Trèfle géant en filigrane */
.ccas-entete__motif {
  position: absolute; right: -6%; top: -22%;
  width: min(58vw, 620px); opacity: .10;
  pointer-events: none;
  animation: trefleTourne 90s linear infinite;
}
@keyframes trefleTourne { to { transform: rotate(360deg); } }
.ccas-entete::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 64px;
  background: var(--bg);
  clip-path: ellipse(78% 100% at 50% 100%);
}
.ccas-entete .contenu { position: relative; z-index: 2; }


.ccas-marque {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem);
  margin: clamp(1.4rem, 4vh, 2.4rem) 0 1rem; flex-wrap: wrap;
}
.ccas-marque__logo {
  width: clamp(96px, 13vw, 146px); flex: none;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(2,45,60,.4);
}
.ccas-marque h1 {
  margin: 0; color: #fff;
  font-size: clamp(2.4rem, 6.4vw, 4.2rem); line-height: .9;
}
.ccas-marque__base {
  margin: .5rem 0 0; color: var(--ccas-anis);
  font-size: clamp(.78rem, 1.7vw, .95rem);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ccas-marque__quoi {
  margin: .2rem 0 0; color: rgba(255,255,255,.78);
  font-size: var(--fs-sm);
}

.ccas-accroche {
  max-width: 62ch; color: rgba(255,255,255,.92);
  font-size: clamp(1rem, 2.1vw, 1.2rem); line-height: 1.6;
}
.ccas-accroche strong { color: var(--ccas-anis); font-weight: 700; }

.ccas-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.btn--ccas      { --btn-bg: var(--ccas-anis); --btn-fg: #2b3005; }
.btn--ccas-clair{ --btn-bg: #fff; --btn-fg: var(--ccas-bleu-800); }
.btn--ccas-vide {
  --btn-bg: transparent; --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.45);
}
.btn--ccas-vide:hover { box-shadow: inset 0 0 0 1.6px #fff; }

/* Les trois adresses */
.ccas-sites {
  display: grid; gap: .8rem; margin-top: 2.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ccas-site {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  border-radius: var(--r-lg); padding: 1rem 1.1rem 1.1rem;
}
.ccas-site__feuille {
  position: absolute; right: -14px; top: -14px; width: 62px; opacity: .16;
}
.ccas-site b {
  display: block; font-family: var(--f-titre); letter-spacing: .04em;
  font-size: 1.4rem; color: var(--ccas-anis);
}
.ccas-site span { font-size: var(--fs-sm); color: rgba(255,255,255,.85); }

/* ---------- CORPS ---------- */
.ccas-section { padding: clamp(2.4rem, 6vh, 4.4rem) 0; }
.ccas-section--pale { background: var(--ccas-bleu-100); }

.ccas-titre { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.ccas-titre svg { width: 34px; flex: none; }
.ccas-titre h2 { margin: 0; color: var(--ccas-bleu-800); }
.ccas-titre p { margin: .1rem 0 0; font-size: var(--fs-sm); color: var(--texte-doux); }

/* Cartes « qu'est-ce qui vous amène » */
.ccas-grille {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ccas-carte {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: .35rem;
  padding: 1.4rem 1.3rem 1.5rem;
  background: #fff; border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--trait);
  text-decoration: none; color: var(--texte);
  transition: transform .3s var(--ease-doux), box-shadow .3s var(--ease-doux);
}
.ccas-carte::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--ccas-anis); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-doux);
}
.ccas-carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-2); }
.ccas-carte:hover::after { transform: scaleX(1); }
.ccas-carte__ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--ccas-bleu-100); color: var(--ccas-bleu); margin-bottom: .45rem;
}
.ccas-carte h3 { margin: 0; font-size: 1.5rem; color: var(--ccas-bleu-800); }
.ccas-carte p { margin: 0; font-size: var(--fs-sm); color: var(--texte-doux); }
.ccas-carte ul { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .15rem; }
.ccas-carte li { font-size: var(--fs-xs); color: var(--texte-doux); display: flex; gap: .4rem; }
.ccas-carte li::before { content: "›"; color: var(--ccas-anis-700); font-weight: 700; }

/* Les trois étapes */
.ccas-etapes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ccas-etape {
  position: relative; padding: 1.4rem 1.3rem 1.5rem 1.3rem;
  background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--trait);
}
.ccas-etape__n {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: .7rem;
  background: var(--ccas-bleu); color: #fff;
  font-family: var(--f-titre); font-size: 1.4rem;
}
.ccas-etape h3 { margin: 0 0 .2rem; font-size: 1.35rem; color: var(--ccas-bleu-800); }
.ccas-etape p { margin: 0; font-size: var(--fs-sm); color: var(--texte-doux); }

/* Encart de confiance */
.ccas-promesse {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--ccas-bleu-800); color: #fff;
  border-radius: var(--r-xl); padding: clamp(1.4rem, 3vw, 2.2rem);
  position: relative; overflow: hidden;
}
.ccas-promesse__motif { position: absolute; left: -4%; bottom: -40%; width: 230px; opacity: .12; }
.ccas-promesse > div { position: relative; z-index: 1; }
.ccas-promesse b {
  display: block; font-family: var(--f-titre); font-size: 1.45rem;
  letter-spacing: .03em; color: var(--ccas-anis); margin-bottom: .15rem;
}
.ccas-promesse span { font-size: var(--fs-sm); color: rgba(255,255,255,.85); line-height: 1.55; }

/* Contact */
.ccas-contact { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ccas-lien {
  display: grid; gap: .45rem; justify-items: center; text-align: center;
  padding: 1.3rem 1rem; background: #fff; border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--trait);
  text-decoration: none; color: var(--texte); font-weight: 600; font-size: var(--fs-sm);
  transition: transform .28s var(--ease-doux), box-shadow .28s;
}
.ccas-lien:hover { transform: translateY(-4px); box-shadow: var(--ombre-2); }
.ccas-lien .ic {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ccas-bleu); color: #fff;
}
.ccas-lien small { display: block; font-weight: 400; color: var(--texte-doux); font-size: var(--fs-xs); }

.ccas-pied {
  background: var(--ccas-bleu-900); color: rgba(255,255,255,.8);
  padding: 2.4rem 0 1.6rem;
}
.ccas-pied a { color: #fff; }
.ccas-pied img { width: 64px; border-radius: 12px; }

@media (max-width: 640px) {
  .ccas-entete { padding-bottom: 3rem; }
  .ccas-marque__logo { width: 78px; border-radius: 14px; }
  .ccas-marque h1 { font-size: clamp(2.1rem, 11vw, 3rem); }
  .ccas-grille, .ccas-etapes { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .ccas-carte, .ccas-etape { padding: .95rem .85rem 1.1rem; border-radius: 16px; }
  .ccas-carte h3, .ccas-etape h3 { font-size: 1.12rem; }
  .ccas-carte p, .ccas-etape p { font-size: .78rem; }
  .ccas-carte ul { display: none; }
  .ccas-carte__ico, .ccas-etape__n { width: 36px; height: 36px; border-radius: 11px; }
  .ccas-sites { grid-template-columns: 1fr; }
  .ccas-contact { grid-template-columns: 1fr 1fr; }
  .ccas-promesse { grid-template-columns: 1fr; gap: .7rem; }
}


/* ═══════════════════════════════════════════════════════════
   LE MINI-SITE : attache, barre de navigation, pages, plan
   ═══════════════════════════════════════════════════════════ */

/* --- Le fil qui rattache à la commune ------------------------------- */
.ccas-attache {
  background: var(--ccas-bleu-900);
  color: #cfe7f0;
  font-size: .76rem;
  letter-spacing: .015em;
}
.ccas-attache__in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 34px; flex-wrap: wrap;
}
.ccas-attache b { color: #fff; font-weight: 600; }
.ccas-attache a {
  margin-left: auto; display: inline-flex; align-items: center; gap: .38rem;
  color: #fff; text-decoration: none; font-weight: 600;
  padding: .22rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: background .18s;
}
.ccas-attache a:hover { background: rgba(255,255,255,.26); }

/* --- Sa barre de navigation ----------------------------------------- */
.ccas-barre {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ccas-bleu-100);
  box-shadow: 0 1px 0 rgba(3,131,168,.06), 0 10px 24px -20px rgba(2,61,80,.6);
}
.ccas-barre__in {
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px; padding-block: .5rem;
}
.ccas-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.ccas-logo img { width: 40px; height: 40px; }
.ccas-logo b {
  display: block; font-family: var(--titre, inherit);
  font-size: 1.18rem; line-height: 1; letter-spacing: .04em;
  color: var(--ccas-bleu-800);
}
.ccas-logo small {
  display: block; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ccas-anis-700); font-weight: 700;
}

.ccas-nav { display: flex; gap: .1rem; flex-wrap: wrap; margin-left: auto; }
.ccas-nav a {
  position: relative;
  padding: .5rem .72rem; border-radius: 8px;
  font-size: .86rem; font-weight: 600; text-decoration: none;
  color: var(--ccas-encre); white-space: nowrap;
  transition: background .16s, color .16s;
}
.ccas-nav a::after {
  content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .24rem;
  height: 2px; border-radius: 2px; background: var(--ccas-anis);
  transform: scaleX(0); transform-origin: left; transition: transform .22s;
}
.ccas-nav a:hover { background: var(--ccas-bleu-50); }
.ccas-nav a:hover::after { transform: scaleX(1); }
.ccas-nav a[aria-current="page"] { color: var(--ccas-bleu-800); }
.ccas-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--ccas-bleu); height: 3px; }

.ccas-barre__cta {
  flex: none; padding: .52rem 1rem; border-radius: 999px;
  background: var(--ccas-bleu); color: #fff;
  font-size: .84rem; font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 16px -8px rgba(3,131,168,.9);
  transition: transform .16s, background .16s;
}
.ccas-barre__cta:hover { background: var(--ccas-bleu-700); transform: translateY(-1px); }

.ccas-burger {
  display: none; flex: none;
  width: 42px; height: 38px; border: 1px solid var(--ccas-bleu-100);
  border-radius: 10px; background: #fff; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.ccas-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--ccas-bleu-800); transition: transform .2s, opacity .2s;
}
.ccas-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ccas-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ccas-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Fil d'Ariane ---------------------------------------------------- */
.ccas-fil { background: var(--ccas-bleu-50); border-bottom: 1px solid var(--ccas-bleu-100); }
.ccas-fil ol {
  list-style: none; margin: 0 auto; padding: .5rem 0;
  display: flex; gap: .4rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--texte-doux);
  max-width: var(--large, 1180px); padding-inline: var(--marge, 1.2rem);
}
.ccas-fil li::after { content: "›"; margin-left: .4rem; opacity: .5; }
.ccas-fil li:last-child::after { content: none; }
.ccas-fil a { color: var(--ccas-bleu-700); text-decoration: none; }
.ccas-fil a:hover { text-decoration: underline; }
.ccas-fil [aria-current="page"] { color: var(--ccas-encre); font-weight: 600; }

/* --- Les pages ------------------------------------------------------- */
.ccas-page { display: none; }
.ccas-page.actif { display: block; }
.ccas-page[hidden] { display: none !important; }

/* Le héros de la page d'accueil porte désormais une photo de la commune,
   bichromée aux couleurs du CCAS pour rester dans son univers. */
/* La photo du héros. Elle passe par ::before : ::after sert déjà à
   découper l'ellipse blanche en bas du bandeau — l'écraser revenait à
   perdre les deux. Le voile est posé DANS la même couche, ce qui garde
   le texte blanc lisible quoi qu'il y ait sur la photo. */
.ccas-entete::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(105deg, rgba(2,61,80,.93) 0%, rgba(2,61,80,.72) 44%,
                            rgba(3,131,168,.42) 78%, rgba(3,131,168,.30) 100%),
    var(--photo);
  background-size: cover; background-position: center 64%;
}
.ccas-entete__motif { z-index: 2; }
.ccas-entete .contenu { z-index: 3; }

/* Bandeau de rubrique */
.rub-tete {
  position: relative; overflow: hidden;
  color: #fff; padding: 3.6rem 0 3rem;
  background: var(--ccas-bleu-900);
}
/* Photo + voile dans la même couche : impossible que l'un masque l'autre. */
.rub-tete__img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 58%;
}
.rub-tete__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(2,61,80,.92) 0%, rgba(2,61,80,.66) 42%,
                                      rgba(3,131,168,.34) 76%, rgba(3,131,168,.22) 100%);
}
.rub-tete .contenu { position: relative; z-index: 2; }
.rub-tete__sur {
  display: inline-block; margin-bottom: .5rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ccas-anis);
}
.rub-tete h2 {
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.02; margin: 0 0 .7rem;
  color: #fff;
}
.rub-tete__chapo {
  max-width: 60ch; font-size: 1.02rem; line-height: 1.55; color: #dcf0f7; margin: 0;
}

.rub-corps { padding: 2.4rem 0 3rem; }
.rub-bloc + .rub-bloc { margin-top: 2.6rem; }
.rub-bloc > h3 {
  font-size: 1.32rem; margin: 0 0 1rem; color: var(--ccas-bleu-800);
  display: flex; align-items: center; gap: .5rem;
}
.rub-bloc > h3::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px;
  background: var(--ccas-anis); flex: none;
}

.rub-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .9rem; }
.rub-carte {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--ccas-bleu-100);
  border-radius: 14px; padding: 1.05rem 1.1rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.rub-carte:hover {
  transform: translateY(-3px); border-color: var(--ccas-bleu-300);
  box-shadow: 0 16px 30px -22px rgba(2,61,80,.8);
}
.rub-carte h4 { margin: 0 0 .35rem; font-size: 1.02rem; color: var(--ccas-encre); }
.rub-carte p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--texte-doux); }
.rub-carte__b {
  display: inline-block; margin-top: .7rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--ccas-anis-100); color: var(--ccas-anis-700);
}
.rub-carte__fl { color: var(--ccas-bleu); font-weight: 700; }

.rub-texte p { max-width: 68ch; line-height: 1.65; margin: 0 0 .8rem; }

.rub-etapes { display: grid; gap: .7rem; counter-reset: e; }
.rub-etape {
  display: grid; grid-template-columns: 38px 1fr; gap: .9rem; align-items: start;
  background: #fff; border: 1px solid var(--ccas-bleu-100);
  border-left: 3px solid var(--ccas-bleu); border-radius: 12px; padding: .9rem 1rem;
}
.rub-etape__n {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--ccas-bleu); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.rub-etape h4 { margin: .25rem 0 .2rem; font-size: 1rem; }
.rub-etape p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--texte-doux); }

.rub-infos {
  background: #fff; border: 1px solid var(--ccas-bleu-100); border-radius: 14px;
  overflow: hidden;
}
.rub-info {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 1rem;
  padding: .85rem 1.1rem;
}
.rub-info + .rub-info { border-top: 1px solid var(--ccas-bleu-100); }
.rub-info dt { font-weight: 700; color: var(--ccas-bleu-800); font-size: .88rem; }
.rub-info dd { margin: 0; font-size: .92rem; line-height: 1.5; }

.rub-appel {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--ccas-bleu-800), var(--ccas-bleu));
  color: #fff; border-radius: 18px; padding: 1.6rem 1.5rem;
}
.rub-appel h3 { margin: 0 0 .5rem; font-size: 1.3rem; color: #fff; }
.rub-appel h3::before { content: none; }
.rub-appel p { margin: 0 0 1.1rem; max-width: 58ch; line-height: 1.55; color: #ddf1f8; }
.rub-appel__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.rub-appel__btns a {
  padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .9rem;
}
.rub-appel__btns a:first-child { background: var(--ccas-anis); color: #2c3400; }
.rub-appel__btns a + a { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }

/* Les rubriques voisines, en bas de chaque page */
.rub-suite { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 1px solid var(--ccas-bleu-100); }
.rub-suite h3 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux); margin: 0 0 .7rem; }
.rub-suite__l { display: flex; gap: .5rem; flex-wrap: wrap; }
.rub-suite__l a {
  padding: .5rem .9rem; border-radius: 999px; text-decoration: none;
  background: #fff; border: 1px solid var(--ccas-bleu-100);
  font-size: .86rem; font-weight: 600; color: var(--ccas-bleu-800);
}
.rub-suite__l a:hover { border-color: var(--ccas-bleu-300); background: var(--ccas-bleu-50); }

/* --- Le plan du site, dans le pied ---------------------------------- */
.ccas-plan {
  display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 2rem;
  padding-bottom: 1.4rem;
}
.ccas-plan__marque img { width: 56px; height: 56px; margin-bottom: .7rem; }
.ccas-plan__marque p { margin: 0 0 .7rem; font-size: .84rem; line-height: 1.55; opacity: .85; }
.ccas-plan__tel {
  display: inline-block; font-weight: 800; font-size: 1.05rem;
  color: var(--ccas-anis); text-decoration: none;
}
.ccas-plan__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; }
.ccas-plan__col h3 {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 .5rem; opacity: .7;
}
.ccas-plan__col a {
  display: block; padding: .2rem 0; font-size: .87rem;
  text-decoration: none; opacity: .9;
}
.ccas-plan__col a:hover { text-decoration: underline; opacity: 1; }
.ccas-pied__bas {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .78rem; opacity: .8;
}
.ccas-pied__bas a { margin-left: auto; color: inherit; }

@media (max-width: 900px) {
  .ccas-plan { grid-template-columns: 1fr; gap: 1.4rem; }
}
@media (max-width: 860px) {
  .ccas-burger { display: flex; }
  .ccas-barre__cta { display: none; }
  .ccas-nav {
    order: 3; width: 100%; margin-left: 0;
    display: none; flex-direction: column; gap: 0;
    border-top: 1px solid var(--ccas-bleu-100); padding-top: .4rem; margin-top: .4rem;
  }
  .ccas-nav.ouvert { display: flex; }
  .ccas-nav a { padding: .7rem .2rem; font-size: .95rem; }
  .ccas-nav a::after { display: none; }
  .ccas-nav a[aria-current="page"] { color: var(--ccas-bleu); }
  .ccas-barre__in { flex-wrap: wrap; }
  .rub-tete { padding: 2.2rem 0 1.9rem; }
  .rub-cartes { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .rub-carte { padding: .8rem .85rem; }
  .rub-carte h4 { font-size: .92rem; }
  .rub-carte p { font-size: .8rem; }
  .rub-info { grid-template-columns: 1fr; gap: .2rem; }
  .ccas-attache__in { font-size: .72rem; }
}
@media (max-width: 420px) {
  .rub-cartes { grid-template-columns: 1fr; }
}


/* --- La bande photo de l'accueil du CCAS ----------------------------- */
.ccas-bande {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  margin-top: 1.8rem;
}
.ccas-vue {
  position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 19 / 13; background: var(--ccas-bleu-100);
}
.ccas-vue img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ccas-vue:hover img { transform: scale(1.05); }
.ccas-vue figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(2,61,80,.92));
  color: #fff; font-size: .86rem; line-height: 1.35;
}
.ccas-vue figcaption b { display: block; font-size: .96rem; }
.ccas-vue figcaption small { opacity: .85; font-size: .76rem; }
@media (max-width: 640px) {
  .ccas-bande { grid-template-columns: 1fr 1fr; }
  .ccas-bande figure:last-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}


/* ═══════════════════════════════════════════════════════════
   LE RIDEAU DE TRANSITION, AUX COULEURS DU CCAS
   Il prend la couleur de l'endroit où l'on ARRIVE : bleu pétrole
   quand on entre au CCAS, vert quand on revient à la Ville.
   Le liseré anis marque son bord d'attaque.
   ═══════════════════════════════════════════════════════════ */
body[data-univers="ccas"] #rideau {
  background:
    linear-gradient(to bottom, var(--ccas-anis) 0 5px, transparent 5px),
    radial-gradient(90% 70% at 50% 40%, var(--ccas-bleu-700), transparent 70%),
    linear-gradient(120deg, var(--ccas-bleu) 0%, var(--ccas-bleu-900) 64%);
}

/* ═══════════════════════════════════════════════════════════
   L'ASSISTANT, VERSION CCAS
   Même mascotte, autre casquette. Tout ce qui était vert commune
   passe en bleu pétrole ; l'anis sert d'accent.
   ═══════════════════════════════════════════════════════════ */
.tg--ccas .tg__bouton {
  background: linear-gradient(140deg, var(--ccas-bleu-700), var(--ccas-bleu-900));
}
.tg--ccas .tg__pastille {
  background: var(--ccas-anis);
  box-shadow: 0 0 0 3px rgba(202,219,42,.32);
}
.tg--ccas .tg__tete {
  background: linear-gradient(120deg, var(--ccas-bleu), var(--ccas-bleu-900));
}
/* Le liseré anis autour de la tête : le seul signe visuel qui dit
   « c'est bien lui, mais côté CCAS ». */
.tg--ccas .tg__tete > img { box-shadow: 0 0 0 2px var(--ccas-anis); border-radius: 50%; }
.tg--ccas .tg__bulle--moi { background: var(--ccas-bleu); }
.tg--ccas .tg__aller {
  background: var(--ccas-bleu); border-color: var(--ccas-bleu);
}
.tg--ccas .tg__aller:hover {
  background: var(--ccas-anis); color: #2b3005; border-color: var(--ccas-anis);
}
.tg--ccas .tg__liens a:hover {
  background: var(--ccas-anis); color: #2b3005; border-color: var(--ccas-anis);
}
.tg--ccas .tg__puces button:hover {
  border-color: var(--ccas-bleu); color: var(--ccas-bleu-800);
  background: var(--ccas-bleu-50);
}
.tg--ccas .tg__saisie button { background: var(--ccas-bleu); }
.tg--ccas .tg__saisie button:hover { background: var(--ccas-bleu-700); }
.tg--ccas .tg__saisie input:focus { border-color: var(--ccas-bleu); }
.tg--ccas .tg__mentions {
  background: var(--ccas-bleu-50); color: var(--ccas-bleu-800);
}