/* =========================================================
   POLICE DES TITRES — Newsreader, auto-hébergée.
   Servie depuis le thème : aucune requête vers un tiers, rien à
   renouveler, et la police reste disponible si Google est bloqué.
   font-display:swap → le texte s'affiche immédiatement en Georgia
   puis bascule : jamais de titre invisible pendant le chargement.
   ========================================================= */
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =========================================================
   SEJOURNO — Thème sur mesure / Matrix Digital
   Design system : variables, composants, utilitaires
   Aucune dépendance externe. JS vanilla. Icônes SVG inline.
   ========================================================= */

:root{
  /* Couleurs */
  --sable:#F7F3ED;
  --sable-2:#EFE9DF;
  --blanc:#FFFFFF;
  --encre:#17201C;
  --encre-2:#3D453F;
  /*
     Échelle de gris mesurée, pas choisie à l'œil.
     Chaque niveau tient le contraste AA (4,5:1) sur les DEUX fonds du site —
     le sable et le blanc des cartes — tout en restant nettement distinct du
     précédent : 8,96 → 5,61 → 4,63. Les valeurs d'origine (#6E756D et
     #9AA098) tombaient à 4,29 et 2,42 sur sable : une date d'article ou un
     « à partir de » y devenait illisible en plein jour, ce qui est exactement
     la situation d'un client qui consulte le site dehors à Dakar.
  */
  --gris:#5D635C;        /* texte secondaire — 5,61 sur sable */
  --gris-clair:#6B6F69;  /* texte tertiaire et icônes — 4,63 sur sable */
  --vert:#1E3A31;
  --vert-2:#2C5548;
  --terre:#AC5533;
  --terre-2:#A44E2C;
  --or:#C9A227;
  --bord:#E4DED4;
  --bord-fonce:#3A544A;

  /* Typo */
  --serif:'Newsreader',Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Rythme */
  --r:5px;
  --r-lg:10px;
  --max:1200px;
  --pad:clamp(20px,5vw,40px);

  --ombre:0 1px 2px rgba(23,32,28,.05),0 8px 24px -12px rgba(23,32,28,.18);
  --ombre-fort:0 2px 4px rgba(23,32,28,.06),0 18px 40px -18px rgba(23,32,28,.30);
  --t:.35s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--sable);
  color:var(--encre-2);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--serif);color:var(--encre);font-weight:400;line-height:1.15}

/* ---------- Utilitaires ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.section{padding:clamp(56px,8vw,104px) 0}
/*
   Le surtitre est le plus petit texte du site : 11 px, en capitales, très
   espacé. C'est donc lui qui a le plus besoin de contraste, et c'est lui qui
   en avait le moins — le terracotta de marque tombe à 3,78:1 sur le sable.
   On garde --terre pour tout ce qui est GRAPHIQUE (puces, filets, icônes,
   boutons) et on prend sa déclinaison foncée dès qu'il s'agit de LIRE.
*/
.eyebrow{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--terre-2);font-weight:700;margin-bottom:14px;display:block
}
.eyebrow.pale{color:var(--or)}
h2.titre{font-size:clamp(28px,4.2vw,44px);margin-bottom:16px;letter-spacing:-.01em}
h3.titre{font-size:clamp(21px,2.4vw,27px);margin-bottom:10px}
.chapo{font-size:clamp(16px,1.5vw,18px);color:var(--gris);max-width:62ch;line-height:1.65}
.tete{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}
.centre{text-align:center;margin-inline:auto}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ico-lg{width:26px;height:26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Bandeau maquette ---------- */
.bandeau{
  background:var(--encre);color:#D9D3C7;font-size:12px;letter-spacing:.04em;
  padding:9px var(--pad);text-align:center
}
.bandeau b{color:var(--or);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r);border:1px solid transparent;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:transform var(--t),background var(--t),box-shadow var(--t),border-color var(--t);
  white-space:nowrap
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-1{background:var(--terre);color:#fff;box-shadow:0 4px 14px -6px rgba(194,96,58,.7)}
.btn-1:hover{background:var(--terre-2);box-shadow:0 10px 22px -8px rgba(194,96,58,.75)}
.btn-2{background:transparent;color:var(--encre);border-color:var(--bord)}
.btn-2:hover{border-color:var(--encre);background:var(--blanc)}
.btn-3{background:var(--blanc);color:var(--encre)}
.btn-3:hover{background:var(--sable-2)}
.btn-wa{background:#1E6F4E;color:#fff}
.btn-wa:hover{background:#175A3F}
.btn-bloc{width:100%}
.btn-sm{padding:10px 18px;font-size:14px}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:60;background:rgba(247,243,237,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--bord)
}
.entete-in{display:flex;align-items:center;gap:28px;height:74px}
.logo{font-family:var(--serif);font-size:25px;letter-spacing:-.015em;color:var(--encre);display:flex;align-items:baseline;gap:2px}
.logo i{font-style:normal;color:var(--terre)}
.logo small{font-family:var(--sans);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris-clair);margin-left:8px;align-self:center}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.nav a{position:relative;padding:6px 0;color:var(--encre-2);transition:color var(--t)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--terre);
  transition:width var(--t)
}
.nav a:hover{color:var(--encre)}
.nav a:hover::after{width:100%}
.entete-actions{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:6px;font-size:12px;color:var(--gris);align-items:center}
.lang b{color:var(--encre);font-weight:600}
.lang span{color:var(--bord)}
.burger{display:none;background:none;border:1px solid var(--bord);border-radius:var(--r);padding:9px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{background:var(--vert);color:#EDE7DB;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 78% 18%,rgba(201,162,39,.16),transparent 65%)
}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);
  align-items:center;padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);position:relative;z-index:2}
.hero h1{
  color:#fff;font-size:clamp(34px,5.4vw,60px);line-height:1.06;letter-spacing:-.02em;margin-bottom:20px
}
.hero h1 em{font-style:normal;color:var(--or)}
.hero p.intro{font-size:clamp(16px,1.7vw,19px);color:#C3CFC7;max-width:52ch;line-height:1.6;margin-bottom:26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero-preuves{display:flex;gap:26px;flex-wrap:wrap;font-size:13.5px;color:#A9BAB1;border-top:1px solid var(--bord-fonce);padding-top:20px}
.hero-preuves div{display:flex;align-items:center;gap:8px}
.hero-preuves .ico{width:17px;height:17px;color:var(--or)}

.hero-visuel{position:relative}
.hero-photo{
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  aspect-ratio:4/5;background:var(--vert-2)
}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-vignette{
  position:absolute;left:-26px;bottom:26px;background:var(--blanc);color:var(--encre);
  border-radius:var(--r);padding:14px 18px;box-shadow:var(--ombre-fort);max-width:230px
}
.hero-vignette .q{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair);margin-bottom:4px}
.hero-vignette .p{font-family:var(--serif);font-size:19px}
.hero-vignette .p span{font-family:var(--sans);font-size:12px;color:var(--gris)}

/* ---------- Module de recherche (qualification) ---------- */
.recherche{
  background:var(--blanc);border-radius:var(--r-lg);box-shadow:var(--ombre-fort);
  margin-top:-46px;position:relative;z-index:20;overflow:hidden
}
.onglets{display:flex;border-bottom:1px solid var(--bord);background:var(--sable-2)}
.onglet{
  flex:1;padding:16px 20px;background:none;border:0;cursor:pointer;font-size:14.5px;font-weight:600;
  color:var(--gris);border-bottom:2.5px solid transparent;transition:all var(--t);
  display:flex;align-items:center;justify-content:center;gap:9px
}
.onglet[aria-selected="true"]{background:var(--blanc);color:var(--encre);border-bottom-color:var(--terre)}
.onglet small{display:block;font-weight:400;font-size:12px;color:var(--gris-clair)}
.panneau{padding:22px 24px 24px;display:none}
.panneau.actif{display:block}
.champs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end}
.champ label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:7px;font-weight:600}
.champ .box{display:flex;align-items:center;gap:9px;min-width:0;border:1px solid var(--bord);border-radius:var(--r);padding:11px 13px;background:var(--blanc);transition:border-color var(--t)}
.champ .box:focus-within{border-color:var(--terre)}
.champ .ico{color:var(--gris-clair);width:18px;height:18px}
.champ input,.champ select{border:0;outline:0;width:100%;min-width:0;background:none;font-size:15px}
.aide{font-size:12.5px;color:var(--gris-clair);margin-top:14px;display:flex;align-items:center;gap:7px}
.aide .ico{width:15px;height:15px}

/* ---------- Réassurance ---------- */
.reassurance{border-bottom:1px solid var(--bord)}
.reassurance ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:26px 0}
.reassurance li{display:flex;align-items:center;gap:12px;font-size:14.5px;color:var(--encre-2)}
.reassurance .ico{color:var(--terre);width:22px;height:22px}
.reassurance b{display:block;color:var(--encre);font-weight:600;font-size:14.5px}
.reassurance span{font-size:12.5px;color:var(--gris)}

/* ---------- Cartes logements ---------- */
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.carte{
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);display:flex;flex-direction:column
}
.carte:hover{transform:translateY(-5px);box-shadow:var(--ombre-fort);border-color:transparent}
.carte-photo{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sable-2)}
.carte-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.carte:hover .carte-photo img{transform:scale(1.05)}
.placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:#5F6B64;background:
    repeating-linear-gradient(-45deg,var(--sable-2) 0 12px,#E7E0D4 12px 24px)
}
.placeholder .ico{width:26px;height:26px;color:#5F6B64}
.placeholder span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.etiquette{
  position:absolute;top:14px;left:14px;background:rgba(23,32,28,.86);color:#fff;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:3px;font-weight:600;
  backdrop-filter:blur(4px)
}
.etiquette.dispo{background:rgba(30,111,78,.92)}
.carte-corps{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.carte-lieu{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gris);margin-bottom:8px}
.carte-lieu .ico{width:15px;height:15px;color:var(--terre)}
.carte h3{font-size:21px;margin-bottom:12px}
.carte-specs{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--gris);padding-bottom:16px;border-bottom:1px solid var(--bord);margin-bottom:16px}
.carte-specs div{display:flex;align-items:center;gap:6px}
.carte-specs .ico{width:16px;height:16px;color:var(--gris-clair)}
.carte-pied{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;gap:12px}
.prix small{display:block;font-size:11.5px;color:var(--gris-clair);letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
.prix b{font-family:var(--serif);font-size:24px;color:var(--encre);font-weight:400}
.prix span{font-size:13px;color:var(--gris)}
.lien-fleche{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--terre)}
.lien-fleche .ico{width:17px;height:17px;transition:transform var(--t)}
.carte:hover .lien-fleche .ico{transform:translateX(4px)}

