/* Thème « souple » (docs/theme-souple.md) : chargé après style.css et trame-rue.css, seulement sur les sites dont config.json
   porte identite = {"trame": "rue", "theme": "souple"} (html.theme-souple). Tout est préfixé .theme-souple : sans cette classe,
   aucune règle de ce fichier ne s'applique.

   Sommaire
     1. Variables : palette de la région (--s-*, posée par la page) et jetons communs
     2. Base : typographie, liens, focus, conteneur
     3. En-tête, navigation, menu mobile
     4. Boutons, champs, recherche
     5. Accueil : héros (ciel, soleil, titre), scène de la rue, étiquettes, fiches, animations
     6. Accueil : bande de mer, vagues, sections (marché, loyers, DPE, agences, communes, actualité, estimation)
     7. Pages intérieures : ouverture, fil d'Ariane, blocs, tuiles, graphiques, tableaux, cartes, annuaire, formulaires, FAQ, articles
     8. Pied de page
     9. Adaptation : écrans moyens, tablettes, mobiles
    10. Animations à l'apparition, mouvement réduit, impression
   Mode sombre : aucun (thème clair unique), voir docs/theme-souple.md.
   Animations : transform et opacity seulement. */

/* =========================================================== 1. Variables */
:root.theme-souple {
  color-scheme: light;
  /* variables historiques de style.css et de trame-rue.css, ramenées sur la palette de la région : tous les composants
     existants (graphiques, tableaux, cartes, formulaires…) prennent les couleurs du thème sans règle supplémentaire */
  --accent: var(--s-focus);
  --accent-texte: var(--s-lien);
  --accent-doux: color-mix(in srgb, var(--s-focus) 9%, #fff);
  --fond: var(--s-fond);
  --surface: #fff;
  --encre: var(--s-encre);
  --encre-2: var(--s-encre-2);
  --muet: var(--s-encre-3);
  --filet: color-mix(in srgb, var(--s-encre) 11%, #fff);
  --axe: color-mix(in srgb, var(--s-encre) 30%, #fff);
  --piste: color-mix(in srgb, var(--s-focus) 9%, #fff);
  --pale: var(--s-bande);
  --survol: color-mix(in srgb, var(--s-focus) 9%, #fff);
  --s1: var(--s-focus);
  --s2: var(--s-chaud);
  --serif: var(--titres);
  --sans: var(--texte);
  --rayon: 24px;
  --ombre: 0 1px 2px rgba(15, 43, 64, .05), 0 12px 32px -12px rgba(15, 43, 64, .18);
  --ombre-haute: 0 2px 4px rgba(15, 43, 64, .06), 0 26px 50px -18px rgba(15, 43, 64, .3);
  /* jetons du thème */
  --r-xl: 40px;
  --r-l: 28px;
  --r-m: 20px;
  --ressort: cubic-bezier(.2, .8, .2, 1);
  --h-entete: 64px;
  --s-soleil-doux: color-mix(in srgb, var(--s-soleil) 28%, transparent);
}
.theme-souple { scroll-padding-top: 92px; }
@media (prefers-reduced-motion: no-preference) { .theme-souple { scroll-behavior: smooth; } }

/* =========================================================== 2. Base */
.theme-souple body {
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  background-color: var(--s-fond);
  color: var(--s-encre);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* pages intérieures : un ciel léger derrière l'en-tête, le fil d'Ariane et l'ouverture de page */
.theme-souple:not(.accueil-souple) body {
  background-image:
    radial-gradient(ellipse 560px 470px at calc(100% - 60px) 110px, rgba(255, 253, 247, .95), rgba(255, 246, 230, .7) 28%, rgba(255, 234, 242, .22) 62%, rgba(255, 234, 242, 0) 100%),
    linear-gradient(180deg, var(--s-ciel-2) 0, color-mix(in srgb, var(--s-ciel-2) 55%, var(--s-fond)) 300px, var(--s-fond) 560px);
  background-repeat: no-repeat;
}
.theme-souple h1, .theme-souple h2, .theme-souple h3 {
  font-family: var(--titres);
  color: var(--s-encre);
  text-wrap: balance;
  font-optical-sizing: auto;
}
.theme-souple h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); line-height: 1.05; font-weight: 700; letter-spacing: -.012em; margin-bottom: .4em; }
.theme-souple h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.08; font-weight: 700; letter-spacing: -.012em; margin-bottom: .5em; }
.theme-souple h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 700; letter-spacing: -.008em; }
.theme-souple p { text-wrap: pretty; }
.theme-souple sup { font-size: .62em; line-height: 0; vertical-align: .62em; margin-left: .04em; }
.theme-souple small { color: var(--s-encre-3); }
.theme-souple a { color: var(--s-lien); }
.theme-souple :focus-visible { outline: 3px solid var(--s-focus); outline-offset: 3px; border-radius: 8px; }
.theme-souple .conteneur { max-width: 1296px; padding-inline: 28px; }
.theme-souple .conteneur-texte { max-width: 780px; padding: 40px 28px 24px; }
.theme-souple .evitement:focus { border-radius: 14px 14px 6px 6px; box-shadow: var(--ombre-haute); }
/* texte réservé aux lecteurs d'écran (le thème l'appelle .visuel-masque ; .vh vient de trame-rue.css) */
.theme-souple .visuel-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-souple main { display: block; }
.theme-souple .surtitre, .theme-souple .surt {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font: 600 14.5px/1.2 var(--texte); text-transform: none; letter-spacing: .01em; color: var(--s-encre-2);
}
.theme-souple .surt { display: inline-flex; font-size: 14px; color: var(--s-lien); margin-bottom: 0; }
.theme-souple .surtitre::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle, #FFE29A 0 35%, var(--s-soleil) 36%); box-shadow: 0 0 0 4px var(--s-soleil-doux);
}
.theme-souple .surt::before { content: ""; width: 12px; height: 14px; border-radius: 6px 6px 1px 1px; background: currentColor; opacity: .85; }
.theme-souple .chapo { font-size: 1.15rem; line-height: 1.55; color: var(--s-encre-2); max-width: 62ch; }
.theme-souple .lead { font-size: 1.15rem; line-height: 1.65; max-width: 70ch; }
.theme-souple .intro { color: var(--s-encre-2); font-size: 1.1rem; max-width: 60ch; margin: 18px 0 0; }
.theme-souple .lien-fleche {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding-bottom: 3px;
  font-weight: 600; text-decoration: none; color: var(--s-lien);
  border-bottom: 2px solid color-mix(in srgb, var(--s-focus) 28%, transparent); transition: border-color .25s;
}
.theme-souple .lien-fleche::after { content: "→"; transition: transform .3s var(--ressort); }
.theme-souple .lien-fleche:hover { border-color: var(--s-lien); text-decoration: none; }
.theme-souple .lien-fleche:hover::after { transform: translateX(3px); }
.theme-souple .liens-fleches a::after { content: " →"; }
.theme-souple .etat {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px;
  font: 600 13.5px/1.2 var(--texte); color: var(--s-encre);
}
.theme-souple .etat::before { content: ""; width: 10px; height: 12px; border-radius: 5px 5px 1px 1px; background: var(--s-soleil); box-shadow: 0 0 0 3px var(--s-soleil-doux); }
.theme-souple .vide {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 14px 16px; border-radius: 16px;
  background: var(--s-bande); font-size: .95rem; color: var(--s-encre-2);
}
.theme-souple .vide svg { flex: none; margin-top: 2px; color: var(--s-encre-3); }

/* =========================================================== 3. En-tête */
.theme-souple .bandeau-brouillon {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; padding: 7px 14px;
  background: #fff1c2; color: #4d3b00; font-size: .8125rem; line-height: 1.35; text-align: center;
  box-shadow: 0 -1px 0 rgba(77, 59, 0, .12);
}
.theme-souple body:has(.bandeau-brouillon) .pied { padding-bottom: 56px; }
.theme-souple .entete {
  position: sticky; top: 0; z-index: 50; border-bottom: 0;
  background: #F6FAFB; box-shadow: 0 1px 0 rgba(15, 43, 64, .08), 0 10px 24px -22px rgba(15, 43, 64, .5);
  transition: background-color .4s, box-shadow .4s;
}
.theme-souple .entete-in { min-height: 0; padding-block: 10px; gap: 20px; transition: padding .4s var(--ressort); flex-direction: row; align-items: center; }
/* accueil : l'en-tête flotte, transparent, sur le ciel ; il prend un fond plein dès qu'on descend */
.theme-souple.accueil-souple .entete { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; }
.theme-souple.accueil-souple .entete-in { padding-block: 18px; }
.theme-souple.accueil-souple .entete.replie, .theme-souple.accueil-souple .entete.ouvert {
  background: #F6FAFB; box-shadow: 0 1px 0 rgba(15, 43, 64, .08), 0 10px 24px -22px rgba(15, 43, 64, .5);
}
.theme-souple.accueil-souple .entete.replie .entete-in, .theme-souple.accueil-souple .entete.ouvert .entete-in { padding-block: 10px; }
.theme-souple .logo-rue { gap: 11px; color: var(--s-encre); text-decoration: none; }
.theme-souple .logo-rue .embleme { width: 34px; height: 37px; flex: none; }
.theme-souple .logo-mots { flex-direction: row; align-items: baseline; gap: .3em; line-height: 1; white-space: nowrap; }
.theme-souple .logo-region { font: 800 23px/1 var(--titres); letter-spacing: -.02em; color: var(--s-encre); }
.theme-souple .logo-metier {
  font: 500 23px/1 var(--titres); letter-spacing: -.005em; text-transform: capitalize; color: var(--s-encre-2); padding: 0; margin: 0;
}
.theme-souple .logo-rue:hover .logo-region { color: var(--s-encre); }
.theme-souple .nav { margin-left: auto; }
.theme-souple .nav ul { gap: 2px; flex-wrap: nowrap; }
.theme-souple .nav li { white-space: nowrap; }
.theme-souple .nav a {
  position: relative; padding: 12px 12px 15px; border-radius: 0; background: none;
  font: 500 15.5px/1 var(--texte); color: var(--s-encre); text-decoration: none;
}
.theme-souple .nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 16px; height: 8px; margin-left: -8px;
  border-radius: 8px 8px 0 0; background: var(--s-chaud); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .3s var(--ressort);
}
.theme-souple .nav a:hover, .theme-souple .nav a:focus-visible { background: none; color: var(--s-encre); }
.theme-souple .nav a:hover::after, .theme-souple .nav a:focus-visible::after, .theme-souple .nav a[aria-current="page"]::after { transform: none; }
.theme-souple .nav a[aria-current="page"] { background: none; color: var(--s-encre); font-weight: 700; }
.theme-souple .nav .nav-cta { display: none; }
.theme-souple .entete-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.theme-souple .bouton-entete { display: inline-flex; height: 46px; padding: 0 22px; font-size: 15px; }
.theme-souple .menu-bouton {
  display: none; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px;
  border: 0; border-radius: 16px 16px 7px 7px; background: rgba(255, 255, 255, .82); color: var(--s-encre);
  font: 600 15px/1 var(--texte); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(15, 43, 64, .1);
}
.theme-souple .menu-bouton:hover { background: #fff; }

/* =========================================================== 4. Boutons et champs */
.theme-souple .bouton, .theme-souple .recherche button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; padding: 0 26px;
  border: 0; border-radius: 22px 22px 8px 8px; background: var(--s-encre); color: #fff;
  font: 600 16px/1 var(--texte); letter-spacing: 0; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .35s var(--ressort), background-color .3s;
}
.theme-souple .bouton:hover, .theme-souple .recherche button:hover { background: color-mix(in srgb, var(--s-encre) 82%, var(--s-focus)); filter: none; transform: translateY(-2px); text-decoration: none; }
.theme-souple .bouton-soleil { background: var(--s-soleil); color: var(--s-encre); }
.theme-souple .bouton-soleil:hover { background: color-mix(in srgb, var(--s-soleil) 82%, #fff); }
.theme-souple .bouton-clair { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); backdrop-filter: none; }
.theme-souple .bouton .rond {
  width: 24px; height: 26px; margin-right: -10px; border-radius: 12px 12px 4px 4px; background: rgba(15, 43, 64, .1);
  display: grid; place-items: center; transition: transform .35s;
}
.theme-souple .bouton:hover .rond { transform: translateX(3px); }
.theme-souple .bouton-entete { border-radius: 20px 20px 7px 7px; }
.theme-souple .boutons { gap: 12px; }

.theme-souple .recherche { max-width: 580px; margin: 24px 0 32px; }
.theme-souple .recherche label, .theme-souple .filtre label { font: 600 .9rem/1.3 var(--texte); color: var(--s-encre); margin-bottom: 6px; }
.theme-souple .recherche-champ {
  display: flex; align-items: center; gap: 0; height: 62px; padding: 6px 6px 6px 20px;
  border-radius: 22px 22px 12px 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(15, 43, 64, .06), 0 18px 40px -20px rgba(15, 43, 64, .45); transition: box-shadow .3s;
}
.theme-souple .recherche-champ:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--s-focus) 24%, transparent), 0 18px 40px -20px rgba(15, 43, 64, .45); }
.theme-souple .recherche .loupe { flex: none; color: var(--s-encre-3); }
.theme-souple .recherche input, .theme-souple .filtre input {
  flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: none; padding: 0 12px;
  font: 400 16.5px/1 var(--texte); color: var(--s-encre); text-overflow: ellipsis;
}
.theme-souple .recherche input:focus, .theme-souple .filtre input:focus { outline: none; border: 0; }
.theme-souple .recherche input::placeholder, .theme-souple .filtre input::placeholder { color: #5F7587; opacity: 1; text-overflow: ellipsis; }
.theme-souple .recherche button { height: 50px; padding: 0 24px; border-radius: 17px 17px 7px 7px; gap: 0; }   /* « Voir<span> la commune</span> » : l'espace est dans le texte */
.theme-souple .recherche button .plus { white-space: pre; }
.theme-souple .filtre { max-width: 460px; margin: 8px 0 20px; }
.theme-souple .filtre input {
  height: 48px; padding: 0 16px; border-radius: 16px 16px 8px 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet), var(--ombre);
}
.theme-souple .filtre input:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 2px; }
.theme-souple .suggestions {
  margin-top: 8px; padding: 8px; border: 0; border-radius: 20px 20px 14px 14px; background: #fff; box-shadow: var(--ombre-haute); z-index: 60;
}
.theme-souple .suggestions li { padding: 11px 12px; border-radius: 12px; }
.theme-souple .suggestions li[aria-selected="true"], .theme-souple .suggestions li:hover { background: var(--s-bande); }
.theme-souple .une-photo .recherche { margin-bottom: 0; }
.theme-souple .une-bas .recherche { background: #fff; border: 0; border-radius: 28px 28px 16px 16px; box-shadow: var(--ombre-haute); }
.theme-souple .une-bas .recherche-champ { box-shadow: inset 0 0 0 1px var(--filet); }

/* ---- Pause des animations (WCAG 2.2.2) : case à cocher étiquetée, utilisable au clavier et sans JavaScript ;
        trame-souple.js synchronise les cases (héros et pied), pose .anim-stop sur <html> et retient le choix (localStorage) ---- */
.theme-souple .anim-pause {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px 0 14px;
  font: 600 .85rem/1.2 var(--texte); border-radius: 999px; cursor: pointer; user-select: none;
  color: var(--s-encre); background: rgba(255, 255, 255, .88); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-encre) 24%, #fff), 0 6px 18px -10px rgba(15, 43, 64, .45);
  transition: background .2s, color .2s;
}
.theme-souple .anim-pause:hover { background: #fff; }
.theme-souple .anim-case { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.theme-souple .anim-icone { flex: none; width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%); }
.theme-souple .anim-pause:has(.anim-case:focus-visible) { outline: 3px solid var(--s-focus); outline-offset: 3px; }
.theme-souple .anim-pause:has(.anim-case:checked) { background: var(--s-encre); color: #fff; box-shadow: none; }
.theme-souple .anim-pause:has(.anim-case:checked) .anim-icone { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* héros : une ligne sans hauteur sous le texte ; le bouton se pose dans le ciel, à droite sur grand écran */
.theme-souple .anim-coin { position: relative; z-index: 9; height: 0; }
.theme-souple .anim-coin .anim-pause { position: absolute; right: 28px; top: -66px; }
@media (max-width: 1100px) { .theme-souple .anim-coin .anim-pause { right: auto; left: 28px; top: 14px; } }
@media (max-width: 820px) { .theme-souple .anim-coin .anim-pause { left: 18px; } .theme-souple .anim-pause { min-height: 44px; } }
/* pied : bouton en contour clair sur la mer */
.theme-souple .anim-pied { margin: 4px 0 0; background: transparent; color: #CFE0EA; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.theme-souple .anim-pied:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.theme-souple .anim-pied:has(.anim-case:focus-visible) { outline-color: #fff; }
.theme-souple .anim-pied:has(.anim-case:checked) { background: #fff; color: var(--s-mer-f); }
@media (prefers-reduced-motion: reduce) { .theme-souple .anim-pause { display: none; } }   /* tout est déjà immobile */
@media print { .theme-souple .anim-pause, .theme-souple .anim-coin { display: none; } }

/* =========================================================== 5. Accueil : le héros et la rue
   Contrat de la scène (generateur/scenes.py, docs/theme-souple.md) : le module de la région fournit, dans .heros,
     .ciel                       boîte de ciel à droite du titre (animaux du ciel, aria-hidden)
     .scene-cadre > .scene > .scene-in   cadre, zone défilante (mobile) et plan de 1440 × 648
        svg.calque.fond / .mer / .rue / .vie   calques SVG empilés (fond et vie sans pointeur)
        .calque-x                 petits calques HTML animés (mer, couronnes : transform et opacity seulement)
        .etiquettes-x > a.etiq-x#e-N     étiquettes (lien de souris, masquées aux lecteurs d'écran)
        .fiches-x > .fiche-x#fiche-N     fiches de survol (fenêtre et persiennes)
     a.maison#m-N dans svg.calque.rue    un lien par commune (nom accessible complet, aria-describedby = fiche)
     g.corps, g.palmier, g.accolades > g.acc#a-N, g.voile, rect.rayon   éléments animés ou survolables
   Le survol, le focus clavier et l'étiquette partagent leurs règles (bloc généré du § « survol », îlots 0 à 15). */
.theme-souple .heros {
  --bord: max(32px, calc((100% - 1240px) / 2));
  position: relative; overflow: hidden; isolation: isolate; padding-top: 108px;
  background: linear-gradient(180deg, var(--s-ciel-0) 0, var(--s-ciel-1) 230px, var(--s-ciel-2) 420px, var(--s-ciel-3) 590px, var(--s-ciel-4) 740px, var(--s-ciel-5) 900px);
}
.theme-souple .heros::after {
  content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: .12;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAHc0lEQVR42g3Vj39I1QIA8IunHp17zz3n3HvOveece865qC37lMTyTEz4iFivj/Y2n6HaW0Z+RkW8ik9+L/VRaNaUbUjWaMKTiamsDY+w/HjeLNl7aXryrLGRH88/8f1as9QA1mRifZeYH83E/4t+C9JImqwGBvk+9Jr0t+EB1eDugti9iefHP5gPwiq1NTqiZlDHe5omG2uSWeynOldNi1PuHHM7+qfDR20WbIzeka/aH4EE6OIj/kLXp0VscLCXV5meOi+c5f/gFUabwPeqGFh79SC7lG+Lt+l3xD1Kxx3ZXNPor0UVqIgt8r+CthroTzNLyAZUb7rDdXQ6z3DKzFT1k/cSRDKbWmO8zSZJl6sB4UqZx7eY4/4JddSudXNBs66PptmN8fJoM+mk3oOv20iODUNwFWbKAtJR1toptL9nNdvbyFjYF832HgPXzD/sPLJEn7KbqGX3t1PtzsJ1rtOnaBdWZapVIVuEPwlT3TZBohplV/KvDdVWnb3H3KInw1/A6zhPdQmnhwPAx2whvAj3xr1oT9VWDCXVdjf1cLwXAdoPpMRX/QIHq9mwR6Sjj5U12vkbmsP3e1/qg+yEs1e+Go4IW9xD7tPwljinnnUX42GqmOTHtXox/hAsEd/gkeoLsk4MDa/oF7gjrHsDxl8hnfGbJNsbjLCXYRehU04S7OattP/OywCkG8OvRQK+HvSP1sKlzhl4Vs6FlfGXPD9eBDfFVkp8Q26z34/HmOFot/kZ9oqG0JNRgXmWX/WznEdQDevh5QXC9UUe2U4P887sFkzzesS9VW/0nDoeWzXuE0FOlKlG4bnsfdAQ7qMfmVuyIG4B2aYNnClGyl9wjpxkN8B34yfdS04IvtAzZYLoQNfTcvd+bSHnM2zwD6SV9rKPOrmoRjQ5p/B1/x5+ITiLGu15bDffqQ+RNng+G8pz0ESQqQ7LDOO4f9IZ/HdkKXCYl4SuPTvwghvgRfJQ0ITTaR+Wqrm/lBeIOdFiUGbKaTe73mkDYfwgyJRYCLwRN9MrDAXWar3feR/Vwuro0+gwqop2oJ3hWdIgyr0M+a3w3UxwyelOZ2mpA/6rKWWWkxMk0zXwJ2ciCdyhymoPX/EnkBNybfQcz9KJdm8NYK6XBH8Npse9TGu8Jfg3XKkbghdgO15gEugW3OpUhJ30ZLLV/pTUcSvJm0rT8VR9MTrBsvVRcUQgvwPqDtJ8bS7bOfhtccYu58/7Q2GDf4wn4CfFu8EeVOdfFNPYch9yq5KtIu3BQDM86ohCMJ5vZ0g8Q+7yzlCuH+JrvDfi2+ECSsG/7HT1hlsry6JB3h8RA61G8Uvye2Zl+mOcx6Oe4Tb+s/cmXyb/rIpdEraSC+otUKL6iP7eElgf38eQvGb+g9ew0WZfUGznYUJLdE20zLYGhnPDRPEKTpQpJtW09TuHS8R/vRVRgF4VGe5wdCk+aP7g1tijTZafbQa4gUyLJgePhNXI9pLdFNfKd/exBNyODRGvO9ujVlgkOrJz6ghfzYdHjUGuzkcFqMQb5wodhaPg3ahfUCmXOhejH+kTaiptlFalKVE7dDl9z89DqXoanePXe+fdZpqlz2nuHA9X2rOCffg+Ntm+AeuCnaCA7Q7OsmR1011PLGa0Zbn343XhMgxBUdTAJvNNcV/5FfnN/dDPhiN1Uuiwb8B11OQ9HoyXZ9Sq8D3Y1TlHY/CxOGUeijca64R6iY4zNQ43tpytktAMccAv5y/jVXSQqtDb6XiuwjUmR0xBybyvPIiLEaG3yb44IodYNcnyrblsob0ZTiCFfKTKIC14SlyhZ6D9+p86y3zAK+3E6ILooLK8E/FNUi1b2Xe6BaWEm9x18HM5zG82VhqvFL7aYsbpblGhWh6tD1eCU/HW8AobTfJxFVwfjaCtaD9/PtwFpb6K0+Vf7lj0aFAcLHWueEXEWgAnwWZW7y5kz3q58XQyn30GH3a7kgs0hQ5Bfvy7N4j9GJ4O5/lvqW9dZmeGFh4oJ5g9HjU78KPImuq0hsvdPlFZPMIb7CTGg2E7p4af87JAZ/971M4ukxtYT3tS0D5qiDeY6fw8acumkKfCGniApkSv+VZ38B3YRJ7ni8w38UR52nzojOI9/GG8v59Bdsl8eK/oJN4IO4J7RFv7CghYvn9ZFPgD/QcCCv9KuiKrRj5u0p0PZDvRid12TsalUU34K3XoajFfzMM74EJxUoyjUTxbBXdYqUJr4Sh53qsLNwd1dkVQEVhvyRfdlzE0tfCQaA7O6FxxwB4BclR394DsA5P1ZP+xsN59Cp8SxeacdLwO6jNahfv5Y50XgtdIKbG60UI8IToIVpEnvC5eOV7hluNc04ef9mR0wFsuc/l4//P4AXgyKDezvFTdD4yk5TqDbLjzUqfw08haAa7xs6gF9EW7xTvBWL5X7GTto0/Ezeg8uOysRjOjlHgkWkATWVtSCkSQDs+zVvBLXG/uhw/GSdhK9rrGpWCi/aOdKifTBl1I78Z343r3c34svuwWmmXOTFTKq0mJX8Yy/T3OM0GhbgzqcA+zFVRwaf4PKQ9kucDYQ7IAAAAASUVORK5CYII=);
}
.theme-souple .soleil {
  position: absolute; z-index: 0; right: -230px; top: -290px; width: 980px; height: 820px; pointer-events: none;
  animation: s-soleil 40s ease-in-out infinite alternate;
}
.theme-souple .soleil::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 253, 247, .98), rgba(255, 246, 230, .93) 20%, rgba(255, 240, 232, .74) 40%, rgba(255, 234, 242, .36) 63%, rgba(255, 234, 242, 0) 100%);
}
.theme-souple .soleil i {
  position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%;
  background: radial-gradient(circle, #FFFEFA 0 54%, rgba(255, 252, 244, 0) 72%);
}
.theme-souple .ciel {
  position: absolute; z-index: 1; right: max(2%, calc(var(--bord) - 40px)); top: 104px; width: 490px; height: 255px; pointer-events: none;
}
.theme-souple .ciel-in { position: absolute; left: 0; top: 0; width: 576px; height: 300px; transform: scale(.85); transform-origin: 0 0; }
.theme-souple .vol { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.theme-souple .oiseau { position: absolute; left: -15px; top: -15px; overflow: visible; animation: s-bat .34s linear infinite; }
.theme-souple .heros-texte { position: relative; z-index: 4; }
.theme-souple .heros-texte > * { max-width: 760px; }
.theme-souple .heros h1 {
  margin: 18px 0 0; font-size: clamp(2.4rem, 4.2vw, 3.9rem); line-height: 1.04; font-weight: 700; letter-spacing: -.016em;
}
.theme-souple .heros h1 .l1, .theme-souple .heros h1 .l2 { display: block; }
.theme-souple .heros h1 .l2 { position: relative; width: max-content; max-width: 100%; padding-bottom: .12em; }
.theme-souple .heros h1 .mot { position: relative; display: inline-block; }
.theme-souple .souligne {
  position: absolute; left: 0; right: 0; bottom: -.1em; height: .26em; overflow: hidden; transform-origin: 0 50%;
  animation: s-trace 1.3s .35s var(--ressort) both;
}
.theme-souple .mot .souligne { display: none; bottom: -.16em; }
.theme-souple .souligne svg { display: block; width: 200%; height: 100%; animation: s-glisse 7s linear infinite; }
.theme-souple .heros .surtitre, .theme-souple .heros .chapo, .theme-souple .heros .exemples > span { color: color-mix(in srgb, var(--s-encre-2) 55%, var(--s-encre)); }   /* contraste ≥ 4,5 sur le haut du ciel */
.theme-souple .heros .chapo { margin: 20px 0 0; max-width: 600px; font-size: 1.15rem; line-height: 1.55; }
.theme-souple .heros .recherche { margin: 26px 0 0; }
.theme-souple .heros .recherche label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.theme-souple .heros .suggestions { top: calc(100% - 4px); }
.theme-souple .exemples { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 16px 0 0; font-size: 15px; color: var(--s-encre-2); }
.theme-souple .exemples a {
  font-weight: 600; color: var(--s-encre); text-decoration: underline; text-decoration-color: rgba(15, 43, 64, .32);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: text-decoration-color .2s;
}
.theme-souple .exemples a:hover { text-decoration-color: var(--s-chaud); }
.theme-souple .exemples a { position: relative; }
.theme-souple .exemples a::after { content: ""; position: absolute; inset: -6px -9px; }   /* zone tactile élargie (44 px) sans toucher à la mise en page */

/* la rue occupe toute la largeur (jamais moins de 1280 px : en dessous, elle défile) ; elle ne se réduit que sur les écrans très
   larges et très bas, pour garder les étiquettes au-dessus de la ligne de flottaison. La marge négative suit la même échelle :
   le ciel de la rue passe sous le texte, jamais une maison ni un palmier. */
.theme-souple .scene-cadre {
  --hx: 580px; --l: max(1280px, min(100vw, calc((100vh - var(--hx)) * 4.47)));
  position: relative; z-index: 2; margin-top: calc(var(--l) * -.1264);
}
.theme-souple .scene { position: relative; }
.theme-souple .scene-in { position: relative; width: min(100%, var(--l)); margin-inline: auto; }
.theme-souple .glisser { display: none; }
.theme-souple .calque { display: block; width: 100%; height: auto; overflow: visible; }
.theme-souple .calque.fond, .theme-souple .calque.mer, .theme-souple .calque.vie { position: absolute; left: 0; top: 0; height: 100%; }
.theme-souple .calque.fond { will-change: transform; }
.theme-souple .calque.rue { position: relative; }
.theme-souple .calque.vie { pointer-events: none; }
.theme-souple .calque-x { position: absolute; display: block; overflow: visible; pointer-events: none; }

/* survol : voile clair sur les maisons voisines ; entrée par translation seule */
.theme-souple .scene .maison { cursor: pointer; outline: none; }
.theme-souple .scene .maison:focus-visible .voile { opacity: 0; }
.theme-souple .scene .maison:focus-visible { outline: 3px solid var(--s-focus); outline-offset: 3px; }
.theme-souple .voile { fill: #FAF5EC; opacity: 0; transition: opacity .3s; pointer-events: none; }
.theme-souple .calque.rue:has(.maison:hover) .voile, .theme-souple .calque.rue:has(.maison:focus-visible) .voile { opacity: .55; }
.theme-souple .calque.rue .maison:hover .voile, .theme-souple .calque.rue .maison:focus-visible .voile { opacity: 0; }
.theme-souple .scene .corps { animation: s-monte .8s cubic-bezier(.22, .9, .24, 1) both; animation-delay: calc(.12s + var(--i) * .07s + var(--j, 0) * .04s); }
.theme-souple .palmier { animation: s-pousse 1s var(--ressort) both; animation-delay: calc(.55s + var(--i) * .07s); }
.theme-souple .rayon { transform: translateX(0) skewX(-18deg); animation: s-balaie 1.8s cubic-bezier(.45, 0, .3, 1) 1.7s both; }
.theme-souple .accolades .acc {
  fill: none; stroke: var(--s-encre); stroke-width: 1.4; opacity: .62; transition: opacity .25s, stroke-width .25s;
  animation: s-apparait .6s ease both; animation-delay: calc(1.25s + var(--i) * .06s);
}
.theme-souple .accolades circle { fill: var(--s-encre); stroke: none; }
.theme-souple .scene:has(.maison:hover) .acc, .theme-souple .scene:has(.maison:focus-visible) .acc, .theme-souple .scene:has(.etiq-x:hover) .acc { opacity: .2; }
.theme-souple .etiquettes-x, .theme-souple .fiches-x { position: absolute; inset: 0; pointer-events: none; }
.theme-souple .etiq-x {
  position: absolute; transform: translateX(-50%); pointer-events: auto; display: grid; justify-items: center; gap: 4px; padding: 7px 12px 8px;
  border-radius: 15px 15px 11px 11px; background: #fff; color: var(--s-encre); text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 1px rgba(10, 53, 84, .08), 0 10px 20px -10px rgba(10, 53, 84, .45);
  transition: background-color .25s, color .25s, opacity .3s;
  animation: s-pop .55s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: calc(1.4s + var(--i) * .06s);
}
.theme-souple .etiq-x::before {
  content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; background: inherit;
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
.theme-souple .etiq-x b { font: 780 19px/1 var(--titres); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.theme-souple .etiq-x small { font: 600 11.5px var(--texte); letter-spacing: 0; opacity: .72; color: inherit; }
.theme-souple .etiq-x span { font: 600 13.5px/1.1 var(--texte); opacity: .86; }
/* les étiquettes des autres maisons s'effacent par leur fond (blanc translucide, ombre retirée) : le texte garde sa pleine opacité, donc son contraste */
.theme-souple .scene:has(.maison:hover) .etiq-x, .theme-souple .scene:has(.maison:focus-visible) .etiq-x, .theme-souple .scene:has(.etiq-x:hover) .etiq-x {
  background: rgba(255, 255, 255, .6); box-shadow: none;
}
.theme-souple .scene:has(.maison:hover) .etiq-x small, .theme-souple .scene:has(.maison:focus-visible) .etiq-x small, .theme-souple .scene:has(.etiq-x:hover) .etiq-x small,
.theme-souple .scene:has(.maison:hover) .etiq-x span, .theme-souple .scene:has(.maison:focus-visible) .etiq-x span, .theme-souple .scene:has(.etiq-x:hover) .etiq-x span { opacity: 1; }
.theme-souple .scene:has(.etiq-x:hover) .calque.rue .voile { opacity: .55; }
.theme-souple .fiche-x {
  position: absolute; width: 240px; padding: 8px; border-radius: 50% 50% 12px 12px / 30px 30px 12px 12px; background: #FBF2DE;
  box-shadow: inset 0 -3px 0 #E4D3B2, 0 26px 44px -18px rgba(8, 30, 48, .6);
  opacity: 0; transform: translate(-50%, calc(-100% + 12px)); transition: opacity .25s, transform .45s var(--ressort);
}
.theme-souple .fiche-vitre { position: relative; padding: 20px 16px 12px; border-radius: 50% 50% 6px 6px / 24px 24px 6px 6px; background: #fff; }
.theme-souple .fiche-vitre::before { content: ""; display: block; width: 28px; height: 5px; margin: -6px auto 8px; border-radius: 3px; background: var(--t); }
.theme-souple .fiche-nom { margin: 0; text-align: center; font: 750 18px/1.15 var(--titres); color: var(--s-encre); }
.theme-souple .fiche-dep { margin: 3px 0 10px; text-align: center; font: 500 12.5px/1.2 var(--texte); color: var(--s-encre-3); }
.theme-souple .fiche-x dl { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; margin: 0; padding-top: 9px; border-top: 1px solid var(--filet); }
.theme-souple .fiche-x dt { font: 500 13.5px/1.3 var(--texte); color: var(--s-encre-2); }
.theme-souple .fiche-x dd { margin: 0; text-align: right; font: 750 14.5px/1.3 var(--titres); color: var(--s-encre); font-variant-numeric: tabular-nums; }
.theme-souple .pers {
  position: absolute; top: 8px; bottom: 8px; width: calc(50% - 8px);
  background: repeating-linear-gradient(180deg, #5C8D6E 0 3px, #3D684F 3px 4.3px, #7AA588 4.3px 5.2px);
  box-shadow: inset 0 0 0 2px #35604A; transform: perspective(560px) rotateY(0deg); transition: transform .8s cubic-bezier(.55, 0, .15, 1) .1s;
}
.theme-souple .pers.g { left: 8px; transform-origin: -8px 50%; border-radius: 100% 0 0 6px / 24px 0 0 6px; --r: -158deg; }
.theme-souple .pers.d { right: 8px; transform-origin: calc(100% + 8px) 50%; border-radius: 0 100% 6px 0 / 0 24px 6px 0; --r: 158deg; }
.theme-souple .pers::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; background: #35604A; }

/* primitives animées de scene_commun (une région peut en ajouter, sur le même principe : transform et opacité) */
.theme-souple .vt.o { transform: scaleX(-1); }
.theme-souple .vt.an { animation: s-ouvrir 1.2s cubic-bezier(.55, 0, .2, 1) both; animation-delay: var(--d); }
.theme-souple .ov { animation: s-apparait .8s ease both; animation-delay: var(--d); }
.theme-souple .linge { animation: s-flotte 2.8s ease-in-out infinite alternate; animation-delay: var(--d); }
.theme-souple .palme { animation: s-balance 7s ease-in-out infinite alternate; animation-delay: var(--d); }
.theme-souple .pointu { animation: s-tangue 5.5s ease-in-out infinite alternate; animation-delay: var(--d); }
.theme-souple .rides { animation: s-derive 9s ease-in-out infinite alternate; }
.theme-souple .rides.r1 { animation-delay: -3s; }
.theme-souple .rides.r2 { animation-delay: -6s; animation-direction: alternate-reverse; }
.theme-souple .eclats { animation: s-scintille 2.4s ease-in-out infinite alternate; }
.theme-souple .eclats.e1 { animation-delay: -.8s; }
.theme-souple .eclats.e2 { animation-delay: -1.6s; animation-direction: alternate-reverse; }
.theme-souple .ecume { animation: s-ressac 4.5s ease-in-out infinite alternate; }
.theme-souple .ecume.e2 { animation-delay: -2.25s; }
.theme-souple .pointu-x { transform-origin: 50% 80%; animation: s-tangue 5.5s ease-in-out infinite alternate; }
.theme-souple .pointu-x.p1 { animation-delay: -2.2s; }
.theme-souple .palme-x { position: absolute; pointer-events: none; animation: s-pousse-x 1s var(--ressort) both; animation-delay: calc(.55s + var(--i) * .07s); }
.theme-souple .palme-x svg { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; animation: s-balance 7s ease-in-out infinite alternate; animation-delay: var(--d); }
.theme-souple .bougain { animation: s-apparait 1.4s 1.2s ease both; }
.theme-souple .colline, .theme-souple .monuments { animation: s-apparait 1.4s .2s ease both; }
/* hors écran, la scène ne bouge plus (la classe est posée par trame-souple.js) */
.theme-souple .heros.hors-ecran *, .theme-souple .heros.hors-ecran *::before { animation-play-state: paused !important; }

/* scène provisoire (régions dont la scène dédiée n'est pas encore dessinée) : l'ancienne rue dans le même cadre */
.theme-souple .scene-cadre.scene-provisoire { --l: 100%; margin-top: 0; padding-top: 6px; }
.theme-souple .scene-provisoire .rue { margin: 0; }
.theme-souple .scene-provisoire .rue-defil { margin-top: 0; }
@media (min-width: 1041px) { .theme-souple .scene-provisoire .rue-defil { margin-top: calc(min(100%, 1360px) * var(--rue-libre, 0) * -.55); } }

@keyframes s-bat { 50% { transform: scaleY(.45); } }
@keyframes s-monte { from { transform: translateY(var(--y0, 60px)); } }
@keyframes s-pousse { from { opacity: 0; transform: translateY(70px); } }
@keyframes s-pousse-x { from { opacity: 0; transform: translateY(42%); } }
@keyframes s-balaie { to { transform: translateX(2050px) skewX(-18deg); } }
@keyframes s-ouvrir { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
@keyframes s-apparait { from { opacity: 0; } }
@keyframes s-pop { from { opacity: 0; transform: translateY(12px) scale(.9); } }
@keyframes s-flotte { from { transform: skewX(-7deg) rotate(-3deg); } to { transform: skewX(6deg) rotate(3deg); } }
@keyframes s-balance { from { transform: rotate(-2.2deg); } to { transform: rotate(2.6deg); } }
@keyframes s-tangue { from { transform: translateY(-1px) rotate(-1.8deg); } to { transform: translateY(1.8px) rotate(1.6deg); } }
@keyframes s-derive { from { transform: translateX(-.9%); } to { transform: translateX(.9%); } }
@keyframes s-scintille { from { opacity: .12; } to { opacity: .95; } }
@keyframes s-ressac { from { opacity: .35; transform: translateY(-1.5px); } to { opacity: .95; transform: translateY(1px); } }
@keyframes s-soleil { from { transform: translate(0, 0) scale(1); } to { transform: translate(-80px, 36px) scale(1.07); } }
@keyframes s-trace { from { transform: scaleX(0); } }
@keyframes s-glisse { to { transform: translateX(-50%); } }
@keyframes s-houle { to { transform: translateX(-50%); } }
@keyframes s-pousse-g { 50% { transform: translateX(-4px); } }
@keyframes s-pousse-d { 50% { transform: translateX(4px); } }

/* § survol : règles communes des îlots 0 à 15 (maison, étiquette, fiche et accolade partagent le même état ; bloc produit par
   outils/theme-souple/gen_survol.py, ne pas l'éditer à la main : pour plus d'îlots, relancer le script avec N) */
.theme-souple .scene:has(#m-0:hover) #fiche-0,.theme-souple .scene:has(#m-0:focus-visible) #fiche-0,.theme-souple .scene:has(#e-0:hover) #fiche-0{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-0:hover) #fiche-0 .pers,.theme-souple .scene:has(#m-0:focus-visible) #fiche-0 .pers,.theme-souple .scene:has(#e-0:hover) #fiche-0 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-0:hover) #e-0,.theme-souple .scene:has(#m-0:focus-visible) #e-0,.theme-souple .scene:has(#e-0:hover) #e-0{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-0:hover) #a-0,.theme-souple .scene:has(#m-0:focus-visible) #a-0,.theme-souple .scene:has(#e-0:hover) #a-0{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-0:hover) #m-0 .voile{opacity:0}
.theme-souple .scene:has(#m-1:hover) #fiche-1,.theme-souple .scene:has(#m-1:focus-visible) #fiche-1,.theme-souple .scene:has(#e-1:hover) #fiche-1{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-1:hover) #fiche-1 .pers,.theme-souple .scene:has(#m-1:focus-visible) #fiche-1 .pers,.theme-souple .scene:has(#e-1:hover) #fiche-1 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-1:hover) #e-1,.theme-souple .scene:has(#m-1:focus-visible) #e-1,.theme-souple .scene:has(#e-1:hover) #e-1{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-1:hover) #a-1,.theme-souple .scene:has(#m-1:focus-visible) #a-1,.theme-souple .scene:has(#e-1:hover) #a-1{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-1:hover) #m-1 .voile{opacity:0}
.theme-souple .scene:has(#m-2:hover) #fiche-2,.theme-souple .scene:has(#m-2:focus-visible) #fiche-2,.theme-souple .scene:has(#e-2:hover) #fiche-2{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-2:hover) #fiche-2 .pers,.theme-souple .scene:has(#m-2:focus-visible) #fiche-2 .pers,.theme-souple .scene:has(#e-2:hover) #fiche-2 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-2:hover) #e-2,.theme-souple .scene:has(#m-2:focus-visible) #e-2,.theme-souple .scene:has(#e-2:hover) #e-2{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-2:hover) #a-2,.theme-souple .scene:has(#m-2:focus-visible) #a-2,.theme-souple .scene:has(#e-2:hover) #a-2{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-2:hover) #m-2 .voile{opacity:0}
.theme-souple .scene:has(#m-3:hover) #fiche-3,.theme-souple .scene:has(#m-3:focus-visible) #fiche-3,.theme-souple .scene:has(#e-3:hover) #fiche-3{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-3:hover) #fiche-3 .pers,.theme-souple .scene:has(#m-3:focus-visible) #fiche-3 .pers,.theme-souple .scene:has(#e-3:hover) #fiche-3 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-3:hover) #e-3,.theme-souple .scene:has(#m-3:focus-visible) #e-3,.theme-souple .scene:has(#e-3:hover) #e-3{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-3:hover) #a-3,.theme-souple .scene:has(#m-3:focus-visible) #a-3,.theme-souple .scene:has(#e-3:hover) #a-3{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-3:hover) #m-3 .voile{opacity:0}
.theme-souple .scene:has(#m-4:hover) #fiche-4,.theme-souple .scene:has(#m-4:focus-visible) #fiche-4,.theme-souple .scene:has(#e-4:hover) #fiche-4{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-4:hover) #fiche-4 .pers,.theme-souple .scene:has(#m-4:focus-visible) #fiche-4 .pers,.theme-souple .scene:has(#e-4:hover) #fiche-4 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-4:hover) #e-4,.theme-souple .scene:has(#m-4:focus-visible) #e-4,.theme-souple .scene:has(#e-4:hover) #e-4{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-4:hover) #a-4,.theme-souple .scene:has(#m-4:focus-visible) #a-4,.theme-souple .scene:has(#e-4:hover) #a-4{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-4:hover) #m-4 .voile{opacity:0}
.theme-souple .scene:has(#m-5:hover) #fiche-5,.theme-souple .scene:has(#m-5:focus-visible) #fiche-5,.theme-souple .scene:has(#e-5:hover) #fiche-5{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-5:hover) #fiche-5 .pers,.theme-souple .scene:has(#m-5:focus-visible) #fiche-5 .pers,.theme-souple .scene:has(#e-5:hover) #fiche-5 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-5:hover) #e-5,.theme-souple .scene:has(#m-5:focus-visible) #e-5,.theme-souple .scene:has(#e-5:hover) #e-5{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-5:hover) #a-5,.theme-souple .scene:has(#m-5:focus-visible) #a-5,.theme-souple .scene:has(#e-5:hover) #a-5{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-5:hover) #m-5 .voile{opacity:0}
.theme-souple .scene:has(#m-6:hover) #fiche-6,.theme-souple .scene:has(#m-6:focus-visible) #fiche-6,.theme-souple .scene:has(#e-6:hover) #fiche-6{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-6:hover) #fiche-6 .pers,.theme-souple .scene:has(#m-6:focus-visible) #fiche-6 .pers,.theme-souple .scene:has(#e-6:hover) #fiche-6 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-6:hover) #e-6,.theme-souple .scene:has(#m-6:focus-visible) #e-6,.theme-souple .scene:has(#e-6:hover) #e-6{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-6:hover) #a-6,.theme-souple .scene:has(#m-6:focus-visible) #a-6,.theme-souple .scene:has(#e-6:hover) #a-6{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-6:hover) #m-6 .voile{opacity:0}
.theme-souple .scene:has(#m-7:hover) #fiche-7,.theme-souple .scene:has(#m-7:focus-visible) #fiche-7,.theme-souple .scene:has(#e-7:hover) #fiche-7{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-7:hover) #fiche-7 .pers,.theme-souple .scene:has(#m-7:focus-visible) #fiche-7 .pers,.theme-souple .scene:has(#e-7:hover) #fiche-7 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-7:hover) #e-7,.theme-souple .scene:has(#m-7:focus-visible) #e-7,.theme-souple .scene:has(#e-7:hover) #e-7{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-7:hover) #a-7,.theme-souple .scene:has(#m-7:focus-visible) #a-7,.theme-souple .scene:has(#e-7:hover) #a-7{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-7:hover) #m-7 .voile{opacity:0}
.theme-souple .scene:has(#m-8:hover) #fiche-8,.theme-souple .scene:has(#m-8:focus-visible) #fiche-8,.theme-souple .scene:has(#e-8:hover) #fiche-8{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-8:hover) #fiche-8 .pers,.theme-souple .scene:has(#m-8:focus-visible) #fiche-8 .pers,.theme-souple .scene:has(#e-8:hover) #fiche-8 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-8:hover) #e-8,.theme-souple .scene:has(#m-8:focus-visible) #e-8,.theme-souple .scene:has(#e-8:hover) #e-8{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-8:hover) #a-8,.theme-souple .scene:has(#m-8:focus-visible) #a-8,.theme-souple .scene:has(#e-8:hover) #a-8{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-8:hover) #m-8 .voile{opacity:0}
.theme-souple .scene:has(#m-9:hover) #fiche-9,.theme-souple .scene:has(#m-9:focus-visible) #fiche-9,.theme-souple .scene:has(#e-9:hover) #fiche-9{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-9:hover) #fiche-9 .pers,.theme-souple .scene:has(#m-9:focus-visible) #fiche-9 .pers,.theme-souple .scene:has(#e-9:hover) #fiche-9 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-9:hover) #e-9,.theme-souple .scene:has(#m-9:focus-visible) #e-9,.theme-souple .scene:has(#e-9:hover) #e-9{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-9:hover) #a-9,.theme-souple .scene:has(#m-9:focus-visible) #a-9,.theme-souple .scene:has(#e-9:hover) #a-9{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-9:hover) #m-9 .voile{opacity:0}
.theme-souple .scene:has(#m-10:hover) #fiche-10,.theme-souple .scene:has(#m-10:focus-visible) #fiche-10,.theme-souple .scene:has(#e-10:hover) #fiche-10{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-10:hover) #fiche-10 .pers,.theme-souple .scene:has(#m-10:focus-visible) #fiche-10 .pers,.theme-souple .scene:has(#e-10:hover) #fiche-10 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-10:hover) #e-10,.theme-souple .scene:has(#m-10:focus-visible) #e-10,.theme-souple .scene:has(#e-10:hover) #e-10{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-10:hover) #a-10,.theme-souple .scene:has(#m-10:focus-visible) #a-10,.theme-souple .scene:has(#e-10:hover) #a-10{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-10:hover) #m-10 .voile{opacity:0}
.theme-souple .scene:has(#m-11:hover) #fiche-11,.theme-souple .scene:has(#m-11:focus-visible) #fiche-11,.theme-souple .scene:has(#e-11:hover) #fiche-11{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-11:hover) #fiche-11 .pers,.theme-souple .scene:has(#m-11:focus-visible) #fiche-11 .pers,.theme-souple .scene:has(#e-11:hover) #fiche-11 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-11:hover) #e-11,.theme-souple .scene:has(#m-11:focus-visible) #e-11,.theme-souple .scene:has(#e-11:hover) #e-11{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-11:hover) #a-11,.theme-souple .scene:has(#m-11:focus-visible) #a-11,.theme-souple .scene:has(#e-11:hover) #a-11{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-11:hover) #m-11 .voile{opacity:0}
.theme-souple .scene:has(#m-12:hover) #fiche-12,.theme-souple .scene:has(#m-12:focus-visible) #fiche-12,.theme-souple .scene:has(#e-12:hover) #fiche-12{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-12:hover) #fiche-12 .pers,.theme-souple .scene:has(#m-12:focus-visible) #fiche-12 .pers,.theme-souple .scene:has(#e-12:hover) #fiche-12 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-12:hover) #e-12,.theme-souple .scene:has(#m-12:focus-visible) #e-12,.theme-souple .scene:has(#e-12:hover) #e-12{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-12:hover) #a-12,.theme-souple .scene:has(#m-12:focus-visible) #a-12,.theme-souple .scene:has(#e-12:hover) #a-12{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-12:hover) #m-12 .voile{opacity:0}
.theme-souple .scene:has(#m-13:hover) #fiche-13,.theme-souple .scene:has(#m-13:focus-visible) #fiche-13,.theme-souple .scene:has(#e-13:hover) #fiche-13{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-13:hover) #fiche-13 .pers,.theme-souple .scene:has(#m-13:focus-visible) #fiche-13 .pers,.theme-souple .scene:has(#e-13:hover) #fiche-13 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-13:hover) #e-13,.theme-souple .scene:has(#m-13:focus-visible) #e-13,.theme-souple .scene:has(#e-13:hover) #e-13{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-13:hover) #a-13,.theme-souple .scene:has(#m-13:focus-visible) #a-13,.theme-souple .scene:has(#e-13:hover) #a-13{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-13:hover) #m-13 .voile{opacity:0}
.theme-souple .scene:has(#m-14:hover) #fiche-14,.theme-souple .scene:has(#m-14:focus-visible) #fiche-14,.theme-souple .scene:has(#e-14:hover) #fiche-14{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-14:hover) #fiche-14 .pers,.theme-souple .scene:has(#m-14:focus-visible) #fiche-14 .pers,.theme-souple .scene:has(#e-14:hover) #fiche-14 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-14:hover) #e-14,.theme-souple .scene:has(#m-14:focus-visible) #e-14,.theme-souple .scene:has(#e-14:hover) #e-14{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-14:hover) #a-14,.theme-souple .scene:has(#m-14:focus-visible) #a-14,.theme-souple .scene:has(#e-14:hover) #a-14{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-14:hover) #m-14 .voile{opacity:0}
.theme-souple .scene:has(#m-15:hover) #fiche-15,.theme-souple .scene:has(#m-15:focus-visible) #fiche-15,.theme-souple .scene:has(#e-15:hover) #fiche-15{opacity:1;transform:translate(-50%,-100%)}
.theme-souple .scene:has(#m-15:hover) #fiche-15 .pers,.theme-souple .scene:has(#m-15:focus-visible) #fiche-15 .pers,.theme-souple .scene:has(#e-15:hover) #fiche-15 .pers{transform:perspective(560px) rotateY(var(--r))}
.theme-souple .scene:has(#m-15:hover) #e-15,.theme-souple .scene:has(#m-15:focus-visible) #e-15,.theme-souple .scene:has(#e-15:hover) #e-15{background:var(--s-encre);color:#fff;opacity:1}
.theme-souple .scene:has(#m-15:hover) #a-15,.theme-souple .scene:has(#m-15:focus-visible) #a-15,.theme-souple .scene:has(#e-15:hover) #a-15{stroke:var(--s-encre);opacity:1}
.theme-souple .scene:has(#e-15:hover) #m-15 .voile{opacity:0}

/* =========================================================== 6. Accueil : bande de mer, vagues, sections */
.theme-souple .bande-mer { position: relative; z-index: 3; margin-top: -2px; padding: 46px 0 26px; color: var(--s-mer-t); background: linear-gradient(180deg, var(--s-mer), var(--s-mer-b)); }
.theme-souple .bande-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }
.theme-souple .bande-grille.seule { grid-template-columns: minmax(0, 760px); }
.theme-souple .titre-mer { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: #fff; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.theme-souple .titre-mer svg { flex: none; }
.theme-souple .cartel dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; font-size: 15.5px; line-height: 1.45; }
.theme-souple .cartel dt { font-weight: 600; color: #fff; }
.theme-souple .cartel dd { margin: 0; color: var(--s-mer-t); }
.theme-souple .cartel p { margin: 14px 0 0; font-size: 14.5px; color: color-mix(in srgb, var(--s-mer-t) 88%, var(--s-mer)); }
.theme-souple .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
.theme-souple .stat { position: relative; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, .24); }
.theme-souple .stat::before { content: ""; position: absolute; left: 0; top: -2px; width: 34px; height: 3px; background: var(--s-soleil); }
.theme-souple .stat:nth-child(2)::before { background: #9CC6E6; }
.theme-souple .stat:nth-child(3)::before { background: #E7A49B; }
.theme-souple .stat:nth-child(4)::before { background: #7FB08D; }
.theme-souple .stat:nth-child(5)::before { background: #C9B6E4; }
.theme-souple .stat:nth-child(6)::before { background: #F2C99B; }
.theme-souple .stat strong { display: block; font: 760 40px/1 var(--titres); letter-spacing: -.025em; color: #fff; font-variant-numeric: tabular-nums; }
.theme-souple .stat strong small { font-size: .5em; font-weight: 600; letter-spacing: 0; margin-left: 3px; color: var(--s-mer-t); }
.theme-souple .stat p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.4; color: var(--s-mer-t); }
.theme-souple .stat a { color: inherit; text-decoration: none; }
.theme-souple .stat a:hover { text-decoration: underline; text-underline-offset: 3px; }
.theme-souple .bande-mer a:focus-visible { outline-color: #fff; }

/* séparateurs en houle : un SVG deux fois plus large que l'écran qui glisse de 50 % en boucle (transform seul) */
.theme-souple .vague { position: relative; height: 56px; overflow: hidden; margin-top: -1px; }
.theme-souple .vague svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: s-houle 30s linear infinite; }
.theme-souple .vague.lente svg { animation-duration: 42s; }
.theme-souple .vague.hors-ecran svg { animation-play-state: paused; }

/* sections de l'accueil */
.theme-souple .bloc { position: relative; padding: 56px 0; border-top: 0; }
.theme-souple.accueil-souple .bloc { padding: 56px 0; }
.theme-souple .bloc-tete { margin-bottom: 26px; }
.theme-souple .bloc-chapo { color: var(--s-encre-2); max-width: 70ch; margin-top: -.2em; font-size: 1.08rem; }

.theme-souple .marche-bref { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.theme-souple .marche-bref.seul { grid-template-columns: minmax(0, 800px); }
.theme-souple .marche-bref .lead { margin: 20px 0 0; font-size: 1.12rem; line-height: 1.65; color: var(--s-encre-2); }
/* beaucoup de repères (plus de six) : le texte passe au-dessus, les tuiles s'étalent sur quatre colonnes */
.theme-souple .marche-bref.nombreux { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.theme-souple .marche-bref.nombreux .lead { max-width: 76ch; }
.theme-souple .marche-bref.nombreux .reperes .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.theme-souple .reperes h3 { margin-bottom: 14px; font-size: 1.1rem; color: var(--s-encre-2); }
.theme-souple .reperes .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }

/* loyers : tableau classé, jauge de la couleur de l'îlot */
.theme-souple .loyers-grille { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 7.7fr); gap: 56px; align-items: start; }
.theme-souple .loyers-cote { position: sticky; top: 110px; }
.theme-souple .loyers h2, .theme-souple .dpe h2, .theme-souple .professionnels h2, .theme-souple .communes h2, .theme-souple .marche-bref h2 { margin-top: 14px; }
.theme-souple .cles { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; font-size: 14px; color: var(--s-encre-2); }
.theme-souple .cles span { display: inline-flex; align-items: center; gap: 8px; }
.theme-souple .carte-tableau { border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); padding: 10px 18px 6px; }
.theme-souple .loyers-tableau { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: none; }
.theme-souple .loyers-tableau thead th {
  padding: 14px 10px 12px; font: 600 13px/1.25 var(--texte); color: var(--s-encre-3); text-align: right; vertical-align: bottom; border-bottom: 1px solid var(--filet);
}
.theme-souple .loyers-tableau thead th:nth-child(2) { text-align: left; }
.theme-souple .loyers-tableau thead th small { display: block; font-weight: 500; }
.theme-souple .loyers-tableau tbody th, .theme-souple .loyers-tableau tbody td { padding: 11px 10px; border-bottom: 1px solid var(--filet); text-align: right; vertical-align: middle; }
.theme-souple .loyers-tableau tbody tr:last-child th, .theme-souple .loyers-tableau tbody tr:last-child td { border-bottom: 0; }
.theme-souple .loyers-tableau tbody tr { transition: background-color .25s; }
.theme-souple .loyers-tableau tbody tr:hover, .theme-souple .loyers-tableau tbody tr:target { background: color-mix(in srgb, var(--s-focus) 7%, #fff); }
.theme-souple .loyers-tableau td.rang { width: 44px; text-align: center; font: 600 15px var(--titres); color: var(--s-encre-3); }
.theme-souple .loyers-tableau tbody th { text-align: left; font-weight: 600; font-size: 16.5px; line-height: 1.25; }
.theme-souple .loyers-tableau tbody th a { color: var(--s-encre); text-decoration: none; }
.theme-souple .loyers-tableau tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.theme-souple .loyers-tableau tbody th small { font-weight: 500; font-size: 13.5px; color: var(--s-encre-3); white-space: nowrap; }
.theme-souple .loyers-tableau .app { width: 38%; }
.theme-souple .app-in { display: flex; align-items: center; gap: 14px; justify-content: flex-end; }
.theme-souple .app b { font: 760 19px/1 var(--titres); letter-spacing: -.01em; min-width: 58px; text-align: right; }
.theme-souple .jauge { flex: 1; display: block; max-width: 230px; height: 15px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, transparent 0 11px, #E6ECEF 11px); overflow: hidden; }
.theme-souple .jauge i, .theme-souple .cles i {
  display: block; height: 100%; width: var(--l); border-radius: 6px 6px 1px 1px; transform-origin: left;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .28) 0 3px, rgba(255, 255, 255, .5) 3px 4px, transparent 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(29, 42, 54, .5) 3px 6px, transparent 6px 9px) 0 6px / 100% 5px no-repeat,
    var(--c, var(--s-chaud));
}
.theme-souple .cles i { display: inline-block; flex: none; height: 15px; --l: 44px; --c: #E7A49B; }
.theme-souple .loyers-tableau tr.tete { background: color-mix(in srgb, var(--s-soleil) 14%, #fff); }
.theme-souple .loyers-tableau tr.tete th, .theme-souple .loyers-tableau tr.tete td.app b, .theme-souple .loyers-tableau tr.tete td.rang { color: var(--s-chaud-f); }
.theme-souple .tag {
  display: inline-block; margin-left: 10px; padding: 3px 9px 4px; border-radius: 999px 999px 6px 6px; background: var(--s-chaud-f); color: #fff;
  font: 600 11.5px/1.1 var(--texte); vertical-align: 2px; white-space: nowrap;
}
.theme-souple .loyers-tableau td.mais { font: 600 16.5px var(--titres); color: var(--s-encre-2); }
.theme-souple .loyers-tableau td.hab { font-size: 15.5px; color: var(--s-encre-3); }
.theme-souple .loyers-tableau td.jauge-m { display: none; }

/* DPE : l'échelle A à G (état « bientôt ») ou le graphique réel */
.theme-souple .dpe-grille { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: 56px; align-items: start; }
.theme-souple .annonce {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 34px; align-items: center; max-width: 920px; margin-left: auto; padding: 26px 40px 26px 50px;
  border-radius: 96px 30px 30px 96px / 110px 30px 30px 110px; background: #fff; box-shadow: var(--ombre);
}
.theme-souple .annonce h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.1; margin-top: 0; }
.theme-souple .annonce-texte p:last-child { margin: 10px 0 0; color: var(--s-encre-2); max-width: 600px; }
.theme-souple .echelle { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.theme-souple .echelle li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; }
.theme-souple .echelle b { font: 780 18px/1 var(--titres); text-align: center; color: var(--s-encre); }
.theme-souple .echelle i { display: block; height: 26px; width: var(--l); background: var(--c); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%); border-radius: 4px 0 0 4px; }
.theme-souple .echelle-mini { gap: 4px; padding: 16px 0 16px 18px; }
.theme-souple .echelle-mini li { grid-template-columns: 12px minmax(0, 1fr); gap: 7px; }
.theme-souple .echelle-mini b { font-size: 12px; }
.theme-souple .echelle-mini i { height: 12px; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); border-radius: 2px 0 0 2px; }

/* agences et annonces : cartes à arche */
.theme-souple .duo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; margin-top: 26px; align-items: start; }
.theme-souple .duo .s-carte:nth-child(2) { margin-top: 70px; }
.theme-souple .s-carte {
  position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); padding: 12px 12px 22px;
  transition: transform .45s var(--ressort), box-shadow .45s;
}
.theme-souple .s-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.theme-souple .s-arche { position: relative; overflow: hidden; border-radius: 999px 999px 22px 22px; aspect-ratio: 16 / 7; background: color-mix(in srgb, var(--s-soleil) 22%, #fff); }
.theme-souple .s-arche svg, .theme-souple .s-arche img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ressort); }
.theme-souple .s-carte:hover .s-arche svg, .theme-souple .s-carte:hover .s-arche img { transform: scale(1.04); }
.theme-souple .s-corps { padding: 18px 16px 0; }
.theme-souple .s-carte h3 { margin: 0; font-size: 27px; line-height: 1.1; font-weight: 720; letter-spacing: -.01em; }
.theme-souple .s-carte h3 a { color: inherit; text-decoration: none; }
.theme-souple .s-carte h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.theme-souple .s-carte p { color: var(--s-encre-2); margin: 12px 0 0; }
.theme-souple .s-carte .graph { margin: 14px 0 0; padding: 0; border: 0; box-shadow: none; background: none; }
.theme-souple .s-carte .biens { margin-top: 14px; }
.theme-souple .s-carte .lien-fleche { position: relative; z-index: 1; }
.theme-souple .a-venir { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.theme-souple .a-venir li { position: relative; padding-left: 26px; color: var(--s-encre-2); font-size: 15.5px; line-height: 1.45; }
.theme-souple .a-venir li::before { content: ""; position: absolute; left: 2px; top: .28em; width: 9px; height: 12px; border-radius: 5px 5px 1px 1px; border: 2px solid var(--s-chaud); }
.theme-souple .pro-appel { font-size: .95rem; }

/* communes : l'arcade des départements */
.theme-souple .dep-tuiles { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.theme-souple .dep-tuiles.dep-1 { grid-template-columns: minmax(0, 240px); }
.theme-souple .dep-tuiles.dep-2 { grid-template-columns: repeat(2, minmax(0, 240px)); }
.theme-souple .dep-tuiles.dep-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.theme-souple .dep-tuiles.dep-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.theme-souple .dep-tuiles.dep-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.theme-souple .dep-tuiles a {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; height: 100%; min-height: 150px; padding: 26px 8px 14px;
  border-radius: 70px 70px 14px 14px / 46px 46px 14px 14px; text-align: center; text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--t) 13%, #fff); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--t) 75%, #5a3b2a);
  transition: background-color .3s, transform .45s var(--ressort), box-shadow .3s;
}
.theme-souple .dep-tuiles a:hover, .theme-souple .dep-tuiles a:focus-visible {
  background: color-mix(in srgb, var(--t) 34%, #fff); transform: translateY(-4px);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--t) 75%, #5a3b2a), 0 16px 28px -18px rgba(15, 43, 64, .5);
}
.theme-souple .dep-tuiles b { font: 780 32px/1 var(--titres); color: var(--s-encre); font-variant-numeric: tabular-nums; }
.theme-souple .dep-tuiles span { font-size: 14px; line-height: 1.25; font-weight: 600; color: var(--s-encre); }
.theme-souple .dep-tuiles small { font-size: 12.5px; line-height: 1.3; color: var(--s-encre-2); }
.theme-souple .dep-tuiles .fl { margin-top: auto; padding-top: 6px; color: var(--s-encre-3); opacity: .55; transition: transform .3s, opacity .3s; box-sizing: content-box; }
.theme-souple .dep-tuiles a:hover .fl, .theme-souple .dep-tuiles a:focus-visible .fl { opacity: 1; transform: translateX(3px); }
.theme-souple .liste-communes { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 16px; }
.theme-souple .liste-communes a {
  font-weight: 600; color: var(--s-encre); text-decoration: underline; text-decoration-color: rgba(15, 43, 64, .3); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.theme-souple .liste-communes a:hover { text-decoration-color: var(--s-chaud); }
.theme-souple .liste-communes small { margin-left: 5px; font-size: 13px; color: var(--s-encre-3); }

/* actualité : trois articles réels et la revue de presse */
.theme-souple .actu-section { background: var(--s-bande); }
.theme-souple .actu-section > .bloc { padding: 20px 0 52px; }
.theme-souple .entete-bloc { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.theme-souple .entete-bloc h2 { margin-bottom: 0; }
.theme-souple .entete-bloc .lien-fleche { margin-top: 0; flex: none; }
.theme-souple .trio { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 24px 28px; margin-top: 30px; }
.theme-souple .trio .s-arche { aspect-ratio: 16 / 8; }
.theme-souple .trio .s-carte:first-child { grid-row: 1 / 3; }
.theme-souple .trio .s-carte:first-child .s-arche { aspect-ratio: 16 / 10.5; }
.theme-souple .trio .s-carte:first-child h3 { font-size: 30px; line-height: 1.12; }
.theme-souple .trio .s-carte:not(:first-child) { flex-direction: row; align-items: center; gap: 8px; padding: 12px; }
.theme-souple .trio .s-carte:not(:first-child) .s-arche { flex: 0 0 44%; aspect-ratio: 4 / 3.4; border-radius: 999px 999px 18px 18px; }
.theme-souple .trio .s-carte:not(:first-child) .s-corps { padding: 6px 10px 6px 14px; }
.theme-souple .trio .s-corps { padding: 20px 12px 0; }
.theme-souple .trio h3 { font-size: 21.5px; line-height: 1.2; font-weight: 700; }
.theme-souple .trio-1 { grid-template-columns: minmax(0, 760px); }
.theme-souple .trio-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
.theme-souple .trio-1 .s-carte:first-child, .theme-souple .trio-2 .s-carte:first-child { grid-row: auto; }
.theme-souple .trio-2 .s-carte:not(:first-child) { flex-direction: column; align-items: stretch; padding: 12px 12px 22px; gap: 0; }
.theme-souple .trio-2 .s-carte:not(:first-child) .s-arche { flex: none; aspect-ratio: 16 / 10.5; border-radius: 999px 999px 22px 22px; }
.theme-souple .trio-2 .s-carte:not(:first-child) .s-corps { padding: 20px 12px 0; }
.theme-souple .trio-2 .s-carte:not(:first-child) h3 { font-size: 30px; line-height: 1.12; }
.theme-souple .rubrique { display: block; font: 600 13px/1.3 var(--texte); color: var(--s-lien); margin-bottom: 10px; }
.theme-souple .rubrique span { font-weight: 500; color: var(--s-encre-3); }
.theme-souple .presse-carte { margin-top: 28px; padding: 24px 28px 26px; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); }
.theme-souple .presse-carte h3 { margin-bottom: 6px; }

/* estimation : le bandeau de mer et sa baie niçoise */
.theme-souple .estimation { padding: 0 0 52px; background: var(--s-bande); }
.theme-souple .estim {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: center; padding: 40px 56px; border-radius: var(--r-xl);
  color: #fff; background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--s-houle-1) 60%, var(--s-mer)) 0%, transparent 60%), linear-gradient(160deg, var(--s-mer), var(--s-mer-f));
}
.theme-souple .estim.sans-visuel { grid-template-columns: minmax(0, 1fr); }
.theme-souple .estim::before, .theme-souple .estim::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; }
.theme-souple .estim::before { width: 760px; height: 760px; right: -250px; top: -300px; }
.theme-souple .estim::after { width: 1100px; height: 1100px; right: -420px; top: -470px; }
.theme-souple .estim h2 { color: #fff; font-size: clamp(2rem, 3.8vw, 3.2rem); margin-top: 14px; }
.theme-souple .estim .surt { color: #BFE6F7; }
.theme-souple .estim > div > p { color: var(--s-mer-t); font-size: 1.1rem; max-width: 520px; margin: 18px 0 0; }
.theme-souple .form-estim {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 720px; margin-top: 28px; padding: 8px;
  border-radius: 22px 22px 14px 14px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.theme-souple .bascule { display: flex; margin: 0; padding: 4px; border: 0; border-radius: 16px 16px 10px 10px; background: rgba(10, 40, 64, .45); }
.theme-souple .bascule legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.theme-souple .bascule input { position: absolute; opacity: 0; pointer-events: none; }
.theme-souple .bascule label { padding: 11px 16px; border-radius: 13px 13px 7px 7px; font: 600 15px/1 var(--texte); color: var(--s-mer-t); cursor: pointer; transition: background-color .25s, color .25s; }
.theme-souple .bascule input:checked + label { background: #fff; color: var(--s-encre); }
.theme-souple .bascule input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px; }
.theme-souple .form-estim .champ { flex: 1; min-width: 150px; }
.theme-souple .form-estim .champ-surface { flex: 0 1 150px; min-width: 130px; }
.theme-souple .form-estim input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.theme-souple .form-estim input::-webkit-inner-spin-button { -webkit-appearance: none; }
.theme-souple .form-estim .champ input { width: 100%; height: 46px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; font: 400 16px var(--texte); color: var(--s-encre); }
.theme-souple .form-estim .champ input::placeholder { color: #5F7587; opacity: 1; }
.theme-souple .form-estim .bouton { height: 46px; border-radius: 18px 18px 7px 7px; }
.theme-souple .estim-etapes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 660px; counter-reset: e; }
.theme-souple .estim-etapes li { position: relative; padding: 42px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--s-mer-t); counter-increment: e; }
.theme-souple .estim-etapes li::before {
  content: counter(e); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 16px 16px 6px 6px; display: grid; place-items: center;
  background: var(--s-soleil); color: var(--s-encre); font: 760 16px/1 var(--titres);
}
.theme-souple .estim-etapes b { color: #fff; font-weight: 600; }
.theme-souple .estim-visuel {
  position: relative; justify-self: end; width: 320px; height: 372px; border-radius: 999px 999px 28px 28px; overflow: hidden;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .5);
}
.theme-souple .estim-visuel svg { display: block; width: 100%; height: 100%; }

/* =========================================================== 7. Pages intérieures
   Tout ce que le moteur produit hors de l'accueil prend le même langage : ciel léger en tête de page, grands arrondis, arches,
   ombres douces, un seul accent (la palette de la région). Les composants existants gardent leur structure HTML. */
.theme-souple .ariane { padding-top: 18px; padding-bottom: 0; font-size: .875rem; color: var(--s-encre-3); }
.theme-souple .ariane ol { gap: 4px 8px; }
.theme-souple .ariane li + li::before { content: "›"; margin-right: 8px; color: var(--s-encre-3); opacity: .7; }
.theme-souple .ariane a { color: var(--s-encre-2); text-decoration: none; }
.theme-souple .ariane a:hover { color: var(--s-lien); text-decoration: underline; text-underline-offset: 3px; }
.theme-souple .ariane [aria-current="page"] { color: var(--s-encre); font-weight: 600; }

/* ouverture de page : le ciel de la région, un soleil pâle à droite */
.theme-souple .une { position: relative; overflow: hidden; padding: 30px 0 44px; background: none; }
/* le soleil pâle est dans le fond de la page (body), pas dans l'ouverture : pas d'arête là où le fil d'Ariane s'arrête */
.theme-souple .une:not(.une-photo)::before { content: none; }
.theme-souple .une .tuiles { margin-top: 30px; }
.theme-souple .tuiles > .tuile:only-child { max-width: 400px; }   /* une seule tuile : jamais étirée sur toute la largeur */
.theme-souple .une > .conteneur { position: relative; }
.theme-souple .une h1 { max-width: 20ch; }
.theme-souple .une .chapo { margin-bottom: 0; }
.theme-souple .une + .bloc, .theme-souple .une-photo + .bloc { padding-top: 40px; }
.theme-souple .une-photo {
  min-height: clamp(380px, 56vh, 560px); margin: 14px 0 0; border-radius: 0 0 var(--r-xl) var(--r-xl); background: var(--s-mer-f); color: #fff;
}
.theme-souple .une-photo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--s-voile-rgb, 10, 40, 64), .44) 0%, rgba(var(--s-voile-rgb, 10, 40, 64), .34) 40%, rgba(var(--s-voile-rgb, 10, 40, 64), .82) 100%); }
.theme-souple .une-photo .une-texte { padding-top: 100px; padding-bottom: 44px; }
.theme-souple .une-photo.avec-bas .une-texte { padding-bottom: 104px; }
.theme-souple .une-photo h1 { color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .35); max-width: 22ch; }
.theme-souple .une-photo .surtitre { color: #fff; }
.theme-souple .une-photo .chapo { color: rgba(255, 255, 255, .94); }
.theme-souple .une-photo a { color: #fff; }
.theme-souple .une-photo .recherche label, .theme-souple .une-photo .filtre label { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.theme-souple .une-bas { margin-top: -72px; }
/* le crédit est posé sur la photo (obligatoire, licence Wikimedia Commons) : blanc, jamais l'encre des <small> du thème */
.theme-souple .credit, .theme-souple .une-photo .credit {
  font-size: .72rem; color: #fff; padding: 3px 10px; border-radius: 10px; background: rgba(8, 24, 38, .62); text-shadow: none;   /* pastille sombre : contraste ≥ 4,5 sur n'importe quelle photo */
}
.theme-souple .credit a { color: inherit; text-decoration-color: rgba(255, 255, 255, .6); }
.theme-souple .espace-tete { background: none; }

/* tuiles de chiffres clés */
.theme-souple .tuiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 10px; }
.theme-souple .tuile {
  position: relative; gap: 6px; padding: 22px 22px 20px; border: 0; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); color: var(--s-encre);
  transition: transform .45s var(--ressort), box-shadow .45s;
}
.theme-souple .tuile::before { content: ""; position: absolute; left: 22px; top: 0; width: 34px; height: 4px; border-radius: 0 0 4px 4px; background: var(--s-soleil); }
.theme-souple .tuiles .tuile:nth-child(3n + 2)::before { background: var(--s-focus); }
.theme-souple .tuiles .tuile:nth-child(3n + 3)::before { background: var(--s-chaud); }
.theme-souple a.tuile:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.theme-souple .tuile-label { font-size: .92rem; color: var(--s-encre-2); }
.theme-souple .tuile-valeur { font: 760 2.05rem/1.15 var(--titres); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.theme-souple .tuile-detail { font-size: .84rem; color: var(--s-encre-3); }

/* encadrés, sources, citations */
.theme-souple .encadre {
  position: relative; border: 0; border-radius: var(--r-m); background: #fff; box-shadow: var(--ombre); padding: 20px 24px 20px 30px; max-width: 80ch;
}
.theme-souple .encadre::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 5px; border-radius: 0 5px 5px 0; background: var(--s-soleil); }
.theme-souple .encadre-info::before { background: var(--s-focus); }
.theme-souple .encadre-titre { font: 700 1.05rem/1.3 var(--titres); }
.theme-souple .source { font-size: .84rem; color: var(--s-encre-3); }
.theme-souple .sources-article { border: 0; border-radius: var(--r-m); background: #fff; box-shadow: var(--ombre); padding: 20px 24px; }
.theme-souple .prose blockquote {
  position: relative; margin: 1.6em 0; padding: 18px 24px 18px 28px; border: 0; border-radius: var(--r-m); background: #fff; box-shadow: var(--ombre);
  color: var(--s-encre-2); font-size: 1.05em;
}
.theme-souple .prose blockquote::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 5px; border-radius: 0 5px 5px 0; background: var(--s-soleil); }
.theme-souple .prose blockquote p:last-child { margin-bottom: 0; }
.theme-souple .a-completer { border-radius: 6px; }
.theme-souple .periode, .theme-souple .badge { background: color-mix(in srgb, var(--s-focus) 11%, #fff); color: var(--s-lien); border-radius: 999px 999px 6px 6px; padding-inline: 10px; }
.theme-souple .marque { color: var(--s-encre-3); }

/* graphiques : cartes blanches, barres arrondies, courbes douces */
.theme-souple .graph { border: 0; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); padding: 24px 26px; margin-bottom: 20px; }
.theme-souple .graph-titre { font: 700 1.1rem/1.3 var(--titres); margin-bottom: 18px; }
.theme-souple .graph-titre span { font: 400 .875rem/1.4 var(--texte); color: var(--s-encre-3); margin-top: 2px; }
.theme-souple .barres { gap: 4px; }
.theme-souple .barre { min-height: 34px; border-radius: 12px; padding: 0 8px; }
.theme-souple .barre:hover, .theme-souple .barre:focus-visible { background: color-mix(in srgb, var(--s-focus) 8%, #fff); }
.theme-souple .barre-label a { color: var(--s-encre); text-decoration: none; }
.theme-souple .barre-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
.theme-souple .barre-piste { height: 16px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, transparent 0 12px, color-mix(in srgb, var(--s-focus) 10%, #fff) 12px); }
.theme-souple .barre-remplie { border-radius: 8px 8px 2px 2px; background: var(--s-focus); }
.theme-souple .barre-valeur { font-family: var(--titres); font-weight: 700; }
.theme-souple .dpe-lettre { border-radius: 9px 9px 4px 4px; font-family: var(--titres); }
.theme-souple .barre-remplie.dpe-a { background: #009c6d; } .theme-souple .barre-remplie.dpe-b { background: #52b153; }
.theme-souple .barre-remplie.dpe-c { background: #a5cc74; } .theme-souple .barre-remplie.dpe-d { background: #f4e70f; }
.theme-souple .barre-remplie.dpe-e { background: #f0b40f; } .theme-souple .barre-remplie.dpe-f { background: #eb8235; }
.theme-souple .barre-remplie.dpe-g { background: #d7221f; }
.theme-souple .empile-barre { height: 32px; border-radius: 10px 10px 4px 4px; overflow: hidden; background: transparent; }
.theme-souple .seg:first-child { border-radius: 10px 0 0 4px; }
.theme-souple .seg:last-child { border-radius: 0 10px 4px 0; }
.theme-souple .seg { font-family: var(--titres); }
.theme-souple .legende { color: var(--s-encre-2); }
.theme-souple .cle { border-radius: 4px 4px 1px 1px; }
.theme-souple .trace { stroke-width: 2.6px; }
.theme-souple .point { box-shadow: 0 0 0 3px #fff; }
.theme-souple .courbe-zone { border-bottom-color: var(--axe); }
.theme-souple .donnees summary { color: var(--s-lien); font-weight: 600; }
.theme-souple .info-bulle { border-radius: 14px 14px 8px 8px; background: var(--s-encre); color: #fff; box-shadow: var(--ombre-haute); }

/* tableaux */
.theme-souple .table-defil { overflow-x: auto; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); padding: 6px 14px; }
.theme-souple .table-defil:focus-visible { outline-offset: 2px; }
.theme-souple .tableau { background: none; border-radius: 0; font-size: .94rem; font-variant-numeric: tabular-nums; }
.theme-souple .tableau caption { font: 700 1.05rem/1.3 var(--titres); padding: 14px 8px 8px; }
.theme-souple .tableau th, .theme-souple .tableau td { padding: 12px 10px; border-bottom-color: var(--filet); }
.theme-souple .tableau thead th { font: 600 .8rem/1.3 var(--texte); color: var(--s-encre-3); border-bottom: 1px solid var(--axe); }
.theme-souple .tableau tbody th { font-weight: 600; }
.theme-souple .tableau tbody th a { color: var(--s-encre); text-decoration: none; }
.theme-souple .tableau tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.theme-souple .tableau tbody tr:last-child th, .theme-souple .tableau tbody tr:last-child td { border-bottom: 0; }
.theme-souple .tableau tbody tr:hover { background: color-mix(in srgb, var(--s-focus) 7%, #fff); }
.theme-souple .tableau td small { color: var(--s-encre); }
.theme-souple .prose .table-defil { margin: 1.2em 0; }

/* listes de liens, puces, cartes */
.theme-souple .puces { gap: 10px; }
.theme-souple .puces a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border: 0; border-radius: 16px 16px 8px 8px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--filet); color: var(--s-encre); font-weight: 500; transition: background-color .25s, box-shadow .25s, transform .35s var(--ressort);
}
.theme-souple .puces a:hover { background: color-mix(in srgb, var(--s-focus) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-focus) 45%, #fff); color: var(--s-encre); transform: translateY(-2px); }
.theme-souple .puces span { color: var(--s-encre-3); }
.theme-souple .cartes { gap: 20px; }
.theme-souple .carte { border: 0; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); padding: 24px 26px; transition: transform .45s var(--ressort), box-shadow .45s; }
.theme-souple a.carte:hover, .theme-souple .carte-lien:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.theme-souple .carte h3 { font-size: 1.3rem; }
.theme-souple .carte p:last-child { color: var(--s-encre-2); }
.theme-souple .presse li { grid-template-columns: 9.5rem 1fr auto; border-bottom-color: var(--filet); padding: 13px 0; }
.theme-souple .presse a { color: var(--s-encre); font-weight: 600; }
.theme-souple .presse a:hover { color: var(--s-lien); }
.theme-souple .presse time, .theme-souple .presse-source { color: var(--s-encre-3); }
.theme-souple .presse-carte .presse { margin-bottom: 0; }

/* cartes photo : l'image dans une arche */
.theme-souple .cartes-photo { gap: 22px; }
.theme-souple .carte-photo {
  padding: 12px 12px 6px; border: 0; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); color: var(--s-encre);
  transition: transform .45s var(--ressort), box-shadow .45s;
}
.theme-souple .carte-photo:hover { border: 0; transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.theme-souple .carte-image { border-radius: 50% 50% 18px 18px / 34% 34% 18px 18px; background: var(--s-bande); }
/* sans photo : une petite arche au soleil couchant sur la mer (jamais un cadre vide), aux couleurs de la région */
.theme-souple .carte-image:has(.carte-sans-photo) { aspect-ratio: auto; height: 92px; }
.theme-souple .carte-sans-photo {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(circle at 50% 74%, var(--s-soleil) 0 17px, color-mix(in srgb, var(--s-soleil) 30%, transparent) 18px 30px, transparent 31px),
    linear-gradient(0deg, var(--s-mer) 0 20%, var(--s-houle-2) 20% 27%, transparent 27%),
    linear-gradient(180deg, color-mix(in srgb, var(--s-ciel-1) 70%, #fff), color-mix(in srgb, var(--s-ciel-3) 80%, #fff));
}
.theme-souple .carte-corps { padding: 16px 12px 14px; }
.theme-souple .carte-photo .carte-meta { color: var(--s-lien); letter-spacing: .05em; }
.theme-souple .carte-titre { font: 700 1.28rem/1.2 var(--titres); letter-spacing: -.008em; }
.theme-souple .carte-texte { color: var(--s-encre-2); }
.theme-souple .carte-suite { color: var(--s-lien); font-weight: 600; }
.theme-souple .cartes-grandes .carte-titre { font-size: 1.6rem; }
.theme-souple .article-photo img { border-radius: var(--r-l); }
.theme-souple .galerie img { border-radius: var(--r-m); }
.theme-souple .vignette img { border-radius: 12px; }
.theme-souple .bandeau-agences {
  position: relative; overflow: hidden; border: 0; border-radius: var(--r-l); padding: 26px 32px; margin: 32px 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--s-soleil) 22%, #fff), color-mix(in srgb, var(--s-ciel-2) 70%, #fff)); box-shadow: var(--ombre);
}
.theme-souple .bandeau-agences .bandeau-titre { font: 700 1.35rem/1.25 var(--titres); }
.theme-souple .bandeau-agences p { color: var(--s-encre-2); }

/* annuaire, agences, biens */
.theme-souple .groupe { border-top-color: var(--filet); }
.theme-souple .groupe h2 { font-size: 1.45rem; }
.theme-souple .groupe h2 a { color: var(--s-encre); }
.theme-souple .agences { gap: 14px; }
.theme-souple .agence { border: 0; border-radius: var(--r-m); background: #fff; box-shadow: var(--ombre); padding: 18px 20px; }
.theme-souple .agence-partenaire { box-shadow: inset 0 3px 0 var(--s-soleil), var(--ombre); }
.theme-souple .agence-nom { font-family: var(--titres); font-weight: 700; }
.theme-souple .biens { gap: 18px; }
.theme-souple .bien { border: 0; border-radius: var(--r-m); background: #fff; box-shadow: var(--ombre); transition: transform .45s var(--ressort), box-shadow .45s; }
.theme-souple .bien:hover { transform: translateY(-4px); box-shadow: var(--ombre-haute); }
.theme-souple .bien-photo { border-radius: 50% 50% 0 0 / 22% 22% 0 0; overflow: hidden; background: var(--s-bande); }
.theme-souple .bien-prix, .theme-souple .formule-prix { color: var(--s-chaud-f); font-family: var(--titres); font-weight: 700; }
.theme-souple .fiche-agence-infos > div { border-bottom-color: var(--filet); }

/* formulaires */
.theme-souple .contact-grille { gap: 32px; }
.theme-souple .formulaire { border: 0; border-radius: var(--r-l); background: #fff; box-shadow: var(--ombre); padding: 28px 30px; }
.theme-souple .formulaire label { color: var(--s-encre); }
.theme-souple .formulaire input:not([type=checkbox]):not([type=radio]), .theme-souple .formulaire select, .theme-souple .formulaire textarea {
  border: 0; border-radius: 14px; background: var(--s-fond); box-shadow: inset 0 0 0 1px var(--axe); padding: 12px 14px; font: 400 1rem/1.4 var(--texte); color: var(--s-encre);
}
.theme-souple .formulaire input:not([type=checkbox]):not([type=radio]):focus, .theme-souple .formulaire select:focus, .theme-souple .formulaire textarea:focus {
  outline: 3px solid color-mix(in srgb, var(--s-focus) 35%, transparent); outline-offset: 0; box-shadow: inset 0 0 0 2px var(--s-focus); border: 0;
}
.theme-souple .formulaire legend { font-family: var(--titres); font-weight: 700; }
.theme-souple .formulaire input[type=checkbox], .theme-souple .formulaire input[type=radio] { accent-color: var(--s-focus); }
.theme-souple .formulaire .bouton { margin-top: 6px; }
.theme-souple .alerte { border-radius: 14px; }
.theme-souple .contact-cote .encadre { max-width: none; }

/* questions fréquentes */
.theme-souple .bloc-faq { background: var(--s-bande); }
.theme-souple .bloc-faq .faq-liste { gap: 12px; max-width: 900px; }
.theme-souple .faq-item { border: 0; border-radius: var(--r-m); background: #fff; box-shadow: var(--ombre); overflow: hidden; transition: box-shadow .3s; }
.theme-souple .faq-item[open] { box-shadow: var(--ombre-haute); }
.theme-souple .faq-item summary { padding: 18px 64px 18px 24px; font: 700 1.05rem/1.35 var(--titres); letter-spacing: -.004em; color: var(--s-encre); }
.theme-souple .faq-item summary:focus-visible { outline-offset: -3px; border-radius: var(--r-m); }
.theme-souple .faq-item summary::after {
  content: ""; right: 20px; width: 28px; height: 28px; margin-top: -14px; top: 50%; transform: none; border-radius: 14px 14px 5px 5px;
  background: color-mix(in srgb, var(--s-focus) 12%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14h12M14 8v12' stroke='%23155C99' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.theme-souple .faq-item[open] summary::after {
  content: ""; background: var(--s-soleil) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M8 14h12' stroke='%230F2B40' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.theme-souple .faq-reponse { padding: 0 24px 22px; color: var(--s-encre-2); }

/* articles, pages de texte */
.theme-souple .article header { margin-bottom: 30px; }
.theme-souple .article-meta { color: var(--s-encre-3); }
.theme-souple .prose { font-size: 1.08rem; }
.theme-souple .prose h2 { margin-top: 1.7em; font-size: 1.7rem; }
.theme-souple .prose h3 { margin-top: 1.4em; }
.theme-souple .prose a { text-decoration-color: color-mix(in srgb, var(--s-lien) 45%, transparent); }
.theme-souple .conteneur-texte h1 { max-width: none; }

/* cartes des ventes (carte.js : styles injectés après ce fichier, d'où la spécificité) et Leaflet */
.theme-souple .carte-ventes { border: 0; border-radius: var(--r-l); box-shadow: var(--ombre-haute); background: var(--s-bande); }
.theme-souple .carte-outils button {
  min-height: 40px; padding: 6px 16px; border: 0; border-radius: 16px 16px 8px 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--filet); color: var(--s-encre); font-weight: 500;
}
.theme-souple .carte-outils button:hover { background: color-mix(in srgb, var(--s-focus) 8%, #fff); }
.theme-souple .carte-outils button[aria-pressed="true"] { background: var(--s-encre); box-shadow: none; color: #fff; }
.theme-souple .carte-compte, .theme-souple .carte-legende { color: var(--s-encre-3); }
.theme-souple .leaflet-container { font-family: var(--texte); }
.theme-souple .leaflet-popup-content-wrapper { border-radius: 18px 18px 10px 10px; box-shadow: var(--ombre-haute); }
.theme-souple .leaflet-popup-content { font-family: var(--texte); color: var(--s-encre); }
.theme-souple .leaflet-bar { border: 0; border-radius: 14px; box-shadow: var(--ombre); overflow: hidden; }
.theme-souple .leaflet-bar a { color: var(--s-encre); }
.theme-souple .leaflet-control-attribution { border-radius: 10px 0 0 0; }
.theme-souple .leaflet-control-attribution a { color: #00608A; }   /* contraste ≥ 4,5 sur le fond blanc translucide */

/* espace agences et autres modules : mêmes jetons */
.theme-souple .espace-carte, .theme-souple .avantage, .theme-souple .etapes li { border: 0; border-radius: var(--r-l); box-shadow: var(--ombre); }
.theme-souple .espace-menu a { border-radius: 16px 16px 8px 8px; }
.theme-souple .etapes li::before { background: var(--s-soleil); color: var(--s-encre); border-radius: 16px 16px 6px 6px; font-family: var(--titres); }

/* =========================================================== 8. Pied de page : la mer, en bas de chaque page */
.theme-souple .pied { position: relative; margin-top: 0; padding: 0 0 20px; background: var(--s-mer-f); color: #CFE0EA; font-size: .94rem; }
.theme-souple .pied > .vague { margin-bottom: 0; }
/* la houle du pied reprend le fond de la dernière section quand elle est en bande (FAQ, estimation, actualités) */
.theme-souple main:has(> :is(.bloc-faq, .estimation, .actu-section):last-of-type) + .pied { --pied-haut: var(--s-bande); }
.theme-souple .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-top: 18px; padding-bottom: 20px; }
.theme-souple .pied-nom { font: 800 1.4rem/1.1 var(--titres); letter-spacing: -.015em; color: #fff; gap: 12px; }
.theme-souple .pied-nom .embleme { width: 32px; height: 35px; flex: none; }
.theme-souple .pied p { line-height: 1.55; }
.theme-souple .pied-grille > div:first-child p:not(.pied-nom) { max-width: 36ch; margin-top: 14px; }
.theme-souple .pied-titre { font: 700 15px/1.2 var(--texte); color: #fff; margin-bottom: 14px; }
.theme-souple .pied ul { gap: 8px; }
/* pied de page à beaucoup de liens (plus de douze, sites à modules de données) : la liste passe sur deux colonnes */
@media (min-width: 821px) {
  .theme-souple .pied-grille:has(ul li:nth-child(13)) { grid-template-columns: 1.1fr 1.9fr 1fr; }
  .theme-souple .pied ul:has(li:nth-child(13)) { display: block; columns: 2; column-gap: 28px; }
  .theme-souple .pied ul:has(li:nth-child(13)) li { break-inside: avoid; margin-bottom: 8px; }
}
.theme-souple .pied a { color: #CFE0EA; text-decoration: none; transition: color .2s; }
.theme-souple .pied a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.theme-souple .pied a:focus-visible { outline-color: #fff; }
.theme-souple .pied-note { color: #A9C1D0; }
.theme-souple .pied-bas { margin-top: 6px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); color: #A9C1D0; font-size: .875rem; }
.theme-souple .pied-bas a { color: #CFE0EA; text-decoration: underline; text-underline-offset: 3px; }
.theme-souple .pied small { color: inherit; }

/* =========================================================== 9. Adaptation */
/* écrans larges mais bas (portables 1280 × 720 à 1536 × 864) : texte du héros resserré, rue en pleine largeur */
@media (min-width: 1280px) and (max-height: 920px) {
  .theme-souple .heros { padding-top: 90px; }
  .theme-souple .scene-cadre { --hx: 440px; }
  .theme-souple .heros h1 { font-size: 3.2rem; margin-top: 10px; }
  .theme-souple .heros .chapo { font-size: 1.03rem; line-height: 1.5; margin-top: 10px; max-width: 770px; }
  .theme-souple .heros .recherche { margin-top: 16px; }
  .theme-souple .heros .recherche-champ { height: 54px; }
  .theme-souple .heros .recherche button { height: 42px; }
  .theme-souple .exemples { margin-top: 9px; font-size: 14.5px; }
}
@media (min-width: 1280px) and (max-height: 800px) {
  .theme-souple .heros { padding-top: 84px; }
  .theme-souple .heros .surtitre { display: none; }
  .theme-souple .heros h1 { font-size: 3rem; margin-top: 0; }
  .theme-souple .scene-cadre { --hx: 400px; }
}
@media (min-width: 1280px) and (max-height: 740px) {
  .theme-souple .heros { padding-top: 78px; }
  .theme-souple .heros h1 { font-size: 2.9rem; }
  .theme-souple .heros .chapo { margin-top: 8px; }
  .theme-souple .heros .recherche { margin-top: 14px; }
}

/* sous 1280 px : la rue garde l'échelle de 1280 px et défile, ouverte au milieu, calée sur les îlots */
@media (max-width: 1279px) {
  .theme-souple .scene-cadre { --l: 1280px; margin-top: 4px; }
  .theme-souple .scene-provisoire.scene-cadre { --l: 100%; }
  .theme-souple .scene {
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px); mask-image: linear-gradient(180deg, transparent 0, #000 44px);
  }
  .theme-souple .scene::-webkit-scrollbar { display: none; }
  .theme-souple .scene-in { width: 1280px; margin-top: -112px; overflow: hidden; }
  .theme-souple .etiq-x { scroll-snap-align: center; }
  .theme-souple .glisser {
    position: absolute; z-index: 6; left: 50%; top: 38%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px; border-radius: 999px; transform: translateX(-50%);
    background: rgba(15, 43, 64, .82); color: #fff; font: 600 14.5px/1 var(--texte); white-space: nowrap; pointer-events: none; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); transition: opacity .4s;
  }
  .theme-souple .glisser svg { flex: none; animation: s-pousse-g 1.6s ease-in-out infinite; }
  .theme-souple .glisser svg:last-child { animation-name: s-pousse-d; }
  .theme-souple .scene-cadre.glisse .glisser { opacity: 0; }
  .theme-souple .scene-provisoire .glisser { display: none; }
  .theme-souple .scene-provisoire.defile .glisser { display: flex; top: 42%; }
}
/* tablettes à l'horizontale (1024 × 768 à 1194 × 834) : texte resserré, rue remontée sous la colonne de texte */
@media (min-width: 821px) and (max-width: 1279px) and (max-height: 920px) {
  .theme-souple .heros { padding-top: 90px; }
  .theme-souple .heros h1 { font-size: clamp(2.5rem, 4.2vw, 3rem); margin-top: 8px; }
  .theme-souple .heros .chapo { font-size: 1rem; line-height: 1.5; margin-top: 12px; }
  .theme-souple .heros .recherche { margin-top: 16px; }
  .theme-souple .heros .recherche-champ { height: 52px; }
  .theme-souple .heros .recherche button { height: 40px; }
  .theme-souple .exemples { margin-top: 9px; font-size: 14px; }
  .theme-souple .scene-cadre { margin-top: -46px; }
  .theme-souple .scene-provisoire.scene-cadre { margin-top: 0; }
}
@media (min-width: 821px) and (max-width: 1279px) and (max-height: 780px) {
  .theme-souple .heros { padding-top: 86px; }
  .theme-souple .heros .surtitre { display: none; }
  .theme-souple .heros h1 { margin-top: 0; }
}

@media (max-width: 1180px) {
  .theme-souple .nav a { padding: 12px 9px 15px; font-size: 15px; }
  .theme-souple .loyers-grille, .theme-souple .dpe-grille, .theme-souple .marche-bref { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .theme-souple .marche-bref.nombreux .reperes .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-souple .loyers-cote { position: static; }
  .theme-souple .estim { grid-template-columns: minmax(0, 1fr) 280px; padding: 44px 40px; }
  .theme-souple .estim.sans-visuel { grid-template-columns: minmax(0, 1fr); }
  .theme-souple .estim-visuel { width: 280px; height: 360px; }
  .theme-souple .dep-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .theme-souple .dep-tuiles.dep-1 { grid-template-columns: minmax(0, 240px); }
  .theme-souple .dep-tuiles.dep-2 { grid-template-columns: repeat(2, minmax(0, 240px)); }
}
/* menu : la navigation devient un panneau sous 980 px (sans script, elle reste une liste visible sous le logo) */
@media (max-width: 980px) {
  .theme-souple .ciel { display: none; }
  .theme-souple .annonce { margin-left: 0; }
  .theme-souple .entete-in { flex-wrap: wrap; }
  .theme-souple .nav { order: 5; width: 100%; margin-left: 0; overflow-x: auto; }
  .theme-souple .nav ul { width: max-content; margin: 0 auto; }
  .theme-souple.js .menu-bouton { display: inline-flex; }
  .theme-souple.js .entete-in { flex-wrap: nowrap; }
  .theme-souple.js .nav {
    position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); display: none; width: auto; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto;
    padding: 10px; border-radius: 22px 22px 14px 14px; background: #fff; box-shadow: var(--ombre-haute);
  }
  .theme-souple.js .entete.ouvert .nav { display: block; }
  .theme-souple.js .nav ul { flex-direction: column; width: auto; gap: 0; margin: 0; }
  .theme-souple.js .nav a { display: block; padding: 14px 16px; border-radius: 12px; font: 600 17px/1.2 var(--texte); }
  .theme-souple.js .nav a::after { display: none; }
  .theme-souple.js .nav a:hover, .theme-souple.js .nav a:focus-visible { background: var(--s-fond); }
  .theme-souple.js .nav a[aria-current="page"] { background: color-mix(in srgb, var(--s-focus) 10%, #fff); color: var(--s-encre); }
}

/* mobile : la rue défile (ouverte au milieu, calée sur les îlots) */
@media (max-width: 820px) {
  .theme-souple { scroll-padding-top: 78px; }
  .theme-souple .conteneur { padding-inline: 18px; }
  .theme-souple .heros { --bord: 16px; padding-top: 84px; background: linear-gradient(180deg, var(--s-ciel-0) 0, var(--s-ciel-1) 190px, var(--s-ciel-2) 350px, var(--s-ciel-3) 500px, var(--s-ciel-4) 640px, var(--s-ciel-5) 780px); }
  .theme-souple .entete-in, .theme-souple.accueil-souple .entete-in { padding-block: 10px; padding-inline: 14px 12px; gap: 10px; }
  .theme-souple .bouton-entete { height: 42px; padding: 0 15px; font-size: 14.5px; }
  .theme-souple .logo-region, .theme-souple .logo-metier { font-size: 19px; }
  .theme-souple .logo-rue .embleme { width: 28px; height: 31px; }
  .theme-souple .soleil { right: -470px; top: -380px; }
  .theme-souple .heros .surtitre { font-size: 13px; }
  .theme-souple .heros h1 { font-size: min(2.2rem, calc((100vw - 36px) / 10.9)); line-height: 1.05; margin-top: 14px; }
  .theme-souple .heros h1 .l2 { white-space: nowrap; }
  .theme-souple .heros h1 .l2 > .souligne { display: none; }
  .theme-souple .mot .souligne { display: block; }
  .theme-souple .heros .chapo { font-size: 1.03rem; margin-top: 14px; }
  .theme-souple .heros .recherche { margin-top: 20px; }
  .theme-souple .heros .recherche-champ { height: 56px; padding-left: 16px; }
  .theme-souple .heros .recherche button { height: 44px; padding: 0 15px; font-size: 15px; }
  .theme-souple .recherche input { font-size: 16px; padding: 0 8px 0 10px; }
  .theme-souple .exemples { gap: 0 11px; align-items: center; font-size: 14px; }
  .theme-souple .exemples a { display: inline-flex; align-items: center; min-height: 44px; }
  .theme-souple .logo-rue { min-height: 44px; }
  .theme-souple .loyers-tableau th a, .theme-souple .tableau th a, .theme-souple .tableau td a { display: inline-block; padding: 13px 0; margin: -13px 0; min-width: 44px; }   /* cible de 44 px sans changer la mise en page */
  .theme-souple .liste-communes { gap: 0 20px; }
  .theme-souple .liste-communes li { display: flex; align-items: center; min-height: 44px; }
  .theme-souple .liste-communes a { display: inline-flex; align-items: center; min-height: 44px; }
  .theme-souple .exemples a, .theme-souple .liste-communes a { min-width: 44px; justify-content: center; }
  /* cibles tactiles de 44 px : fil d'Ariane, listes de liens, barres des classements, pastilles de communes */
  .theme-souple .ariane a, .theme-souple .liens-fleches a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .theme-souple .ariane ol { gap: 0 8px; }
  .theme-souple .ariane li { display: flex; align-items: center; min-height: 44px; }
  .theme-souple .liens-fleches { gap: 0; }
  .theme-souple .liens-fleches a { gap: .3em; }
  .theme-souple .barre { min-height: 44px; }
  .theme-souple .barre-label a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .theme-souple .puces a { min-height: 44px; }
  /* pied de page : chaque lien est une cible de 44 px (la mise en page reste compacte : l'écart passe dans le remplissage) */
  .theme-souple .pied ul { gap: 0; }
  .theme-souple .pied li { margin-bottom: 0 !important; }
  .theme-souple .pied li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .theme-souple .lien-fleche {   /* cible tactile de 44 px : le trait passe de la bordure au soulignement du texte */
    min-height: 44px; padding: 0; border-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px;
    text-underline-offset: 7px; text-decoration-color: color-mix(in srgb, var(--s-focus) 28%, transparent);
  }
  /* « Créée en 2024 · Fiche officielle » : la ligne devient une rangée de 44 px dont le lien occupe toute la hauteur */
  .theme-souple .agence-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35em; }
  .theme-souple .agence-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .theme-souple .agence-action a, .theme-souple a.lien-fort { display: inline-flex; align-items: center; min-height: 44px; }   /* liens isolés des fiches d'agences et des blocs « en savoir plus » */
  .theme-souple .donnees summary { display: flex; align-items: center; min-height: 44px; }   /* « Voir les données » : cible de 44 px */
  .theme-souple .formulaire .consentement input, .theme-souple .formulaire .cases input { width: 24px; height: 24px; margin-top: 0; }   /* case à cocher : 24 px, l'étiquette entière reste la cible */
  .theme-souple .formulaire .consentement label, .theme-souple .formulaire .cases label { min-height: 44px; align-items: center; }
  .theme-souple .calque.fond { will-change: auto; }
  .theme-souple .bande-mer { padding: 26px 0 26px; }
  .theme-souple .marche-bref.nombreux .reperes .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-souple .bande-grille { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .theme-souple .cartel dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .theme-souple .cartel dd { margin-bottom: 8px; }
  .theme-souple .stats { gap: 20px 18px; }
  .theme-souple .stat strong { font-size: 32px; }
  .theme-souple .stat p { font-size: 13.5px; }
  .theme-souple .vague { height: 52px; }
  .theme-souple .bloc, .theme-souple.accueil-souple .bloc { padding: 46px 0; }
  .theme-souple h2 { font-size: clamp(1.65rem, 7vw, 2.1rem); }
  /* tableau des loyers : une ligne par commune, la jauge sous le nom */
  .theme-souple .carte-tableau { padding: 4px 12px; }
  .theme-souple .loyers-tableau thead { display: none; }
  .theme-souple .loyers-tableau, .theme-souple .loyers-tableau tbody, .theme-souple .loyers-tableau tr, .theme-souple .loyers-tableau th, .theme-souple .loyers-tableau td { display: block; }
  .theme-souple .loyers-tableau tbody tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 10px; padding: 14px 4px; border-bottom: 1px solid var(--filet); }
  .theme-souple .loyers-tableau tbody tr:last-child { border-bottom: 0; }
  .theme-souple .loyers-tableau tbody th, .theme-souple .loyers-tableau tbody td { padding: 0; border: 0; }
  .theme-souple .loyers-tableau td.rang { grid-row: 1 / 3; width: auto; padding-top: 2px; text-align: left; }
  .theme-souple .loyers-tableau tbody th { grid-column: 2; }
  .theme-souple .loyers-tableau td.app { grid-column: 3; grid-row: 1; width: auto; }
  .theme-souple .app-in { display: block; }
  .theme-souple .app .jauge { display: none; }
  .theme-souple .app b::after { content: "\a0€/m²"; font: 500 12.5px var(--texte); color: var(--s-encre-3); }
  .theme-souple .loyers-tableau td.jauge-m { display: block; grid-column: 2 / 4; grid-row: 3; margin-top: 10px; }
  .theme-souple td.jauge-m .jauge { display: block; max-width: none; height: 15px; }
  .theme-souple .tag { margin-left: 6px; }
  .theme-souple .loyers-tableau td.mais, .theme-souple .loyers-tableau td.hab { grid-column: 2 / 4; text-align: left; font: 500 14px/1.5 var(--texte); color: var(--s-encre-2); }
  .theme-souple td.mais::before { content: "Maison\a0: "; }
  .theme-souple td.mais::after { content: "\a0€/m²"; }
  .theme-souple td.hab::before { content: "Habitants\a0: "; }
  .theme-souple .loyers-tableau td.mais { grid-row: 4; margin-top: 8px; }
  .theme-souple .loyers-tableau td.hab { grid-row: 5; }
  .theme-souple .duo, .theme-souple .trio, .theme-souple .trio-2 { grid-template-columns: minmax(0, 1fr); }
  .theme-souple .duo .s-carte:nth-child(2) { margin-top: 0; }
  .theme-souple .trio .s-carte:first-child { grid-row: auto; }
  .theme-souple .trio .s-carte:first-child h3, .theme-souple .trio-2 .s-carte:not(:first-child) h3 { font-size: 22px; }
  .theme-souple .trio .s-carte:not(:first-child) { flex-direction: column; align-items: stretch; padding: 12px 12px 22px; gap: 0; }
  .theme-souple .trio .s-carte:not(:first-child) .s-arche { flex: none; aspect-ratio: 16 / 8; border-radius: 999px 999px 22px 22px; }
  .theme-souple .trio .s-carte:not(:first-child) .s-corps { padding: 20px 12px 0; }
  .theme-souple .s-carte h3 { font-size: 24px; }
  .theme-souple .s-arche { aspect-ratio: 16 / 10; }
  .theme-souple .annonce { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 22px 24px; border-radius: 60px 60px 24px 24px; }
  .theme-souple .echelle-mini { width: 170px; padding: 22px 0 8px; }
  .theme-souple .dep-tuiles { gap: 10px; }
  .theme-souple .dep-tuiles a { min-height: 128px; padding: 20px 4px 10px; }
  .theme-souple .dep-tuiles b { font-size: 27px; }
  .theme-souple .dep-tuiles span { font-size: 13px; }
  .theme-souple .entete-bloc { flex-direction: column; align-items: flex-start; gap: 14px; }
  .theme-souple .estim { grid-template-columns: minmax(0, 1fr); padding: 38px 20px 0; gap: 26px; border-radius: 30px; }
  .theme-souple .estim.sans-visuel { padding-bottom: 32px; }
  .theme-souple .form-estim { border-radius: 20px; padding: 10px; }
  .theme-souple .bascule { width: 100%; }
  .theme-souple .bascule label { flex: 1; text-align: center; min-height: 44px; padding-top: 14px; padding-bottom: 14px; box-sizing: border-box; }
  .theme-souple .form-estim .bouton { width: 100%; }
  .theme-souple .estim-etapes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .theme-souple .estim-etapes li { padding: 4px 0 0 46px; min-height: 34px; }
  .theme-souple .estim-visuel { justify-self: center; width: 100%; max-width: 330px; height: 360px; margin-bottom: 24px; }
  .theme-souple .pied-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 22px; }
  .theme-souple .pied-grille > div:first-child { grid-column: 1 / 3; }
  .theme-souple .une { padding: 20px 0 32px; }
  .theme-souple .une-photo { min-height: 440px; }
  .theme-souple .une-photo .une-texte { padding-top: 72px; padding-bottom: 32px; }
  .theme-souple .une-photo.avec-bas .une-texte { padding-bottom: 80px; }
  .theme-souple .une-bas { margin-top: -52px; }
  .theme-souple .formulaire { padding: 22px 18px; }
  .theme-souple .bandeau-agences { padding: 22px 22px; }
  .theme-souple .graph { padding: 18px 16px; }
  .theme-souple .presse li { grid-template-columns: 1fr; gap: 2px; }
  .theme-souple .presse a { display: flex; align-items: center; min-height: 44px; }   /* titre d'une seule ligne : cible tactile de 44 px */
  /* crédits photo, filtres de carte, commandes Leaflet : zone tactile de 44 px sans changer la mise en page (le remplissage des liens en ligne est compensé par la marge) */
  .theme-souple .credit a, .theme-souple .leaflet-control-attribution a { padding: 15px 8px; margin: -15px -8px; }
  .theme-souple .carte-outils button { min-height: 44px; }
  .theme-souple .leaflet-touch .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; }
  .theme-souple .presse-carte { padding: 20px 18px 22px; }
  .theme-souple .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .theme-souple .tuile { padding: 18px 16px 16px; border-radius: 22px; }
  .theme-souple .tuile-valeur { font-size: 1.5rem; }
  .theme-souple .tuile::before { left: 16px; }
  .theme-souple .reperes .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .theme-souple .tuiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }   /* une tuile seule prend toute la ligne */
  .theme-souple .heros .recherche button .plus { display: none; }   /* « Voir » seul : le champ garde la place de son texte */
  .theme-souple .bouton-entete { display: none; }
  .theme-souple .nav .nav-cta { display: block; margin-top: 6px; }
  .theme-souple .nav .nav-cta a { background: var(--s-encre); color: #fff; text-align: center; border-radius: 18px 18px 8px 8px; }
  .theme-souple .nav .nav-cta a:hover { background: color-mix(in srgb, var(--s-encre) 82%, var(--s-focus)); color: #fff; }
  .theme-souple:not(.js) .nav .nav-cta { display: none; }
  .theme-souple .pied-grille { grid-template-columns: minmax(0, 1fr); }
  .theme-souple .pied-grille > div:first-child { grid-column: auto; }
}
@media (max-width: 420px) {
  .theme-souple .menu-bouton { width: 44px; padding: 0; }
  .theme-souple .menu-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .theme-souple .logo-region, .theme-souple .logo-metier { font-size: 18px; }
  .theme-souple .exemples { gap: 4px 9px; font-size: 13.5px; }
  .theme-souple .exemples a:nth-of-type(n+4) { display: none; }   /* trois exemples tiennent sur une ligne */
  .theme-souple .tuiles { gap: 10px; }
}
@media (max-width: 380px) {
  .theme-souple .heros .exemples > span { display: none; }
}
@media (max-width: 360px) {
  .theme-souple .logo-mots { flex-wrap: wrap; column-gap: .3em; row-gap: 2px; white-space: normal; }   /* sur une ligne tant que le nom tient, sur deux sinon */
  .theme-souple .logo-region, .theme-souple .logo-metier { font-size: 16px; }
}
@media (min-width: 821px) { .theme-souple .loyers-tableau td.jauge-m { display: none; } }

/* =========================================================== 10. Apparition, mouvement réduit, impression */
.theme-souple.js .revele { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1s var(--ressort); transition-delay: calc(var(--k, 0) * 90ms); }
.theme-souple.js .revele.vu { opacity: 1; transform: none; }
.theme-souple.js .revele .jauge i { transform: scaleX(0); transition: transform 1.2s var(--ressort); transition-delay: calc(var(--k, 0) * 60ms + .25s); }
.theme-souple.js .revele.vu .jauge i { transform: none; }
/* cartes à vignettes animées (palmiers, linge, tangage) : en pause tant qu'elles ne sont pas à l'écran */
.theme-souple.js .s-arche .palme, .theme-souple.js .s-arche .pointu, .theme-souple.js .estim-visuel .linge { animation-play-state: paused; }
.theme-souple.js .visible .s-arche .palme, .theme-souple.js .visible .s-arche .pointu, .theme-souple.js .visible .estim-visuel .linge { animation-play-state: running; }
.theme-souple .estim-visuel .vt.an, .theme-souple .estim-visuel .ov { animation-play-state: paused; }
.theme-souple .estim.vu .estim-visuel .vt.an, .theme-souple .estim.vu .estim-visuel .ov { animation-play-state: running; }

/* pause demandée (case cochée) : même état final que « réduire les animations » ; deux blocs, un navigateur sans :has() ignore le second seul */
.theme-souple.anim-stop *, .theme-souple.anim-stop *::before, .theme-souple.anim-stop *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.theme-souple.js.anim-stop .revele { opacity: 1; transform: none; }
.theme-souple.js.anim-stop .revele .jauge i { transform: none; }
.theme-souple.anim-stop .calque.fond { transform: none !important; }
.theme-souple:has(.anim-case:checked) *, .theme-souple:has(.anim-case:checked) *::before, .theme-souple:has(.anim-case:checked) *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.theme-souple.js:has(.anim-case:checked) .revele { opacity: 1; transform: none; }
.theme-souple.js:has(.anim-case:checked) .revele .jauge i { transform: none; }
.theme-souple:has(.anim-case:checked) .calque.fond { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-souple *, .theme-souple *::before, .theme-souple *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .theme-souple.js .revele { opacity: 1; transform: none; }
  .theme-souple.js .revele .jauge i { transform: none; }
  .theme-souple .fiche-x { transition: none; }
  .theme-souple .glisser svg { animation: none; }
}
@media print {
  .theme-souple *, .theme-souple *::before, .theme-souple *::after { animation: none !important; transition: none !important; }
  .theme-souple.js .revele { opacity: 1; transform: none; }
  .theme-souple.js .revele .jauge i { transform: none; }
  .theme-souple .entete, .theme-souple .glisser, .theme-souple .ciel, .theme-souple .fiches-x, .theme-souple .vague, .theme-souple .bandeau-brouillon { display: none; }
  .theme-souple .heros { padding-top: 0; background: none; }
  .theme-souple .heros::after { display: none; }
  .theme-souple .bande-mer, .theme-souple .pied, .theme-souple .estim { background: #fff; color: #000; box-shadow: none; }
  .theme-souple .bande-mer *, .theme-souple .pied *, .theme-souple .estim * { color: #000 !important; }
}