/* ---------- Bloc durées ---------- */
.durees{background:var(--blanc);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--bord);border-radius:var(--r-lg);overflow:hidden}
.duo-col{padding:clamp(26px,3.5vw,40px)}
.duo-col+.duo-col{border-left:1px solid var(--bord);background:var(--vert);color:#D3DDD7}
.duo-col+.duo-col h3,.duo-col+.duo-col .prix b{color:#fff}
.duo-col+.duo-col .liste li{color:#C3CFC7}
.duo-col+.duo-col .liste .ico{color:var(--or)}
.liste{list-style:none;margin:18px 0 24px}
.liste li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;font-size:15px;color:var(--encre-2)}
.liste .ico{width:18px;height:18px;color:var(--terre);margin-top:3px}
.bareme{display:flex;gap:0;border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;margin:20px 0}
.bareme div{flex:1;padding:13px 10px;text-align:center;border-right:1px solid var(--bord)}
.bareme div:last-child{border-right:0}
.bareme .d{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:5px}
.bareme .v{font-family:var(--serif);font-size:19px;color:var(--encre)}
.bareme .v.remise{color:var(--terre)}
.duo-col+.duo-col .bareme{border-color:var(--bord-fonce)}
.duo-col+.duo-col .bareme div{border-color:var(--bord-fonce)}
.duo-col+.duo-col .bareme .d{color:#8FA79B}
.duo-col+.duo-col .bareme .v{color:#fff}
.duo-col+.duo-col .bareme .v.remise{color:var(--or)}

/* ---------- Quartiers ---------- */
.quartiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.quartier{
  border:1px solid var(--bord);border-radius:var(--r-lg);padding:22px;background:var(--blanc);
  transition:border-color var(--t),transform var(--t)
}
.quartier:hover{border-color:var(--terre);transform:translateY(-3px)}
.quartier h4{font-size:19px;margin-bottom:6px}
.quartier p{font-size:13.5px;color:var(--gris);margin-bottom:14px;line-height:1.55}
.quartier .n{font-size:12.5px;color:var(--terre);font-weight:600;display:flex;align-items:center;gap:6px}
.quartier.bientot{opacity:.62;background:transparent}
.quartier.bientot .n{color:var(--gris-clair)}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bord);border:1px solid var(--bord);border-radius:var(--r-lg);overflow:hidden}
.service{background:var(--sable);padding:26px 24px;transition:background var(--t)}
.service:hover{background:var(--blanc)}
.service .ico{color:var(--terre);width:24px;height:24px;margin-bottom:14px}
.service h4{font-size:17.5px;margin-bottom:7px}
.service p{font-size:14px;color:var(--gris);line-height:1.55}

/* ---------- Encart pack ---------- */
.pack{
  background:var(--vert);color:#D3DDD7;border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);
  display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:center;position:relative;overflow:hidden
}
.pack::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 90% 20%,rgba(201,162,39,.18),transparent 60%);pointer-events:none}
.pack h3{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.pack p{color:#B9C8C0;font-size:16px;max-width:52ch}
.pack-liste{list-style:none;position:relative;z-index:2}
.pack-liste li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--bord-fonce);font-size:14.5px;color:#D3DDD7}
.pack-liste li:last-child{border-bottom:0}
.pack-liste .ico{width:17px;height:17px;color:var(--or)}

/* ---------- Avis ---------- */
.avis{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);padding:26px}
.etoiles{display:flex;gap:3px;margin-bottom:14px}
.etoiles .ico{width:16px;height:16px;color:var(--or);fill:var(--or)}
.avis blockquote{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--encre);margin-bottom:18px}
.avis-auteur{display:flex;align-items:center;gap:11px;font-size:13.5px}
.pastille{width:36px;height:36px;border-radius:50%;background:var(--sable-2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--vert);font-size:15px}
.avis-auteur b{display:block;color:var(--encre);font-weight:600}
.avis-auteur span{color:var(--gris-clair);font-size:12.5px}

/* ---------- Bande propriétaires ---------- */
.proprios{
  border:1px dashed var(--bord);border-radius:var(--r-lg);padding:clamp(24px,3vw,34px);
  display:flex;align-items:center;gap:28px;justify-content:space-between;flex-wrap:wrap;background:var(--blanc)
}
.proprios h3{font-size:23px;margin-bottom:7px}
.proprios p{color:var(--gris);font-size:15px;max-width:62ch}

/* ---------- CTA final ---------- */
.cta-final{background:var(--encre);color:#CFD6D1;text-align:center;padding:clamp(56px,8vw,96px) 0}
.cta-final h2{color:#fff;font-size:clamp(28px,4.2vw,44px);margin-bottom:16px}
.cta-final p{color:#9AA79E;max-width:56ch;margin:0 auto 30px;font-size:17px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Pied ---------- */
.pied{background:var(--vert);color:#A9BAB1;padding:clamp(44px,6vw,72px) 0 26px;font-size:14.5px}
.pied-grille{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--bord-fonce)}
.pied h4{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);font-weight:600;margin-bottom:16px}
.pied ul{list-style:none}
.pied li{margin-bottom:9px}
.pied a:hover{color:#fff}
.pied .logo{color:#fff;margin-bottom:14px}
.pied .desc{max-width:34ch;line-height:1.6;color:#A9BAB1}
.pied-contact li{display:flex;gap:9px;align-items:flex-start}
.pied-contact .ico{width:16px;height:16px;color:var(--or);margin-top:4px}
.pied-bas{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:22px;font-size:13px;color:#A9BAB1}
.paiements{display:flex;gap:8px;align-items:center}
.paiements span{border:1px solid var(--bord-fonce);border-radius:3px;padding:4px 9px;font-size:11px;letter-spacing:.06em;color:#A9BAB1}

/* ---------- WhatsApp flottant ---------- */
/*
   Bouton WhatsApp flottant — pastille, pas pilule.
   Avec son libellé il faisait ~160 px de large et se posait sur la signature
   du pied de page. Une pastille de 54 px dit la même chose, occupe trois fois
   moins de place et reste une cible confortable au pouce (les 44 px
   recommandés sont largement dépassés).
*/
.sjn-flottants{
  position:fixed;right:20px;bottom:20px;z-index:80;
  display:grid;gap:12px;justify-items:center
}
.flottant{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;
  transition:transform var(--t),box-shadow var(--t)
}
.flottant .ico{width:26px;height:26px}
.flottant:hover{transform:translateY(-3px)}
.flottant--wa{background:#1E6F4E;box-shadow:0 10px 30px -8px rgba(30,111,78,.6)}
.flottant--wa:hover{box-shadow:0 14px 34px -8px rgba(30,111,78,.72)}
/* L'appel prend le terracotta de marque : deux verts empilés se
   confondraient, et l'œil doit distinguer les deux gestes d'un coup. */
.flottant--tel{background:var(--terre);box-shadow:0 10px 30px -8px rgba(172,85,51,.55)}
.flottant--tel:hover{box-shadow:0 14px 34px -8px rgba(172,85,51,.7)}
/*
   Le libellé reste dans la page pour les lecteurs d'écran : l'icône est en
   aria-hidden, sans lui le lien n'aurait plus de nom du tout. (L'ancienne
   règle mobile le masquait en display:none — le bouton devenait muet.)
*/
.flottant span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Place réservée sous le pied : la pastille ne doit rien recouvrir. */
/* Place réservée sous le pied : DEUX pastilles empilées (54+12+54) + 20 de marge. */
.pied{padding-bottom:172px}

/* =========================================================
   FICHE LOGEMENT
   ========================================================= */
/* Le fil d'Ariane vit desormais dans .sjn-fil, pose par header.php.
   L ancien .fil, recopie a la main dans deux gabarits, faisait doublon. */

.galerie{display:grid;grid-template-columns:2fr 1fr;gap:10px;border-radius:var(--r-lg);overflow:hidden;margin-bottom:34px}
.galerie-p{aspect-ratio:16/11;background:var(--sable-2);position:relative}
.galerie-p img{width:100%;height:100%;object-fit:cover}
.galerie-s{display:grid;grid-template-rows:1fr 1fr;gap:10px}
.galerie-s>div{background:var(--sable-2);overflow:hidden;position:relative}
.galerie-s img{width:100%;height:100%;object-fit:cover}
.galerie-plus{
  position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.94);color:var(--encre);
  border-radius:var(--r);padding:9px 15px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;
  box-shadow:var(--ombre)
}

.fiche>*{min-width:0}
.fiche{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,4vw,56px);align-items:start;padding-bottom:clamp(56px,8vw,96px)}
.fiche h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:12px;letter-spacing:-.015em}
.fiche-meta{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--gris);padding-bottom:24px;border-bottom:1px solid var(--bord);margin-bottom:28px}
.fiche-meta div{display:flex;align-items:center;gap:7px}
.fiche-meta .ico{width:17px;height:17px;color:var(--terre)}
.note{display:flex;align-items:center;gap:6px;color:var(--encre);font-weight:600}
.note .ico{color:var(--or);fill:var(--or)}

.bloc{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--bord)}
.bloc:last-child{border-bottom:0}
.bloc h3{font-size:22px;margin-bottom:14px}
.bloc p{color:var(--encre-2);margin-bottom:12px;line-height:1.7}

.equipements{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none}
.equipements li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--encre-2)}
.equipements .ico{width:18px;height:18px;color:var(--terre)}

.regles{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.regles li{display:flex;gap:11px;font-size:14.5px}
.regles .ico{width:18px;height:18px;color:var(--gris-clair);margin-top:3px}
.regles b{display:block;color:var(--encre);font-weight:600}
.regles span{color:var(--gris);font-size:13.5px}

/* Calendrier */
.calendrier{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);padding:20px}
.cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-tete b{font-family:var(--serif);font-size:17px;color:var(--encre);font-weight:400}
.cal-nav{display:flex;gap:6px}
.cal-nav button{background:none;border:1px solid var(--bord);border-radius:var(--r);padding:6px;cursor:pointer;display:flex}
.cal-nav button:hover{border-color:var(--encre)}
.cal-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-grille .j{font-size:11px;color:var(--gris-clair);padding:6px 0;text-transform:uppercase;letter-spacing:.04em}
.cal-grille .d{padding:9px 0;font-size:13.5px;border-radius:var(--r);color:var(--encre-2)}
.cal-grille .d.libre{background:#E8F0EA;color:#1E6F4E;font-weight:600}
.cal-grille .d.pris{background:var(--sable-2);color:var(--gris-clair);text-decoration:line-through}
.cal-grille .d.vide{opacity:0}
.cal-legende{display:flex;gap:18px;margin-top:14px;font-size:12.5px;color:var(--gris)}
.cal-legende i{width:11px;height:11px;border-radius:2px;display:inline-block;margin-right:6px}

/* Panneau de réservation */
.reserver{
  position:sticky;top:96px;background:var(--blanc);border:1px solid var(--bord);
  border-radius:var(--r-lg);box-shadow:var(--ombre);overflow:hidden
}
.reserver-tete{padding:22px 24px 18px;border-bottom:1px solid var(--bord)}
.reserver-prix{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.reserver-prix b{font-family:var(--serif);font-size:30px;color:var(--encre);font-weight:400}
.reserver-prix span{color:var(--gris);font-size:14.5px}
.reserver-tete small{font-size:12.5px;color:var(--gris-clair)}
.reserver-corps{padding:20px 24px 24px}
.duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.recap{list-style:none;margin:18px 0;padding-top:18px;border-top:1px solid var(--bord)}
.recap li{display:flex;justify-content:space-between;font-size:14.5px;margin-bottom:10px;color:var(--encre-2)}
.recap li.total{border-top:1px solid var(--bord);padding-top:13px;margin-top:13px;font-size:17px;color:var(--encre);font-weight:600}
.recap li.total b{font-family:var(--serif);font-weight:400;font-size:21px}
.recap li.remise{color:#1E6F4E}
.reserver-pied{padding:0 24px 22px;text-align:center;font-size:12.5px;color:var(--gris-clair)}
.ou{display:flex;align-items:center;gap:12px;margin:14px 0;color:var(--gris-clair);font-size:12.5px}
.ou::before,.ou::after{content:"";flex:1;height:1px;background:var(--bord)}

/* ---------- Reveal ---------- */
/* le contenu reste visible si le JS ne se charge pas */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.js .reveal.vu{opacity:1;transform:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:36px}
  .hero-visuel{max-width:440px}
  .hero-vignette{left:auto;right:12px;bottom:12px}
  .fiche{grid-template-columns:1fr}
  .reserver{position:static}
  .quartiers{grid-template-columns:repeat(2,1fr)}
  .services{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .entete-actions .lang{display:none}
  .grille-3{grid-template-columns:1fr 1fr}
  .champs{grid-template-columns:1fr 1fr}
  .reassurance ul{grid-template-columns:1fr 1fr;gap:18px}
  .pied-grille{grid-template-columns:1fr 1fr;gap:28px}
  .duo{grid-template-columns:1fr}
  .duo-col+.duo-col{border-left:0;border-top:1px solid var(--bord)}
  .pack{grid-template-columns:1fr;gap:24px}
  .equipements{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:1fr}
  .galerie-s{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .galerie-s>div{aspect-ratio:3/2}
}
@media (max-width:620px){
  .grille-3,.grille-2,.quartiers,.services,.equipements,.regles{grid-template-columns:1fr}
  .champs{grid-template-columns:1fr}
  .recherche{margin-top:-28px}
  .duo-champ{grid-template-columns:1fr}
  .onglet{flex-direction:column;gap:2px;padding:13px 10px;font-size:13.5px}
  .onglet .ico{display:none}
  .hero-preuves{gap:14px 20px}
  .proprios{flex-direction:column;align-items:flex-start;gap:18px}
  .btn{width:100%}
  .hero-actions .btn{width:auto;flex:1}
  /* La pastille est déjà ronde et compacte partout : plus rien à corriger ici. */
  .sjn-flottants{right:16px;bottom:16px;gap:10px}
  .flottant{width:50px;height:50px}
  .flottant .ico{width:24px;height:24px}
  .pied-grille{grid-template-columns:1fr}
  .fiche-meta{gap:12px 18px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

@media print{
  .bandeau,.entete{position:static}
  /* Des raccourcis d'appel n'ont aucun sens sur une feuille de papier. */
  .sjn-flottants{display:none}
}

/* =========================================================
   INTÉGRATION WORDPRESS
   Ajouts nécessaires au fonctionnement dans WordPress :
   menus générés, contenu de l'éditeur, barre d'administration.
   ========================================================= */

/* ---------- Menu généré par WordPress ---------- */
.nav ul{display:contents}
.nav li{list-style:none;margin:0;padding:0}
.nav li::before{display:none}
.nav .current-menu-item > a{color:var(--encre)}
.nav .current-menu-item > a::after{width:100%}

.pied ul li::before{display:none}
.pied li{padding-left:0}

/* ---------- Lien d'évitement (accessibilité) ---------- */
.sr-focus{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--encre);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) 0;
  font-size:14px;font-weight:600
}
.sr-focus:focus{left:0}

/* ---------- Barre d'administration ---------- */
.admin-bar .entete{top:32px}
@media screen and (max-width:782px){ .admin-bar .entete{top:46px} }

/* ---------- Contenu de l'éditeur ---------- */
.contenu-riche{max-width:76ch;font-size:16.5px;line-height:1.75}
.contenu-riche > * + *{margin-top:18px}
.contenu-riche h2{font-size:clamp(23px,2.8vw,31px);margin-top:40px}
.contenu-riche h3{font-size:clamp(19px,2.2vw,24px);margin-top:32px}
.contenu-riche p{margin-bottom:0}
.contenu-riche a{color:var(--terre);text-decoration:underline;text-underline-offset:3px}
.contenu-riche a:hover{color:var(--terre-2)}
.contenu-riche ul,.contenu-riche ol{padding-left:0;margin-left:0}
.contenu-riche ul li{padding-left:22px;position:relative;margin-bottom:9px}
.contenu-riche ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;background:var(--terre)}
.contenu-riche ol{list-style:decimal;padding-left:22px}
.contenu-riche ol li{padding-left:4px;margin-bottom:9px}
.contenu-riche ol li::before{display:none}
.contenu-riche blockquote{
  border-left:3px solid var(--terre);padding:4px 0 4px 22px;margin:26px 0;
  font-family:var(--serif);font-size:19px;color:var(--encre)
}
.contenu-riche img{border-radius:var(--r-lg)}
.contenu-riche figure{margin:26px 0}
.contenu-riche figcaption{font-size:13.5px;color:var(--gris);margin-top:9px;text-align:center}
.contenu-riche table{width:100%;border-collapse:collapse;font-size:15px}
.contenu-riche th{text-align:left;border-bottom:2px solid var(--encre);padding:10px 12px 10px 0}
.contenu-riche td{border-bottom:1px solid var(--bord);padding:10px 12px 10px 0}
.contenu-riche hr{border:0;border-top:1px solid var(--bord);margin:34px 0}

/* Alignements natifs de l'éditeur */
.alignleft{float:left;margin:6px 24px 18px 0}
.alignright{float:right;margin:6px 0 18px 24px}
.aligncenter{margin-inline:auto;display:block}
.alignwide,.alignfull{max-width:none}

/* ---------- Pagination ---------- */
.wp-block-query-pagination,.navigation.pagination{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.navigation.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  padding:0 12px;border:1px solid var(--bord);border-radius:var(--r);background:var(--blanc);
  font-size:14.5px;font-weight:600;transition:border-color var(--t),color var(--t)
}
.navigation.pagination .page-numbers:hover{border-color:var(--encre)}
.navigation.pagination .page-numbers.current{background:var(--encre);color:#fff;border-color:var(--encre)}
.navigation.pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Menu mobile ouvert ---------- */
@media (max-width:900px){
  .nav.ouvert{
    display:flex;position:absolute;top:100%;left:0;right:0;background:var(--sable);
    flex-direction:column;gap:0;padding:8px 20px 18px;
    border-bottom:1px solid var(--bord);box-shadow:var(--ombre)
  }
  .nav.ouvert a{padding:13px 0;border-bottom:1px solid var(--bord)}
  .nav.ouvert a::after{display:none}
}

/* =========================================================
   B3 — PLAN INTERACTIF ET FILTRES
   Leaflet impose ses propres classes (.leaflet-*) : on ne les
   surcharge que là où c'est nécessaire, jamais globalement.
   ========================================================= */

.sjn-plan{margin-bottom:40px}

/* ---------- Barre de filtres ---------- */
.sjn-filtres{
  display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);
  padding:18px 20px;margin-bottom:14px
}
.sjn-filtre{flex:1;min-width:180px}
.sjn-filtre label{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-bottom:7px;font-weight:600
}
.sjn-filtre .box{
  display:flex;align-items:center;gap:9px;min-width:0;
  border:1px solid var(--bord);border-radius:var(--r);padding:11px 13px;background:var(--blanc);
  transition:border-color var(--t)
}
.sjn-filtre .box:focus-within{border-color:var(--terre)}
.sjn-filtre .box .ico{color:var(--gris-clair);width:18px;height:18px}
.sjn-filtre select{border:0;outline:0;width:100%;min-width:0;background:none;font-size:15px;cursor:pointer}
.sjn-filtre--budget output{
  font-family:var(--serif);font-size:14px;color:var(--encre);
  text-transform:none;letter-spacing:0;font-weight:400
}

/* Curseur de budget — même rendu sur les moteurs WebKit et Gecko. */
.sjn-filtre input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:var(--bord);outline:0;margin:14px 0 6px;cursor:pointer
}
.sjn-filtre input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--terre);border:3px solid var(--blanc);
  box-shadow:0 1px 5px rgba(23,32,28,.35);cursor:grab
}
.sjn-filtre input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--terre);
  border:3px solid var(--blanc);box-shadow:0 1px 5px rgba(23,32,28,.35);cursor:grab
}
.sjn-filtre input[type=range]:focus-visible{outline:2px solid var(--terre);outline-offset:4px}

.sjn-reinit{align-self:center}

/* ---------- Puces d'équipement ---------- */
.sjn-equipements{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sjn-puce{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid var(--bord);border-radius:40px;
  background:var(--blanc);color:var(--encre-2);font-size:13.5px;cursor:pointer;
  transition:border-color var(--t),background var(--t),color var(--t)
}
.sjn-puce .ico{width:15px;height:15px;color:var(--gris-clair);transition:color var(--t)}
.sjn-puce:hover{border-color:var(--encre)}
.sjn-puce[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:#fff}
.sjn-puce[aria-pressed="true"] .ico{color:var(--or)}

/* ---------- Carte ---------- */
.sjn-plan-carte{
  height:clamp(300px,46vh,480px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--bord);background:var(--sable-2);z-index:1
}
.sjn-plan-compte{
  margin-top:10px;font-size:13.5px;color:var(--gris);
  display:flex;align-items:center;gap:8px
}

/* Marqueur : pastille de prix, pas d'image à charger. */
.sjn-pin{background:none;border:0}
.sjn-pin-prix{
  display:inline-block;white-space:nowrap;transform:translate(-50%,-100%);
  background:var(--terre);color:#fff;font-size:12.5px;font-weight:700;
  padding:6px 11px;border-radius:40px;border:2px solid var(--blanc);
  box-shadow:0 3px 10px rgba(23,32,28,.35);
  transition:background .2s ease,transform .2s ease
}
.sjn-pin--attente .sjn-pin-prix{background:var(--gris)}
.sjn-pin--actif .sjn-pin-prix{
  background:var(--vert);transform:translate(-50%,-100%) scale(1.12);z-index:600
}
.sjn-pin:hover .sjn-pin-prix{background:var(--vert)}

/* Bulle d'information */
.leaflet-popup-content-wrapper{border-radius:var(--r-lg);padding:0;overflow:hidden;box-shadow:var(--ombre-fort)}
.leaflet-popup-content{margin:0;width:230px!important;font-family:var(--sans)}
.leaflet-container{font:inherit}
.leaflet-container a.leaflet-popup-close-button{color:var(--blanc);top:8px;right:8px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sjn-popup img{width:100%;height:120px;object-fit:cover;display:block}
.sjn-popup-corps{padding:13px 15px 15px;display:flex;flex-direction:column;gap:5px}
.sjn-popup-lieu{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--terre);font-weight:700}
.sjn-popup-corps strong{font-family:var(--serif);font-size:17px;font-weight:400;color:var(--encre);line-height:1.2}
.sjn-popup-meta{font-size:12.5px;color:var(--gris)}
.sjn-popup-prix{font-family:var(--serif);font-size:16px;color:var(--encre);margin-top:2px}
.sjn-popup-prix small{font-family:var(--sans);font-size:11.5px;color:var(--gris)}
.sjn-popup-corps .btn{margin-top:8px;width:100%}

/* Une vignette masquée par les filtres ne doit pas laisser de trou dans la grille. */
.grille-3 [data-logement][hidden]{display:none}

@media (max-width:860px){
  .sjn-filtres{padding:16px;gap:12px}
  .sjn-filtre{min-width:100%}
  .sjn-reinit{width:100%}
  .sjn-plan-carte{height:300px}
}

@media (prefers-reduced-motion:reduce){
  .sjn-pin-prix{transition:none}
}

/* =========================================================
   B4 — FORMULAIRE DE DEMANDE DE RÉSERVATION
   ========================================================= */

.sjn-form-reservation{display:flex;flex-direction:column;gap:12px}
.sjn-form-reservation .champ label{
  display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-bottom:7px;font-weight:600
}
.sjn-form-reservation .box{
  display:flex;align-items:center;gap:9px;min-width:0;
  border:1px solid var(--bord);border-radius:var(--r);padding:11px 13px;background:var(--blanc);
  transition:border-color var(--t)
}
.sjn-form-reservation .box:focus-within{border-color:var(--terre)}
.sjn-form-reservation .box .ico{color:var(--gris-clair);width:18px;height:18px;align-self:flex-start;margin-top:2px}
.sjn-form-reservation input,
.sjn-form-reservation select,
.sjn-form-reservation textarea{
  border:0;outline:0;width:100%;min-width:0;background:none;font-size:15px;resize:vertical
}
.sjn-form-reservation textarea{line-height:1.5}
.sjn-form-reservation .duo-champ{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sjn-form-reservation .recap{margin:4px 0 0}
.sjn-form-reservation button[type=submit]{margin-top:4px}

/* Champ leurre anti-robot : retiré de l'affichage sans display:none,
   que certains robots savent justement détecter. */
.sjn-leurre{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.sjn-euros{text-align:right;font-size:12.5px;color:var(--gris-clair);margin:-6px 0 0}
.sjn-mention{font-size:12px;color:var(--gris-clair);text-align:center;line-height:1.45;margin:2px 0 0}

/* Message de retour après envoi */
.sjn-retour{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border-radius:var(--r);font-size:13.8px;line-height:1.45;margin-bottom:14px
}
.sjn-retour .ico{width:18px;height:18px;flex:none;margin-top:1px}
.sjn-retour--succes{background:#E8F0EA;color:#1E6F4E;border:1px solid #C9DED1}
.sjn-retour--erreur{background:#F9EDE9;color:#8E3423;border:1px solid #EFD5CD}

@media (max-width:620px){
  .sjn-form-reservation .duo-champ{grid-template-columns:1fr}
}

/* Champs de date dans le panneau latéral : le navigateur affiche déjà son
   propre icône de calendrier. La nôtre en double serrait le champ au point
   de faire déborder celui de droite. */
.reserver .sjn-form-reservation .duo-champ .box{padding:9px 10px;gap:0}
.reserver .sjn-form-reservation .duo-champ .box .ico{display:none}
.reserver .sjn-form-reservation .duo-champ input[type=date]{font-size:14px}

/* `display:flex` sur .recap li l'emporte sur le display:none que le navigateur
   applique à [hidden] : sans cette règle, la ligne de remise reste affichée
   à « 0 % » même quand aucune remise ne s'applique. */
.recap li[hidden]{display:none}

/* =========================================================
   B5 — CONFIGURATEUR DE SÉJOUR
   ========================================================= */

.sjn-conf-section{background:var(--blanc);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord)}
.sjn-conf{
  max-width:840px;margin:0 auto;background:var(--sable);
  border:1px solid var(--bord);border-radius:var(--r-lg);padding:clamp(22px,3.5vw,38px)
}

.sjn-conf-barre{height:3px;background:var(--bord);border-radius:2px;overflow:hidden;margin-bottom:18px}
.sjn-conf-jauge{display:block;height:100%;width:0;background:var(--terre);transition:width .4s cubic-bezier(.4,0,.2,1)}
.sjn-conf-etape{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair);margin-bottom:10px;font-weight:600}

.sjn-conf-q{border:0;padding:0;margin:0}
.sjn-conf-q legend{
  font-family:var(--serif);font-size:clamp(20px,2.6vw,26px);color:var(--encre);
  line-height:1.25;margin-bottom:20px;padding:0
}
.sjn-conf-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.sjn-conf-btn{
  display:flex;flex-direction:column;gap:4px;text-align:left;
  padding:18px 20px;background:var(--blanc);border:1px solid var(--bord);
  border-radius:var(--r);cursor:pointer;transition:border-color var(--t),transform var(--t),box-shadow var(--t)
}
.sjn-conf-btn strong{font-size:16px;color:var(--encre);font-weight:600}
.sjn-conf-btn span{font-size:13px;color:var(--gris);line-height:1.4}
.sjn-conf-btn:hover{border-color:var(--terre);transform:translateY(-2px);box-shadow:var(--ombre)}
.sjn-conf-btn--choisi{border-color:var(--vert);background:var(--vert);}
.sjn-conf-btn--choisi strong{color:#fff}
.sjn-conf-btn--choisi span{color:#B9C8C0}

.sjn-conf-resultat h3{margin-bottom:18px}
.sjn-conf-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.sjn-conf-liste .carte-photo{aspect-ratio:16/10}
.sjn-conf-liste .carte h3{font-size:18px}
.sjn-conf-vide{color:var(--gris);font-size:15px;line-height:1.6}
.sjn-conf-note{
  grid-column:1/-1;margin:4px 0 0;padding:12px 15px;background:#F0F6F2;
  border-left:3px solid var(--vert);font-size:14px;color:var(--encre-2)
}
.sjn-conf-note a{color:var(--terre);font-weight:600;text-decoration:underline}
.sjn-conf-suite{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

@media (max-width:620px){
  .sjn-conf-choix{grid-template-columns:1fr}
  .sjn-conf-btn{padding:15px 16px}
  .sjn-conf-suite .btn{width:100%}
}

/* =========================================================
   B6 — ESPACE CLIENT ET CARNET D'ADRESSES
   ========================================================= */

.sjn-esp-infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px;
  background:var(--bord);border:1px solid var(--bord);border-radius:var(--r-lg);overflow:hidden}
.sjn-esp-info{display:flex;gap:14px;padding:22px 24px;background:var(--blanc)}
.sjn-esp-info .ico{width:22px;height:22px;color:var(--terre);flex:none;margin-top:2px}
.sjn-esp-info h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);margin-bottom:6px;font-weight:700}
.sjn-esp-info p{font-size:15.5px;color:var(--encre);line-height:1.55;margin:0}

.sjn-carnet-groupe{margin-bottom:34px}
.sjn-carnet-titre{display:flex;align-items:center;gap:10px;font-size:20px;margin-bottom:16px;
  padding-bottom:10px;border-bottom:1px solid var(--bord)}
.sjn-carnet-titre .ico{width:20px;height:20px;color:var(--terre)}
.sjn-carnet-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.sjn-carnet-fiche{border:1px solid var(--bord);border-radius:var(--r-lg);padding:18px 20px;background:var(--sable)}
.sjn-carnet-fiche h4{font-size:17px;margin-bottom:5px}
.sjn-carnet-meta{font-size:12.5px;color:var(--gris-clair);margin-bottom:8px}
.sjn-carnet-note{font-size:14px;color:var(--encre-2);line-height:1.5;margin-bottom:14px;font-style:italic}
.sjn-carnet-actions{display:flex;gap:8px;flex-wrap:wrap}
.sjn-carnet-actions .btn{padding:8px 13px;font-size:13px}

@media (max-width:620px){
  .sjn-esp-info{padding:18px 18px}
  .sjn-carnet-actions .btn{width:100%}
}

/* Un bouton reste un bouton, même à l'intérieur du contenu d'une page :
   sans cela, les styles de lien éditorial le soulignaient et le recoloraient. */
.entry-content .btn,
.page .btn,
.sjn-carnet-actions .btn,
.sjn-esp-infos a{text-decoration:none}
.entry-content .btn-wa,
.page .btn-wa{color:#fff}
.entry-content .btn-2,
.page .btn-2{color:var(--encre)}
.entry-content .btn-1,
.page .btn-1{color:#fff}

/* Titre de page masqué (espace client) : on retire aussi l'espace qu'il laissait. */
.entry-title:empty,
.page-titre:empty{display:none}
.sjn-espace-page .section:first-of-type{padding-top:clamp(28px,3.5vw,44px)}

/* =========================================================
   B7 — RÈGLEMENT DANS L'ESPACE CLIENT
   ========================================================= */
.sjn-reglement{margin-top:26px;background:var(--blanc);border:1px solid var(--bord);
  border-radius:var(--r-lg);padding:22px 24px}
.sjn-reglement-compte{display:flex;flex-wrap:wrap;gap:12px 34px;padding-bottom:16px;
  border-bottom:1px solid var(--bord);margin-bottom:18px}
.sjn-reglement-compte div{display:flex;flex-direction:column;gap:3px}
.sjn-reglement-compte span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600}
.sjn-reglement-compte b{font-family:var(--serif);font-size:21px;color:var(--encre);font-weight:400}
.sjn-reglement-compte .regle b{color:#1E6F4E}
.sjn-reglement-compte .restant b{color:var(--terre)}
.sjn-reglement-actions{display:flex;gap:10px;flex-wrap:wrap}
.sjn-reglement-actions form{margin:0}
@media (max-width:620px){
  .sjn-reglement-actions{flex-direction:column}
  .sjn-reglement-actions form,.sjn-reglement-actions .btn{width:100%}
}

/* =========================================================
   B8 — DÉPÔT D'UN BIEN PAR UN PROPRIÉTAIRE
   ========================================================= */
.sjn-etapes-proprio{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:30px}
.sjn-etapes-proprio div{display:flex;gap:11px;align-items:flex-start;padding:15px 16px;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg)}
.sjn-etapes-proprio b{flex:none;width:26px;height:26px;border-radius:50%;background:var(--vert);
  color:var(--or);font-family:var(--serif);font-size:14px;display:flex;align-items:center;justify-content:center}
.sjn-etapes-proprio span{font-size:13.5px;color:var(--encre-2);line-height:1.4}

.sjn-form-proprio{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);
  padding:clamp(20px,3vw,32px)}
.sjn-form-titre{font-size:19px;margin:6px 0 16px;padding-bottom:9px;border-bottom:1px solid var(--bord)}
.sjn-form-titre:first-child{margin-top:0}
.sjn-grille-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:22px}
.champ--large{grid-column:1/-1}
.sjn-form-proprio .champ label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);margin-bottom:7px;font-weight:600}
.sjn-form-proprio .box{display:flex;align-items:center;gap:9px;min-width:0;border:1px solid var(--bord);
  border-radius:var(--r);padding:11px 13px;background:var(--blanc);transition:border-color var(--t)}
.sjn-form-proprio .box:focus-within{border-color:var(--terre)}
.sjn-form-proprio .box .ico{color:var(--gris-clair);width:18px;height:18px;flex:none}
.sjn-form-proprio input,.sjn-form-proprio select,.sjn-form-proprio textarea{
  border:0;outline:0;width:100%;min-width:0;background:none;font-size:15px;resize:vertical}
.sjn-form-proprio input[type=file]{font-size:14px;padding:2px 0}
.sjn-form-proprio .champ{margin-bottom:14px}
.sjn-form-proprio button[type=submit]{margin-top:6px}

@media (max-width:620px){
  .sjn-grille-champs{grid-template-columns:1fr}
  .sjn-form-proprio button[type=submit]{width:100%}
}

/* =========================================================
   B9 — PAGES ÉDITORIALES
   ========================================================= */

/* Bandeau court : même identité que la page d'accueil, sans la photo. */
.hero--court{padding:clamp(30px,5vw,56px) 0 clamp(26px,4vw,46px)}
.hero-in--simple{grid-template-columns:1fr;max-width:820px;padding:0}
.hero--court h1{font-size:clamp(30px,4.6vw,50px);margin-bottom:16px}
.hero--court .intro{margin-bottom:0}
.hero--court .hero-preuves{margin-top:24px}

.bareme--large{max-width:820px;margin-inline:auto}
.bareme--large .d{font-size:11.5px}
.bareme--large .v{font-size:22px}

/* ---------- Quartiers ---------- */
.sjn-quartiers-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.sjn-quartier-fiche{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);
  padding:24px 26px;display:flex;flex-direction:column;transition:border-color var(--t),transform var(--t)}
.sjn-quartier-fiche:hover{border-color:var(--terre);transform:translateY(-3px)}
.sjn-quartier-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.sjn-quartier-tete h2{font-size:23px;margin:0}
.sjn-quartier-compte{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--terre);
  font-weight:700;white-space:nowrap}
.sjn-quartier-texte{font-size:15px;color:var(--gris);line-height:1.6;margin-bottom:16px;flex:1}
.sjn-quartier-texte--vide{font-style:italic;color:var(--gris-clair);font-size:13.5px}
.sjn-quartier-bientot{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--gris-clair)}
.sjn-quartier-bientot .ico{width:16px;height:16px}

/* ---------- Services à la demande ---------- */
.sjn-services-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2px;
  background:var(--bord);border:1px solid var(--bord);border-radius:var(--r-lg);overflow:hidden}
.sjn-service-ligne{display:flex;gap:14px;padding:20px 22px;background:var(--blanc)}
.sjn-service-ligne .ico{width:22px;height:22px;color:var(--terre);flex:none;margin-top:2px}
.sjn-service-ligne b{display:block;font-size:16px;color:var(--encre);margin-bottom:4px}
.sjn-service-ligne span{font-size:14px;color:var(--gris);line-height:1.55}

/* ---------- Contact ---------- */
.sjn-contact{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.sjn-contact-canaux{display:flex;flex-direction:column;gap:12px}
.sjn-canal{display:flex;gap:14px;align-items:center;padding:18px 20px;background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--r-lg);transition:border-color var(--t),transform var(--t)}
.sjn-canal:hover{border-color:var(--terre);transform:translateY(-2px)}
.sjn-canal .ico{color:var(--terre);flex:none}
.sjn-canal b{display:block;font-size:16px;color:var(--encre);margin-bottom:2px}
.sjn-canal span{font-size:13.5px;color:var(--gris);line-height:1.45}
.sjn-canal--wa{background:var(--vert);border-color:var(--vert)}
.sjn-canal--wa .ico{color:var(--or)}
.sjn-canal--wa b{color:#fff}
.sjn-canal--wa span{color:#B9C8C0}
.sjn-canal--statique{cursor:default}
.sjn-canal--statique:hover{border-color:var(--bord);transform:none}
.sjn-contact-raccourcis{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.sjn-contact-raccourcis a{display:flex;gap:9px;align-items:center;font-size:14px;color:var(--encre-2);
  padding:11px 14px;border:1px dashed var(--bord);border-radius:var(--r);transition:border-color var(--t)}
.sjn-contact-raccourcis a:hover{border-color:var(--terre);color:var(--encre)}
.sjn-contact-raccourcis .ico{width:17px;height:17px;color:var(--terre);flex:none}

@media (max-width:900px){
  .sjn-contact{grid-template-columns:1fr}
}

/* =========================================================
   SIGNATURE MATRIX DIGITAL
   ========================================================= */
.sjn-signature{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:#A9BAB1}
.sjn-signature .ico{width:13px;height:13px;color:var(--terre)}
.sjn-signature a{display:inline-flex;align-items:baseline;gap:3px;color:#A9BAB1;font-weight:600;
  transition:color var(--t)}
.sjn-signature a:hover{color:#fff}
.sjn-signature a span{color:var(--or)}
.sjn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================
   EFFET MACHINE À ÉCRIRE (accroche de la hero)
   Seul le segment doré change : le titre reste lisible en permanence.
   ========================================================= */
.sjn-tw{position:relative;display:block}
.sjn-tw-ghost{visibility:hidden}
.sjn-tw-live{position:absolute;left:0;top:0;right:0}
.sjn-tw-cursor{display:inline-block;width:3px;height:.82em;background:var(--or);
  vertical-align:baseline;margin-left:4px;border-radius:1px;
  animation:sjnClignote .7s step-end infinite}
@keyframes sjnClignote{0%,100%{opacity:1}50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .sjn-tw-cursor{display:none}
}

/* =========================================================
   EFFET MACHINE À ÉCRIRE (titre du bandeau haut)
   Le fantôme réserve la place exacte du titre final : la page
   ne saute pas d'un pixel pendant la frappe.
   ========================================================= */
.sjn-tw{position:relative}
.sjn-tw-fantome{visibility:hidden}
.sjn-tw-vivant{position:absolute;inset:0}
.sjn-tw-vivant::after{
  content:'';display:inline-block;width:.06em;height:.82em;
  background:var(--or);margin-left:.06em;vertical-align:-.08em;
  animation:sjn-clignote 1s steps(2,start) infinite
}
.sjn-tw-sans-curseur::after{display:none}
@keyframes sjn-clignote{to{visibility:hidden}}

@media (prefers-reduced-motion:reduce){
  .sjn-tw-fantome{visibility:visible}
  .sjn-tw-vivant{display:none}
}

/* Zone approximative : le logement est situé « quelque part ici », sans plus. */
.sjn-zone{transition:fill-opacity .2s ease,stroke-width .2s ease}
.sjn-popup-zone{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--bord);
  font-size:11.5px;color:var(--gris);line-height:1.4}

/* =========================================================
   VISIONNEUSE PLEIN ÉCRAN
   ========================================================= */
.sjn-photo-cachee{display:none}
body.sjn-vis-ouverte{overflow:hidden}

.sjn-vis{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(10,16,13,.94);padding:clamp(12px,4vw,48px);
  animation:sjn-vis-entree .18s ease-out
}
.sjn-vis[hidden]{display:none}
@keyframes sjn-vis-entree{from{opacity:0}to{opacity:1}}

.sjn-vis-scene{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px}
.sjn-vis-scene img{max-width:100%;max-height:82vh;width:auto;height:auto;
  border-radius:var(--r-lg);box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.sjn-vis-compte{font-size:13px;color:#9AA79E;letter-spacing:.08em}

.sjn-vis button{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:26px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease
}
.sjn-vis button:hover{background:rgba(255,255,255,.22);transform:scale(1.06)}
.sjn-vis button:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.sjn-vis-fermer{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);font-size:30px}
.sjn-vis-prec{left:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.sjn-vis-suiv{right:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.sjn-vis-prec:hover,.sjn-vis-suiv:hover{transform:translateY(-50%) scale(1.06)}

@media (max-width:620px){
  .sjn-vis-prec,.sjn-vis-suiv{width:40px;height:40px;font-size:22px}
  .sjn-vis-scene img{max-height:70vh}
}
@media (prefers-reduced-motion:reduce){
  .sjn-vis{animation:none}
  .sjn-vis button{transition:none}
}

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible,.sjn-puce:focus-visible,.sjn-conf-btn:focus-visible,
.carte:focus-visible,.sjn-canal:focus-visible{outline:2px solid var(--terre);outline-offset:3px}
.box:focus-within{box-shadow:0 0 0 3px rgba(194,96,58,.1)}

.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.btn[aria-busy="true"]::after{
  content:'';width:14px;height:14px;margin-left:8px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:sjn-tourne .7s linear infinite
}
@keyframes sjn-tourne{to{transform:rotate(360deg)}}

.nav a[aria-current="page"]{color:var(--encre)}
.nav a[aria-current="page"]::after{width:100%}
.carte:active{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .btn:active,.carte:active{transform:none}
  .btn[aria-busy="true"]::after{animation:none}
}

/* Bascule Liste / Carte (reprise de N2M Habitat) */
.sjn-vues{display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg)}
.sjn-vues[hidden]{display:none}
.sjn-vue{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 20px;
  border:0;border-radius:var(--r);background:none;color:var(--encre);
  font-size:14.5px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}
.sjn-vue .ico{width:17px;height:17px;color:var(--gris-clair);transition:color .2s ease}
.sjn-vue:hover{background:var(--sable-2)}
.sjn-vue[aria-pressed="true"]{background:var(--vert);color:#fff}
.sjn-vue[aria-pressed="true"] .ico{color:var(--or)}
.sjn-plan-corps[hidden]{display:none}
.sjn-plan-corps .sjn-plan-carte{height:clamp(420px,62vh,640px)}

@media (max-width:620px){
  .sjn-vues{display:flex;width:100%}
  .sjn-vue{flex:1;justify-content:center;padding:0 12px}
  .sjn-plan-corps .sjn-plan-carte{height:60vh}
}

/* =========================================================
   PAGES ÉDITORIALES — fil d'Ariane, quartiers, FAQ, à propos,
   diaspora. Ajoutées avec le module de référencement.
   ========================================================= */

/* ---------- Fil d'Ariane ---------- */
.sjn-fil{background:var(--sable-2);border-bottom:1px solid var(--bord);font-size:13px}
.sjn-fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:11px 0;margin:0}
.sjn-fil li{display:flex;align-items:center;gap:6px;color:var(--gris)}
.sjn-fil a{color:var(--gris);transition:color var(--t)}
.sjn-fil a:hover{color:var(--vert-2);text-decoration:underline;text-underline-offset:3px}
.sjn-fil [aria-current]{color:var(--encre);font-weight:600}
.sjn-fil .ico{width:13px;height:13px;opacity:.45;stroke-width:2.4}
/* Le fil d'un logement peut être long : sur mobile il défile plutôt qu'il ne s'empile. */
@media(max-width:640px){
  .sjn-fil ol{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sjn-fil ol::-webkit-scrollbar{display:none}
  .sjn-fil li{white-space:nowrap}
  /*
     Le dernier maillon porte le titre de la page : sur un article, il peut
     faire soixante caractères. On le tronque plutôt que d'obliger à faire
     défiler pour lire le nom de la page où l'on se trouve DÉJÀ — les maillons
     utiles, ceux qui remontent, restent lisibles sans geste.
  */
  .sjn-fil li:last-child span{
    display:block;max-width:52vw;overflow:hidden;text-overflow:ellipsis
  }
}

/* ---------- Rythme complémentaire ---------- */
.section--serree{padding:clamp(34px,4vw,52px) 0}
.section--sombre{background:var(--vert);color:#C3CFC7}
.section--sombre h2,.section--sombre h3{color:#fff}
.section--sombre .chapo{color:#9FB3A8}
.titre-mini{
  font-family:var(--serif);font-size:clamp(19px,2vw,23px);color:var(--encre);
  margin-bottom:16px;display:flex;align-items:center;gap:10px;line-height:1.25
}
.titre-mini .ico{color:var(--terre);width:22px;height:22px}
.section--sombre .titre-mini{color:#fff}
.hero--court .intro+.hero-actions{margin-top:24px}

/* ---------- Étapes numérotées ---------- */
.sjn-etapes{
  list-style:none;display:grid;gap:22px;counter-reset:etape;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))
}
.sjn-etapes li{
  position:relative;padding:26px 22px 24px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);border:1px solid var(--bord-fonce)
}
.sjn-etapes .ico{color:var(--or);margin-bottom:12px}
.sjn-etapes h3{font-size:19px;margin-bottom:8px;color:#fff}
.sjn-etapes p{color:#9FB3A8;font-size:14.5px;line-height:1.6}
.sjn-etape-num{
  position:absolute;top:18px;right:20px;font-family:var(--serif);
  font-size:30px;color:rgba(201,162,39,.28);line-height:1
}
/* Hors bande sombre : mêmes cartes, en clair. */
.section:not(.section--sombre) .sjn-etapes li{background:var(--blanc);border-color:var(--bord);box-shadow:var(--ombre)}
.section:not(.section--sombre) .sjn-etapes h3{color:var(--encre)}
.section:not(.section--sombre) .sjn-etapes p{color:var(--gris)}
.section:not(.section--sombre) .sjn-etapes .ico{color:var(--terre)}
.section:not(.section--sombre) .sjn-etape-num{color:var(--sable-2)}

/* ---------- Deux colonnes de texte ---------- */
.sjn-deux-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.sjn-deux-col p{color:var(--gris);margin-bottom:14px;max-width:56ch}
.sjn-deux-col .titre{font-size:clamp(23px,2.6vw,30px);margin-bottom:14px}
@media(max-width:860px){.sjn-deux-col{grid-template-columns:1fr}}

/* ---------- Avant / après (page diaspora) ---------- */
.sjn-versus{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.sjn-versus-col{padding:28px 26px;border-radius:var(--r-lg);border:1px solid var(--bord)}
.sjn-versus-col h3{font-size:19px;margin-bottom:16px}
.sjn-versus-col ul{list-style:none;display:grid;gap:11px}
.sjn-versus-col li{position:relative;padding-left:26px;font-size:15px;line-height:1.55}
/* Les pastilles sont dessinées en CSS : aucune image, aucun emoji. */
.sjn-versus-col li::before{
  content:'';position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%
}
.sjn-versus-col--mal{background:#F7EDEA;border-color:#E8D2CB}
.sjn-versus-col--mal h3{color:#8E3423}
.sjn-versus-col--mal li::before{
  background:#C4543C;
  -webkit-mask:linear-gradient(#000 0 0) center/8px 2px no-repeat;
          mask:linear-gradient(#000 0 0) center/8px 2px no-repeat;
  background-color:#C4543C
}
.sjn-versus-col--bien{background:#EDF3EE;border-color:#CFE0D4}
.sjn-versus-col--bien h3{color:var(--vert)}
.sjn-versus-col--bien li::before{
  background:var(--vert-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat
}
@media(max-width:760px){.sjn-versus{grid-template-columns:1fr}}

/* ---------- Page quartier ---------- */
.sjn-quartier-chiffres{
  list-style:none;display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--bord-fonce)
}
.sjn-quartier-chiffres strong{
  display:block;font-family:var(--serif);font-size:26px;color:#fff;font-weight:400;line-height:1.1
}
.sjn-quartier-chiffres span{font-size:13px;color:#9FB3A8}
.sjn-quartier-detail{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,52px);align-items:start}
.sjn-quartier-atouts ul{list-style:none;display:grid;gap:12px}
.sjn-quartier-atouts li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.sjn-quartier-atouts .ico{color:var(--vert-2);margin-top:3px;width:18px;height:18px;stroke-width:2.2}
.sjn-quartier-pour{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);padding:24px 22px}
.sjn-quartier-pour p{color:var(--gris);margin-bottom:16px}
@media(max-width:860px){.sjn-quartier-detail{grid-template-columns:1fr}}

.sjn-quartier-atouts-mini{list-style:none;display:grid;gap:7px;margin:14px 0 18px}
.sjn-quartier-atouts-mini li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--gris)}
.sjn-quartier-atouts-mini .ico{width:15px;height:15px;color:var(--vert-2);margin-top:3px;stroke-width:2.4}

/* Liens vers les quartiers voisins */
.sjn-voisins{margin-top:clamp(40px,6vw,64px);padding-top:32px;border-top:1px solid var(--bord)}
.sjn-voisins ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.sjn-voisins a{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  background:var(--blanc);border:1px solid var(--bord);border-radius:100px;
  font-size:14px;font-weight:600;transition:border-color var(--t),transform var(--t)
}
.sjn-voisins a:hover{border-color:var(--vert-2);transform:translateY(-2px)}
.sjn-voisins .ico{width:15px;height:15px;color:var(--terre)}
.sjn-voisins em{font-style:normal;color:var(--gris-clair);font-size:12.5px}

/* ---------- Questions fréquentes ---------- */
.sjn-faq{max-width:840px}
.sjn-faq-sommaire{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(32px,4vw,48px)}
.sjn-faq-sommaire a{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  background:var(--blanc);border:1px solid var(--bord);border-radius:100px;
  font-size:14px;font-weight:600;transition:border-color var(--t),color var(--t)
}
.sjn-faq-sommaire a:hover{border-color:var(--vert-2);color:var(--vert)}
.sjn-faq-sommaire .ico{width:16px;height:16px;color:var(--terre)}

.sjn-faq-groupe{margin-bottom:clamp(34px,4vw,52px);scroll-margin-top:90px}
.sjn-faq-liste{display:grid;gap:10px}
.sjn-faq-liste details{
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);
  overflow:hidden;transition:border-color var(--t),box-shadow var(--t)
}
.sjn-faq-liste details[open]{border-color:#D3CCC0;box-shadow:var(--ombre)}
.sjn-faq-liste summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;cursor:pointer;font-weight:600;font-size:15.5px;
  color:var(--encre);list-style:none
}
/* Le triangle natif du navigateur : retiré au profit du chevron du thème. */
.sjn-faq-liste summary::-webkit-details-marker{display:none}
.sjn-faq-liste summary::marker{content:''}
.sjn-faq-liste summary:hover{color:var(--vert-2)}
.sjn-faq-liste summary .ico{
  flex:none;width:17px;height:17px;color:var(--terre);
  transform:rotate(90deg);transition:transform var(--t)
}
.sjn-faq-liste details[open] summary .ico{transform:rotate(-90deg)}
.sjn-faq-liste summary:focus-visible{outline:2px solid var(--vert-2);outline-offset:-2px}
.sjn-faq-reponse{padding:0 20px 19px;color:var(--gris);font-size:15px;line-height:1.7;max-width:70ch}
.sjn-faq-libre{margin-top:34px}

/* ---------- Qui sommes-nous ---------- */
.sjn-apropos-texte{max-width:70ch}
.sjn-apropos-texte .titre{margin-top:34px}
.sjn-apropos-texte .titre:first-child{margin-top:0}
.sjn-apropos-texte p{color:var(--gris);margin-bottom:16px;font-size:16.5px;line-height:1.75}

.sjn-apropos-piliers{
  display:grid;gap:20px;margin-top:clamp(38px,5vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))
}
.sjn-apropos-piliers article{
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);
  padding:26px 24px;transition:transform var(--t),box-shadow var(--t)
}
.sjn-apropos-piliers article:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.sjn-apropos-piliers .ico{color:var(--terre);margin-bottom:14px}
.sjn-apropos-piliers h3{font-size:18px;margin-bottom:9px}
.sjn-apropos-piliers p{color:var(--gris);font-size:14.5px;line-height:1.65}

.sjn-apropos-chiffres{
  display:flex;flex-wrap:wrap;gap:20px 56px;padding:30px 0;
  border-block:1px solid var(--bord);margin-bottom:clamp(32px,4vw,48px)
}
.sjn-apropos-chiffres strong{
  display:block;font-family:var(--serif);font-size:clamp(30px,4vw,42px);
  color:var(--vert);font-weight:400;line-height:1
}
.sjn-apropos-chiffres span{font-size:14px;color:var(--gris)}
.sjn-apropos-libre{max-width:70ch;margin-bottom:clamp(32px,4vw,48px)}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .sjn-voisins a:hover,.sjn-apropos-piliers article:hover{transform:none}
  .sjn-faq-liste summary .ico,.sjn-faq-liste details[open] summary .ico{transition:none}
}

/* =========================================================
   BANDEAU DE CONSENTEMENT

   Il n'apparaît QUE si un identifiant Google Analytics a été renseigné en
   administration. Par défaut, le site ne dépose aucun cookie de mesure : un
   bandeau « nous utilisons des cookies » serait alors mensonger, et il coûte
   des visiteurs qui repartent avant d'avoir vu la première photo.

   Ancré en bas plutôt qu'en plein écran : il ne masque jamais le contenu.
   ========================================================= */
.sjn-consent{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:900;
  display:none;gap:18px;align-items:center;flex-wrap:wrap;justify-content:space-between;
  max-width:760px;margin-inline:auto;padding:16px 20px;
  background:var(--encre);color:#D9D3C7;border-radius:var(--r-lg);
  box-shadow:var(--ombre-fort);font-size:14px;line-height:1.55
}
/* Révélé par le script : sans JavaScript, les boutons ne pourraient rien enregistrer. */
.sjn-consent--visible{display:flex;animation:sjn-consent-entree .4s cubic-bezier(.2,.8,.3,1) both}
.sjn-consent p{margin:0;flex:1 1 320px}
.sjn-consent a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.sjn-consent-boutons{display:flex;gap:9px;flex-shrink:0}
/* Sur fond sombre, le bouton « Refuser » doit rester lisible et cliquable
   sans effort : refuser ne se cache pas. */
.sjn-consent .btn-2{background:transparent;border-color:#5A6660;color:#D9D3C7}
.sjn-consent .btn-2:hover{border-color:#8D9A93;background:rgba(255,255,255,.06)}

@keyframes sjn-consent-entree{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Les deux pastilles flottantes occupent le coin : 16 + 50 + 10 + 50 = 126 px,
   plus une marge. Le bandeau se pose au-dessus, jamais dessus. */
@media(max-width:720px){
  .sjn-consent{bottom:138px;left:12px;right:12px;padding:15px 17px}
  .sjn-consent-boutons{width:100%}
  .sjn-consent-boutons .btn{flex:1}
}

@media(prefers-reduced-motion:reduce){
  .sjn-consent--visible{animation:none}
}

/* =========================================================
   JOURNAL, RECHERCHE, GUIDES, PLAN DU SITE
   ========================================================= */

/* ---------- Métadonnées d'article ---------- */
.sjn-article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  font-size:13px;color:var(--gris-clair)
}
.sjn-article-meta > span,.sjn-article-meta time{display:inline-flex;align-items:center;gap:8px}
/* Séparateur dessiné plutôt qu'écrit : il disparaît proprement au retour à la ligne. */
.sjn-article-meta > *:not(:first-child)::before{
  content:'';display:inline-block;width:3px;height:3px;border-radius:50%;
  background:currentColor;opacity:.6
}
.sjn-article-meta .sjn-maj{color:var(--vert-2);font-weight:600}

/* ---------- Article de une ---------- */
.sjn-une{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(20px,3vw,38px);
  align-items:center;margin-bottom:clamp(38px,5vw,56px);
  padding-bottom:clamp(34px,4vw,48px);border-bottom:1px solid var(--bord)
}
.sjn-une-photo{
  display:block;border-radius:var(--r-lg);overflow:hidden;
  background:var(--sable-2);aspect-ratio:3/2
}
.sjn-une-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.sjn-une:hover .sjn-une-photo img{transform:scale(1.03)}
.sjn-une-corps h2{font-size:clamp(24px,3.2vw,36px);margin:6px 0 12px;line-height:1.18}
.sjn-une-corps h2 a{transition:color var(--t)}
.sjn-une-corps h2 a:hover{color:var(--vert-2)}
.sjn-une-corps p{color:var(--gris);margin-bottom:16px;max-width:56ch}
.sjn-une-corps .lien-fleche{margin-top:16px}
.sjn-une .placeholder{display:grid;place-items:center;width:100%;height:100%;color:var(--gris-clair)}
@media(max-width:800px){.sjn-une{grid-template-columns:1fr}}

/* Le titre d'une vignette d'article reste cliquable sans englober toute la carte. */
.carte-corps h3 a{transition:color var(--t)}
.carte-corps h3 a:hover{color:var(--vert-2)}

/* ---------- Article ---------- */
.sjn-article-tete{max-width:760px;margin-bottom:clamp(26px,3vw,38px)}
.sjn-article-tete .titre{margin:10px 0 14px}
.sjn-article-tete .chapo{margin-bottom:18px}
a.eyebrow{transition:color var(--t)}
a.eyebrow:hover{color:var(--terre-2)}

.sjn-article-photo{margin:0 0 clamp(26px,3vw,40px);border-radius:var(--r-lg);overflow:hidden}
.sjn-article-photo img{width:100%}
.sjn-article-photo figcaption{
  padding:10px 2px 0;font-size:13.5px;color:var(--gris);text-align:center
}

.sjn-article-corps{max-width:760px}

/* Sommaire */
.sjn-sommaire{
  background:var(--blanc);border:1px solid var(--bord);border-left:3px solid var(--terre);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-bottom:32px
}
.sjn-sommaire h2{
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);margin-bottom:12px
}
.sjn-sommaire ol{list-style:none;counter-reset:som;display:grid;gap:8px}
.sjn-sommaire li{counter-increment:som;display:flex;gap:11px;font-size:15px;line-height:1.5}
.sjn-sommaire li::before{
  content:counter(som,decimal-leading-zero);
  color:var(--gris-clair);font-size:12px;font-weight:600;padding-top:3px;flex:none
}
.sjn-sommaire a{color:var(--encre-2);text-decoration:underline;text-decoration-color:var(--bord);text-underline-offset:3px}
.sjn-sommaire a:hover{color:var(--vert-2);text-decoration-color:currentColor}

/* Les titres de section reçoivent une ancre : on laisse la place à l'en-tête collant. */
.contenu-riche h2[id]{scroll-margin-top:90px}

/* Partage */
.sjn-partage{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(32px,4vw,46px);padding-top:26px;border-top:1px solid var(--bord)
}
.sjn-partage span{color:var(--gris);font-size:15px}

/* ---------- Recherche ---------- */
.sjn-recherche-hero{margin-top:26px;max-width:560px}
.sjn-recherche-champ{
  display:flex;align-items:center;gap:10px;background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--r);padding:6px 6px 6px 15px;
  transition:border-color var(--t),box-shadow var(--t)
}
.sjn-recherche-champ:focus-within{border-color:var(--vert-2);box-shadow:0 0 0 3px rgba(44,85,72,.12)}
.sjn-recherche-champ .ico{color:var(--gris-clair);flex:none}
.sjn-recherche-champ input{
  flex:1;min-width:0;border:0;background:none;padding:11px 0;font-size:15px;color:var(--encre)
}
.sjn-recherche-champ input:focus{outline:none}
/* La croix native de Chrome sur input[type=search] jure avec le reste. */
.sjn-recherche-champ input::-webkit-search-decoration,
.sjn-recherche-champ input::-webkit-search-cancel-button{-webkit-appearance:none}
@media(max-width:520px){
  .sjn-recherche-champ{flex-wrap:wrap;padding:10px}
  .sjn-recherche-champ input{width:100%;padding:6px 4px}
  .sjn-recherche-champ .btn{width:100%}
}

/* ---------- Résultats ---------- */
.sjn-resultats{list-style:none;display:grid;gap:10px;max-width:840px}
.sjn-resultats > li > a{
  display:grid;grid-template-columns:72px 1fr 22px;gap:16px;align-items:center;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);
  padding:14px 16px;transition:border-color var(--t),transform var(--t),box-shadow var(--t)
}
.sjn-resultats > li > a:hover{border-color:var(--vert-2);transform:translateX(3px);box-shadow:var(--ombre)}
.sjn-resultat-photo{
  width:72px;height:72px;border-radius:var(--r);overflow:hidden;
  background:var(--sable-2);display:grid;place-items:center
}
.sjn-resultat-photo img{width:100%;height:100%;object-fit:cover}
.sjn-resultat-photo .placeholder{color:var(--gris-clair)}
.sjn-resultat-corps{min-width:0;display:grid;gap:4px}
.sjn-resultat-corps strong{font-size:16.5px;color:var(--encre);font-weight:600}
.sjn-resultat-extrait{color:var(--gris);font-size:14px;line-height:1.5}
.sjn-resultats .ico{color:var(--gris-clair)}
.sjn-etiquette{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--terre)
}
@media(max-width:560px){
  .sjn-resultats > li > a{grid-template-columns:56px 1fr;gap:12px}
  .sjn-resultats > li > a > .ico{display:none}
  .sjn-resultat-photo{width:56px;height:56px}
}

/* ---------- Guides ---------- */
.sjn-guides{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.sjn-guide{
  display:grid;grid-template-columns:150px 1fr;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r-lg);
  overflow:hidden;transition:transform var(--t),box-shadow var(--t),border-color var(--t)
}
.sjn-guide:hover{transform:translateY(-3px);box-shadow:var(--ombre);border-color:#D3CCC0}
.sjn-guide-photo{background:var(--sable-2);display:grid;place-items:center;overflow:hidden}
.sjn-guide-photo img{width:100%;height:100%;object-fit:cover}
.sjn-guide-photo .placeholder{color:var(--gris-clair)}
.sjn-guide-corps{padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.sjn-guide-corps h2{font-size:19px;line-height:1.25}
.sjn-guide-corps h2 a:hover{color:var(--vert-2)}
.sjn-guide-corps p{color:var(--gris);font-size:14.5px;line-height:1.6;flex:1}
.sjn-guide-pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sjn-guide-format{
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris-clair);font-weight:600
}
@media(max-width:480px){
  .sjn-guide{grid-template-columns:1fr}
  .sjn-guide-photo{aspect-ratio:16/9}
}

/* ---------- Liste cochée (page Entreprises) ---------- */
.sjn-liste-cochee{list-style:none;display:grid;gap:12px}
.sjn-liste-cochee li{
  position:relative;padding-left:28px;font-size:15.5px;line-height:1.55;color:#9FB3A8
}
.sjn-liste-cochee li::before{
  content:'';position:absolute;left:0;top:.35em;width:16px;height:16px;
  background:var(--or);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.5l5 5 10-11' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat
}
.section:not(.section--sombre) .sjn-liste-cochee li{color:var(--encre-2)}
.section:not(.section--sombre) .sjn-liste-cochee li::before{background:var(--vert-2)}

/* ---------- Plan du site ---------- */
.sjn-plan-site{display:grid;gap:clamp(26px,4vw,44px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.sjn-plan-site ul{list-style:none;display:grid;gap:9px}
.sjn-plan-site li{display:flex;align-items:baseline;gap:8px;font-size:15px}
.sjn-plan-site a{
  color:var(--encre-2);text-decoration:underline;
  text-decoration-color:var(--bord);text-underline-offset:3px;transition:color var(--t)
}
.sjn-plan-site a:hover{color:var(--vert-2);text-decoration-color:currentColor}
.sjn-plan-site--fille{padding-left:16px;font-size:14px}
.sjn-plan-site--fille a{color:var(--gris)}
.sjn-plan-site em{font-style:normal;color:var(--gris-clair);font-size:12px}

/* ---------- Mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .sjn-une:hover .sjn-une-photo img,
  .sjn-guide:hover,
  .sjn-resultats > li > a:hover{transform:none}
}

/* =========================================================
   PARCOURS D'ARRIVÉE AU DÉFILEMENT

   Deux colonnes : à gauche une scène qui reste calée pendant qu'à droite
   les étapes défilent. Sur une seule colonne (téléphone), le calage n'a
   aucun sens — on empile et tout redevient pleinement visible.
   ========================================================= */
.sjn-parcours{padding:clamp(56px,8vw,104px) 0;background:var(--vert);color:#C3CFC7}
.sjn-parcours .tete{max-width:640px}
.sjn-parcours .titre{color:#fff}
.sjn-parcours .eyebrow{color:var(--or)}

.sjn-parcours-grille{
  display:grid;grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(30px,6vw,80px);align-items:start
}

/* ---------- Colonne calée ---------- */
.sjn-parcours-fixe{position:sticky;top:14vh;height:64vh;min-height:340px}
.sjn-parcours-scene{
  position:relative;width:100%;height:100%;border-radius:var(--r-lg);overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid var(--bord-fonce)
}

/* Les vues sont empilées ; une seule est visible à la fois. */
.sjn-parcours-vue{
  position:absolute;inset:0;margin:0;display:grid;place-items:center;
  opacity:0;transform:scale(1.03);transition:opacity .55s var(--t),transform .55s var(--t);
  pointer-events:none
}
.sjn-parcours-vue.est-active{opacity:1;transform:none}
.sjn-parcours-vue img{width:100%;height:100%;object-fit:cover}

/* Emblème dessiné, tant qu'aucune photo n'est déposée. */
.sjn-parcours-embleme{
  display:grid;place-items:center;width:clamp(96px,16vw,150px);aspect-ratio:1;
  border-radius:50%;background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.34)
}
.sjn-parcours-embleme .ico{width:44px;height:44px;color:var(--or);stroke-width:1.4}

/* Le grand numéro : repère de progression, posé par-dessus la scène. */
.sjn-parcours-num{
  position:absolute;left:22px;bottom:14px;margin:0;
  font-family:var(--serif);font-size:clamp(56px,9vw,104px);line-height:.85;
  color:rgba(255,255,255,.20);letter-spacing:-.03em
}
.sjn-parcours-vue img + .sjn-parcours-num{color:rgba(255,255,255,.72);text-shadow:0 2px 24px rgba(0,0,0,.6)}

/* Rail de progression */
.sjn-parcours-rail{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  display:grid;gap:10px;z-index:2
}
.sjn-parcours-pt{
  display:block;width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.22);transition:background var(--t),transform var(--t)
}
.sjn-parcours-pt.est-active{background:var(--or);transform:scale(1.5)}

/* ---------- Colonne qui défile ---------- */
.sjn-parcours-etapes{list-style:none;margin:0;padding:0}
.sjn-parcours-etape{
  min-height:62vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.42;transition:opacity .5s var(--t)
}
.sjn-parcours-etape.est-active{opacity:1}
.sjn-parcours-rang{
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;font-weight:700;
  color:var(--or);margin-bottom:14px;display:block
}
.sjn-parcours-etape h3{
  font-size:clamp(24px,3.4vw,38px);color:#fff;margin-bottom:14px;line-height:1.15
}
.sjn-parcours-etape p{color:#9FB3A8;font-size:clamp(15px,1.5vw,17px);line-height:1.7;max-width:52ch}

/* Filet qui relie les étapes : on lit une progression, pas une liste. */
.sjn-parcours-etape:not(:last-child){
  border-bottom:1px solid var(--bord-fonce)
}

/* ---------- Une seule colonne ---------- */
@media(max-width:900px){
  .sjn-parcours-grille{grid-template-columns:1fr;gap:26px}
  /* Le calage est retiré : sinon la scène occuperait la moitié de l'écran
     en permanence, au-dessus du texte qu'on essaie de lire. */
  .sjn-parcours-fixe{position:static;height:auto;min-height:0}
  .sjn-parcours-scene{height:min(46vh,300px)}
  .sjn-parcours-etape{min-height:0;opacity:1;padding:26px 0}
  .sjn-parcours-num{font-size:clamp(44px,14vw,72px)}
}

/* ---------- Mouvement réduit ---------- */
/* Le script s'arrête de lui-même ; il reste à tout rendre lisible d'un coup. */
@media(prefers-reduced-motion:reduce){
  .sjn-parcours-etape{opacity:1}
  .sjn-parcours-vue{transition:none}
  .sjn-parcours-fixe{position:static;height:auto}
  .sjn-parcours-scene{height:min(46vh,300px)}
}

/* Bandeau de quartier avec photo de fond.
   Le voile sombre est NON négociable : sans lui, un ciel clair rendrait
   le titre blanc illisible — et on ne maîtrise pas la photo déposée. */
.hero--photo{
  background-image:linear-gradient(rgba(23,32,28,.72),rgba(23,32,28,.82)),var(--sjn-hero);
  background-size:cover;
  background-position:var(--sjn-hero-pos,center);
  background-repeat:no-repeat
}

/* =========================================================
   DÉCOUVRIR LE SÉNÉGAL
   Fiches alternées : visuel et texte échangent de côté d'une
   destination à l'autre, pour que la page ne se lise pas comme
   un tableau.
   ========================================================= */
.sjn-destinations{display:grid;gap:clamp(30px,5vw,64px)}

.sjn-destination{
  display:grid;grid-template-columns:minmax(240px,420px) 1fr;
  gap:clamp(22px,4vw,52px);align-items:center;scroll-margin-top:90px
}
/* Une fiche sur deux inverse l'ordre : le visuel passe à droite. */
.sjn-destination:nth-child(even) .sjn-destination-visuel{order:2}

.sjn-destination-visuel{
  border-radius:var(--r-lg);overflow:hidden;background:var(--sable-2);
  aspect-ratio:4/3;display:grid;place-items:center
}
.sjn-destination-visuel img{width:100%;height:100%;object-fit:cover}

/* Emblème dessiné, tant qu'aucune photo n'existe pour cette destination. */
.sjn-destination-embleme{
  display:grid;place-items:center;width:clamp(80px,12vw,116px);aspect-ratio:1;
  border-radius:50%;background:var(--blanc);border:1px solid var(--bord)
}
.sjn-destination-embleme .ico{width:38px;height:38px;color:var(--terre);stroke-width:1.4}

.sjn-destination-corps h2{font-size:clamp(24px,3.4vw,36px);margin-bottom:14px;line-height:1.15}
.sjn-destination-resume{color:var(--gris);font-size:16.5px;line-height:1.75;max-width:58ch;margin-bottom:22px}

.sjn-destination-infos{display:grid;gap:16px;margin:0}
.sjn-destination-infos > div{
  padding-left:16px;border-left:2px solid var(--bord)
}
.sjn-destination-infos dt{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--terre-2);margin-bottom:5px
}
.sjn-destination-infos dd{margin:0;color:var(--encre-2);font-size:15px;line-height:1.6;max-width:56ch}

@media(max-width:820px){
  .sjn-destination{grid-template-columns:1fr;gap:18px}
  /* L'inversion n'a plus de sens sur une colonne : le visuel repasse en tête. */
  .sjn-destination:nth-child(even) .sjn-destination-visuel{order:0}
  .sjn-destination-visuel{aspect-ratio:16/10}
}

/* ---------- Option chiffrée dans un formulaire (transfert aéroport) ---------- */
.sjn-option{
  display:flex;align-items:flex-start;gap:12px;margin:6px 0 18px;padding:14px 16px;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);
  cursor:pointer;transition:border-color var(--t),box-shadow var(--t)
}
.sjn-option:hover{border-color:var(--vert-2)}
.sjn-option:has(input:checked){border-color:var(--vert-2);box-shadow:0 0 0 2px rgba(44,85,72,.12)}
.sjn-option:has(input:focus-visible){outline:2px solid var(--vert-2);outline-offset:2px}
.sjn-option input{margin-top:3px;accent-color:var(--vert-2);width:17px;height:17px;flex:none}
.sjn-option-corps{flex:1;min-width:0;display:grid;gap:3px}
.sjn-option-titre{font-weight:600;font-size:14.5px;color:var(--encre)}
.sjn-option-detail{font-size:13px;color:var(--gris);line-height:1.5}
.sjn-option-prix{font-weight:600;font-size:14px;color:var(--vert-2);white-space:nowrap;flex:none}

/* Lignes fiscales du récapitulatif : présentes mais discrètes — le client
   regarde le total, le comptable regarde la décomposition. */
.recap .sjn-ligne-fiscale{font-size:13px;color:var(--gris)}

/* Mention « non soumis à la TVA » : lisible mais pas au même niveau que la
   ligne elle-même — c'est une précision comptable, pas un argument. */
.recap .sjn-hors-tva{
  display:block;font-style:normal;font-size:11.5px;color:var(--gris);margin-top:2px
}

/* =========================================================
   COMPOSANTS PARTAGÉS — reprise des styles écrits en dur

   Ces blocs existaient déjà, mais recopiés dans les gabarits
   sous forme d'attributs style="". Résultat : le même composant
   avait des valeurs différentes d'un écran à l'autre (l'état
   vide s'écrivait en h2 ici, en h3 là, avec trois largeurs de
   texte). Une modification devait alors être répétée six fois
   — et l'oubli d'une seule suffisait à faire dériver le site.

   Une règle par composant : on change ici, ça change partout.
   ========================================================= */

/* --- État vide : l'écran qui n'a rien à montrer --- */
.sjn-vide{padding:34px;text-align:center;border-style:dashed}
.sjn-vide > h2,
.sjn-vide > h3{margin:14px 0 8px;font-size:22px}
.sjn-vide > p{color:var(--gris);margin:0 auto 20px;max-width:56ch}
.sjn-vide > p:last-child{margin-bottom:0}

/* Variante de la recherche : le texte s'aligne à gauche sous le champ. */
.sjn-vide--gauche{text-align:left;max-width:640px}
.sjn-vide--gauche > p{margin-inline:0;margin-bottom:22px}
.sjn-vide--gauche .cta-actions{justify-content:flex-start}

/* --- Enchaînement de sections --- */
/* Deux sections de même fond qui se suivent : la seconde ne redouble pas
   l'espace du haut, sinon le trou fait croire à une rupture. */
.section--suite{padding-top:0}
.section--blanche{background:var(--blanc);border-top:1px solid var(--bord)}
.section--blanche.section--detachee{padding-top:clamp(40px,5vw,64px)}

/* --- Largeur de lecture d'un formulaire ou d'un article --- */
.sjn-mesure{max-width:820px}

/* --- Image à la une d'un article ou d'une page --- */
.sjn-media{border-radius:var(--r-lg);overflow:hidden;margin-bottom:32px}

/* --- Barre de filtres rapides (journal, logements) --- */
.filtres-rapides{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.filtres-rapides .compte{opacity:.6}

/* --- Pagination : même respiration sur tous les listings --- */
.sjn-pagination{margin-top:36px}

/* --- Bloc d'action qui suit une grille --- */
.sjn-suite{margin-top:32px}
.sjn-suite--serree{margin-top:18px}

/* --- Encart « proprios » : un seul détachement, plus quatre valeurs --- */
.proprios--detache{margin-top:44px}
.proprios h2{font-size:clamp(21px,2.4vw,27px);margin-bottom:8px}

/* --- Alignements ponctuels --- */
/* Un encart d'aide dans un formulaire centré : le texte reste à gauche,
   c'est de la lecture, pas un titre. */
.txt-gauche{text-align:left}

/* --- Texte secondaire --- */
.sjn-meta-ligne{color:var(--gris);font-size:14.5px}

/* Corps de texte sur fond vert : la nuance pâle, déjà utilisée par .chapo. */
.section--sombre .txt-pale{color:#9FB3A8}
.section--sombre .lien-fleche.lien-or{color:var(--or)}

/* --- Espace occupant : la porte d'entrée --- */
.sjn-porte{max-width:560px}
.sjn-porte .sjn-form-reservation{
  background:var(--blanc);border:1px solid var(--bord);
  border-radius:var(--r-lg);padding:24px
}
/* Le code se lit lettre par lettre : on l'espace et on force la capitale. */
.sjn-code-saisie{letter-spacing:.14em;text-transform:uppercase}
.sjn-porte-aide{text-align:center;margin-top:18px}
.sjn-bloc-aide{margin:22px 0 0}

/* --- Récapitulatifs empilés --- */
/* Trois listes .recap se suivent dans le bloc de réservation. Sans ça,
   chacune redessine son filet du haut et l'ensemble ressemble à un tableau
   rayé au lieu d'un seul bloc. */
.recap--premier{margin-top:0;padding-top:0;border-top:0}
.recap--suite{margin-top:0}

/* =========================================================
   CALENDRIER DE DISPONIBILITÉ

   Le fond seul ne dit rien à qui ne distingue pas les couleurs :
   un jour réservé porte aussi une barre oblique, et son état est
   écrit en clair pour les lecteurs d'écran (.sjn-sr dans le HTML).
   ========================================================= */

.sjn-cal-legende{
  display:flex;gap:18px;align-items:center;
  margin-bottom:14px;font-size:13px;color:var(--gris)
}
.sjn-cal-cle{display:inline-flex;align-items:center;gap:7px}
.sjn-cal-cle::before{
  content:"";width:13px;height:13px;border-radius:3px;
  border:1px solid var(--bord);background:var(--blanc)
}
.sjn-cal-cle--pris::before{
  background:var(--sable-2);border-color:var(--bord);
  background-image:linear-gradient(135deg,transparent 44%,var(--terre) 44%,var(--terre) 56%,transparent 56%)
}

/* Trois mois côte à côte, qui repassent en colonne dès que c'est serré. */
.sjn-cal-mois{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))
}

.sjn-cal-table{width:100%;border-collapse:collapse;font-size:13.5px}
.sjn-cal-table caption{
  text-align:left;font-weight:600;color:var(--encre);
  padding-bottom:9px;text-transform:capitalize
}
.sjn-cal-table th{
  font-weight:600;color:var(--gris);font-size:11.5px;
  padding-bottom:6px;text-align:center
}
.sjn-cal-table th abbr{text-decoration:none;border:0;cursor:default}
.sjn-cal-table td{
  text-align:center;padding:0;height:31px;
  border:1px solid var(--bord);color:var(--encre)
}
.sjn-cal-vide{border-color:transparent !important;background:none}

.sjn-cal-libre{background:var(--blanc)}
.sjn-cal-passe{background:var(--sable-2);color:var(--gris-clair)}

/* Réservé : couleur ET barre oblique. */
.sjn-cal-pris{
  background:var(--sable-2);color:var(--gris);
  background-image:linear-gradient(135deg,transparent 46%,var(--terre) 46%,var(--terre) 54%,transparent 54%)
}

.sjn-cal-note{
  margin-top:12px;font-size:13.5px;color:var(--gris)
}

/* --- Verdict sous les champs de dates du formulaire --- */
.sjn-dispo{
  display:flex;align-items:flex-start;gap:8px;
  margin:-4px 0 16px;font-size:13.5px;line-height:1.5
}
.sjn-dispo::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:5px
}
.sjn-dispo--libre{color:var(--gris)}
.sjn-dispo--libre::before{background:var(--vert-2,var(--vert))}
.sjn-dispo--pris{color:var(--terre-2,var(--terre));font-weight:600}
.sjn-dispo--pris::before{background:var(--terre)}

/* Un bouton d'envoi désactivé doit se voir : sinon on clique dans le vide. */
.sjn-form-reservation button[type=submit]:disabled{
  opacity:.5;cursor:not-allowed
}

/* --- Filtre par dates dans la liste des logements --- */
/* Les deux champs de date sont la premiere question qu'on se pose : ils
   occupent chacun une colonne pleine, comme les autres filtres. */
.sjn-filtre--dates{flex:1;min-width:150px}
.sjn-filtre--dates input[type=date]{
  border:0;outline:0;width:100%;min-width:0;background:none;
  font-size:15px;font-family:inherit;color:var(--encre);cursor:pointer
}

/* =========================================================
   PAGE DÉDIÉE À LA CARTE
   Liste et plan côte à côte, sur le modèle de N2M Habitat.
   ========================================================= */

/* Le plan reste sous les yeux pendant qu'on fait défiler la liste :
   c'est tout l'intérêt d'une page carte. */
.sjn-carte-page .sjn-plan-corps{
  position:sticky;top:84px;z-index:1;margin-bottom:26px
}
.sjn-carte-page .sjn-plan-carte{
  height:min(62vh,560px);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--bord)
}
.sjn-carte-page .sjn-plan-compte{margin:0 0 18px}

/* Sans adresse renseignée, pas de plan : on l'explique au lieu de
   laisser un trou blanc. */
.sjn-plan-note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--sable-2);border:1px solid var(--bord);
  border-radius:var(--r-lg);padding:14px 16px;margin:0 0 26px;
  color:var(--gris);font-size:14.5px
}
.sjn-plan-note .ico{width:18px;height:18px;flex:0 0 18px;margin-top:2px}

.sjn-carte-liste{margin-top:8px}

/* Au-delà du pli téléphone : la carte occupe la colonne de droite et
   ne défile plus avec la liste. */
@media (min-width:1024px){
  .sjn-carte-page{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:0 28px;align-items:start
  }
  /*
   * .sjn-plan enveloppe les filtres, le compteur et la carte. Ses enfants
   * doivent devenir ceux de la grille, sinon rien ne se place : display:contents
   * le fait disparaître de la mise en page sans toucher au HTML partagé.
   */
  .sjn-carte-page .sjn-plan{display:contents}

  /*
   * Lignes EXPLICITES. Laissée à l'automatique, la grille posait la liste
   * sur une ligne à elle, sous la carte — d'où un grand vide à côté du plan.
   * Les quatre bandeaux du haut prennent toute la largeur ; la liste et la
   * carte partagent la ligne 4.
   */
  .sjn-carte-page .sjn-filtres{grid-column:1 / -1;grid-row:1}
  .sjn-carte-page .sjn-equipements{grid-column:1 / -1;grid-row:2}
  .sjn-carte-page .sjn-plan-note{grid-column:1 / -1;grid-row:3}
  .sjn-carte-page .sjn-plan-compte{grid-column:1 / -1;grid-row:4}
  .sjn-carte-page .sjn-carte-liste{grid-column:1;grid-row:5}
  .sjn-carte-page .sjn-plan-corps{
    grid-column:2;grid-row:5;margin-bottom:0
  }
  .sjn-carte-page .sjn-plan-carte{height:min(78vh,720px)}
  /* Deux colonnes de vignettes deviendraient illisibles dans une demi-largeur. */
  .sjn-carte-page .grille-2{grid-template-columns:1fr}
}

/* Sans plan, la liste reprend toute la largeur. */
.sjn-carte-page--sans-plan{display:block}

/* =========================================================
   SÉLECTEUR DE LANGUE
   Deux libellés courts, pas de drapeau : un drapeau désigne
   un pays, et l'anglais de ce site s'adresse autant à Londres
   qu'à New York ou à Lagos.
   ========================================================= */
.sjn-langues{
  display:inline-flex;align-items:center;gap:2px;
  border:1px solid var(--bord);border-radius:999px;
  padding:3px;background:var(--blanc)
}
.sjn-langue{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:26px;padding:0 8px;
  border-radius:999px;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;color:var(--gris);text-decoration:none;
  transition:background var(--t),color var(--t)
}
.sjn-langue:hover{background:var(--sable-2);color:var(--encre)}
.sjn-langue--active{background:var(--vert);color:#fff;cursor:default}

/* Page absente dans l'autre langue : le lien mène à l'accueil.
   On l'estompe légèrement — le titre au survol dit pourquoi. */
.sjn-langue--partielle{opacity:.62}
.sjn-langue--partielle:hover{opacity:1}

.sjn-langue:focus-visible{outline:2px solid var(--terre);outline-offset:2px}

/* Sur téléphone, le sélecteur passe avant le bouton Réserver :
   choisir sa langue précède toute autre décision. */
@media (max-width:640px){
  .sjn-langues{order:-1}
  .sjn-langue{min-width:30px;height:24px;font-size:12px}
}