/* ============================================================
   RE/MAX Initial Immobilier — Design system
   Direction artistique : éditoriale, sobre, chaleureuse.
   Le bleu et le rouge RE/MAX sont des accents, jamais des aplats.
   ============================================================ */

/* ---------- 1. Jetons ---------- */
:root{
  /* Encres */
  --encre:#0E1B2E;          /* navy profond, presque noir */
  --encre-doux:#1E2E45;
  --texte:#2C3545;
  --muet:#656D7C;        /* AA sur --os et --sable (4,99 / 4,62) */
  --muet-clair:#868C96;  /* AA non-textuel (3,24 / 3,00) */
  --or:#BC8C1C;          /* étoiles d'avis — 3,04 sur blanc */

  /* Surfaces chaudes */
  --blanc:#FFFFFF;
  --os:#FBFAF8;             /* fond général, blanc cassé chaud */
  --sable:#F4F1EB;          /* surface secondaire */
  --sable-fonce:#EBE6DD;
  --ligne:#E5E0D7;
  --ligne-sombre:rgba(255,255,255,.14);

  /* Accents RE/MAX, désaturés pour l'élégance */
  --rouge:#D0202D;
  --rouge-sombre:#A81A24;
  --bleu:#0A4B9C;

  /* Typographie */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Rythme */
  --section:clamp(72px,9vw,128px);
  --gouttiere:clamp(20px,4vw,40px);
  --max:1240px;
  --max-texte:680px;

  /* Formes */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:10px;
  --r-pill:999px;

  /* Ombres — presque invisibles, jamais de halo */
  --ombre-1:0 1px 2px rgba(14,27,46,.05);
  --ombre-2:0 2px 4px rgba(14,27,46,.04),0 12px 32px rgba(14,27,46,.06);
  --ombre-3:0 4px 8px rgba(14,27,46,.05),0 24px 56px rgba(14,27,46,.09);

  --t:280ms cubic-bezier(.22,.61,.36,1);
  --t-lent:700ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--os);color:var(--texte);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  font-feature-settings:"kern","liga","cv11";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;color:var(--encre);letter-spacing:-.015em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:var(--r-xs)}
::selection{background:var(--encre);color:var(--os)}

.conteneur{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)}
.etroit{max-width:var(--max-texte)}
.section{padding-block:var(--section)}
.section--sable{background:var(--sable)}
.section--encre{background:var(--encre);color:rgba(255,255,255,.78)}
.section--encre h1,.section--encre h2,.section--encre h3{color:#fff}

/* ---------- 3. Typographie ---------- */
.display{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.06;letter-spacing:-.025em}
.t1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.1rem);line-height:1.12;letter-spacing:-.022em}
.t2{font-family:var(--serif);font-weight:400;font-size:clamp(1.65rem,2.9vw,2.35rem);line-height:1.18;letter-spacing:-.018em}
.t3{font-family:var(--sans);font-weight:600;font-size:1.1rem;line-height:1.4;letter-spacing:-.008em}
.chapeau{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;color:var(--muet)}
.petit{font-size:.875rem;line-height:1.55;color:var(--muet)}

/* Sur-titre : petite capitale + filet rouge court */
.surtitre{
  display:flex;align-items:center;gap:12px;
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muet);margin-bottom:22px;
}
.surtitre::before{content:"";width:26px;height:1px;background:var(--rouge);flex:none}
.section--encre .surtitre{color:rgba(255,255,255,.55)}

/* ---------- 4. Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 28px;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:.95rem;font-weight:500;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
  text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn--primaire{background:var(--encre);color:#fff}
.btn--primaire:hover{background:var(--encre-doux)}
.btn--rouge{background:var(--rouge);color:#fff}
.btn--rouge:hover{background:var(--rouge-sombre)}
.btn--ligne{background:transparent;color:var(--encre);border-color:var(--ligne)}
.btn--ligne:hover{border-color:var(--encre);background:var(--blanc)}
.btn--clair{background:#fff;color:var(--encre)}
.btn--clair:hover{background:rgba(255,255,255,.88)}
.btn--fantome{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn--fantome:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--bloc{width:100%}

/* Lien texte avec filet animé */
.lien{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.95rem;font-weight:500;color:var(--encre);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid var(--ligne);transition:border-color var(--t),gap var(--t);
}
.lien:hover{border-color:var(--encre);gap:13px}
.lien .fleche{transition:transform var(--t)}
.lien:hover .fleche{transform:translateX(2px)}
.section--encre .lien{color:#fff;border-color:var(--ligne-sombre)}
.section--encre .lien:hover{border-color:#fff}

/* ---------- 5. En-tête ---------- */
.entete{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background var(--t),box-shadow var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.entete__inner{display:flex;align-items:center;gap:24px;min-height:76px}
.entete--pose{background:rgba(251,250,248,.94);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--ligne)}

/* Logo — deux versions superposées, permutées selon le fond.
   Même géométrie (417 × 176) : aucun saut lors de la bascule. */
.marque{position:relative;display:block;line-height:0;margin-right:auto;flex:none}
.marque__logo{display:block;height:38px;width:auto;transition:opacity var(--t)}
.marque__logo--creme{position:absolute;top:0;left:0;opacity:0}
.entete--transparent .marque__logo--noir{opacity:0}
.entete--transparent .marque__logo--creme{opacity:1}
@media(min-width:640px){.marque__logo{height:46px}}
.pied__logo{height:52px;width:auto;display:block;margin-bottom:20px}

.menu{display:none;align-items:center;gap:clamp(18px,1.9vw,28px)}
.menu a{font-size:.9rem;text-decoration:none;color:var(--texte);transition:color var(--t);white-space:nowrap}
.menu a:hover,.menu a[aria-current="page"]{color:var(--rouge)}
.entete--transparent .menu a{color:rgba(255,255,255,.88)}
.entete--transparent .menu a:hover{color:#fff}

.entete__actions{display:flex;align-items:center;gap:12px}
.entete .btn{min-height:44px;padding:0 20px;font-size:.88rem}
.entete--transparent .btn--primaire{background:#fff;color:var(--encre)}

/* Bouton burger */
.burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;
}
.burger span{display:block;height:1.5px;background:var(--encre);transition:transform var(--t),opacity var(--t)}
.entete--transparent .burger span{background:#fff}
.burger[aria-expanded="true"] span{background:var(--encre)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(min-width:1180px){
  .menu{display:flex}
  .burger{display:none}
}

/* Panneau mobile */
.panneau{
  position:fixed;inset:0;z-index:99;background:var(--os);
  padding:96px var(--gouttiere) 40px;
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  overflow-y:auto;
}
.panneau[data-ouvert="true"]{opacity:1;visibility:visible;transform:none}
.panneau a{
  font-family:var(--serif);font-size:1.75rem;color:var(--encre);text-decoration:none;
  padding:15px 0;border-bottom:1px solid var(--ligne);display:block;
}
.panneau__pied{margin-top:auto;padding-top:30px;display:grid;gap:12px}

/* ---------- Accès extranet (Vilogi) ---------- */
.lien-espace{
  display:none;font-size:.85rem;text-decoration:none;color:var(--muet);
  white-space:nowrap;transition:color var(--t);line-height:1.15;
  padding-left:clamp(18px,1.9vw,26px);border-left:1px solid var(--ligne);
}
.lien-espace:hover{color:var(--rouge)}
.entete--transparent .lien-espace{color:rgba(255,255,255,.88);border-left-color:rgba(255,255,255,.26)}
.entete--transparent .lien-espace:hover{color:#fff}
@media(min-width:1180px){.lien-espace{display:inline-flex;align-items:center}}

.panneau__espaces{margin-top:26px;padding-top:20px;border-top:1px solid var(--ligne)}
.panneau__espaces .panneau__titre{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muet);margin:0 0 6px;
}
.panneau__espaces a{font-size:1.15rem;padding:11px 0}

/* ---------- 6. Hero ---------- */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:var(--encre)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__voile{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,27,46,.52) 0%,rgba(14,27,46,.18) 32%,rgba(14,27,46,.72) 100%);
}
.hero__contenu{position:relative;width:100%;padding-block:clamp(56px,9vw,96px)}
.hero .display{color:#fff;max-width:15ch}
.hero__sous{color:rgba(255,255,255,.82);font-size:clamp(1.02rem,1.4vw,1.18rem);max-width:52ch;margin-top:22px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__discret{margin-top:22px}
.hero__discret a{
  font-size:.92rem;color:rgba(255,255,255,.74);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px;transition:color var(--t),border-color var(--t);
}
.hero__discret a:hover{color:#fff;border-color:#fff}

/* ---------- 7. Grilles ---------- */
.grille{display:grid;gap:clamp(20px,2.6vw,32px)}
@media(min-width:700px){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
}
.duo{display:grid;gap:clamp(32px,5vw,72px);align-items:start}
@media(min-width:900px){.duo{grid-template-columns:1fr 1fr}.duo--asym{grid-template-columns:1.15fr .85fr}}

.entete-section{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(32px,4vw,52px)}
.entete-section p{max-width:58ch;margin-top:14px}

/* ---------- 8. Carte de bien ---------- */
.bien{
  display:flex;flex-direction:column;background:var(--blanc);
  border:1px solid var(--ligne);border-radius:var(--r-md);overflow:hidden;
  transition:box-shadow var(--t),transform var(--t),border-color var(--t);
  text-decoration:none;color:inherit;height:100%;
}
.bien:hover{box-shadow:var(--ombre-3);transform:translateY(-3px);border-color:transparent}
.bien__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sable-fonce)}
.bien__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-lent)}
.bien:hover .bien__media img{transform:scale(1.045)}
.bien__etiquettes{position:absolute;top:14px;left:14px;display:flex;gap:7px;flex-wrap:wrap}
.etiquette{
  font-size:.66rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--r-xs);background:rgba(255,255,255,.94);color:var(--encre);
  backdrop-filter:blur(6px);
}
.etiquette--vente{background:var(--encre);color:#fff}
.etiquette--location{background:var(--bleu);color:#fff}
.etiquette--exclu{background:var(--rouge);color:#fff}
.bien__corps{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.bien__lieu{font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muet);margin-bottom:9px}
.bien__titre{font-family:var(--serif);font-size:1.32rem;line-height:1.25;color:var(--encre)}
.bien__prix{font-family:var(--serif);font-size:1.5rem;color:var(--encre);margin-top:14px}
.bien__prix small{font-family:var(--sans);font-size:.82rem;color:var(--muet);font-weight:400}
.bien__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--ligne);font-size:.87rem;color:var(--muet);
}
.bien__meta span{display:inline-flex;align-items:center;gap:6px}
.bien__meta span+span:not(.dpe-pastille)::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--muet-clair);margin-right:8px}

/* Pastille DPE — lettre + couleur réglementaire */
.dpe-pastille{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muet);
}
.dpe-pastille b{
  display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-xs);
  font-size:.78rem;font-weight:700;letter-spacing:0;color:#fff;
}

/* Renvoi vers l'annonce officielle */
.bien__renvoi{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--ligne);
  font-size:.9rem;font-weight:500;color:var(--encre);
}
.bien__renvoi svg{flex:none;color:var(--muet);transition:transform var(--t),color var(--t)}
.bien:hover .bien__renvoi svg{transform:translate(2px,-2px);color:var(--rouge)}
.mention-legale{
  background:var(--sable);border:1px solid var(--ligne);border-radius:var(--r-md);
  padding:22px 24px;font-size:.9rem;color:var(--muet);line-height:1.6;
}
.mention-legale strong{color:var(--encre)}

/* ---------- 8 bis. Bandeau catalogue ---------- */
.catalogue{position:relative;border-radius:var(--r-md);overflow:hidden;isolation:isolate;background:var(--encre)}
.catalogue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.catalogue::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,27,46,.55) 0%,rgba(14,27,46,.90) 100%);
}
@media(min-width:760px){
  .catalogue::after{background:linear-gradient(90deg,rgba(14,27,46,.93) 0%,rgba(14,27,46,.78) 48%,rgba(14,27,46,.30) 100%)}
}
.catalogue__corps{padding:clamp(34px,5.5vw,68px);max-width:60ch}
.catalogue__corps h2,.catalogue__corps h3{color:#fff}
.catalogue__corps p{color:rgba(255,255,255,.80)}
.catalogue__corps .surtitre{color:rgba(255,255,255,.58)}
.catalogue__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}

/* ---------- 9. Placeholder photo (à remplacer par les vraies images) ---------- */
.ph{
  position:relative;width:100%;height:100%;
  background:
    linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%),
    var(--sable-fonce);
  display:flex;align-items:center;justify-content:center;
}
.ph::after{
  content:attr(data-ph);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muet-clair);
  text-align:center;padding:16px;max-width:80%;
}
.ph--sombre{background:linear-gradient(160deg,#16263C 0%,#0E1B2E 100%)}
.ph--sombre::after{color:rgba(255,255,255,.4)}

/* ---------- 10. Cartes génériques ---------- */
.carte{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-md);padding:clamp(24px,3vw,34px);height:100%}
.carte--nu{background:transparent;border:0;padding:0}
.carte__num{font-family:var(--serif);font-size:1.6rem;color:var(--rouge);line-height:1;margin-bottom:16px;display:block}

.service{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-md);overflow:hidden;height:100%}
.service__media{aspect-ratio:16/10;overflow:hidden;background:var(--sable-fonce)}
.service__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-lent)}
.service:hover .service__media img{transform:scale(1.04)}
.service__corps{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1;gap:12px}
.service__corps .lien{margin-top:auto;align-self:flex-start}

/* Liste à filets — remplace les icônes génériques */
.filets{border-top:1px solid var(--ligne)}
.filets li{padding:20px 0;border-bottom:1px solid var(--ligne);display:grid;gap:6px}
.filets strong{font-weight:600;color:var(--encre);font-size:1.02rem}
.filets span{color:var(--muet);font-size:.95rem}
.section--encre .filets{border-color:var(--ligne-sombre)}
.section--encre .filets li{border-color:var(--ligne-sombre)}
.section--encre .filets strong{color:#fff}
.section--encre .filets span{color:rgba(255,255,255,.62)}

/* ---------- 11. Équipe — traitement typographique, sans portraits ----------
   Choix assumé : pas de photos individuelles. Une liste éditoriale à filets
   vaut mieux que des portraits hétérogènes ou des images de banque. */
.equipe{border-top:1px solid var(--ligne)}
.equipe li{padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--ligne);display:grid;gap:14px}
@media(min-width:800px){
  .equipe li{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:clamp(28px,4vw,56px);align-items:start}
}
.equipe__nom{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.15;color:var(--encre);letter-spacing:-.015em}
.equipe__role{font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--rouge);margin-top:9px}
.equipe__mot{color:var(--muet);font-size:1rem;line-height:1.6}
.equipe__coord{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px}
.equipe__contact{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.93rem;font-weight:500;color:var(--encre);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid var(--ligne);transition:border-color var(--t);
}
.equipe__contact:hover{border-color:var(--encre)}
.equipe__contact svg{flex:none;color:var(--muet)}
.equipe__contact:hover svg{color:var(--rouge)}

/* ---------- 12. Avis ---------- */
.avis{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-md);padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;height:100%}
.avis__etoiles{color:var(--or);letter-spacing:2px;font-size:.95rem;margin-bottom:16px}
.avis__texte{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--encre);flex:1}
.avis__auteur{margin-top:20px;padding-top:16px;border-top:1px solid var(--ligne);font-size:.87rem;color:var(--muet)}
.note-globale{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.note-globale strong{font-family:var(--serif);font-size:2.6rem;color:var(--encre);line-height:1}

/* ---------- 13. Formulaires ---------- */
.form{display:grid;gap:18px}
.champ{display:grid;gap:7px}
.champ label{font-size:.82rem;font-weight:600;color:var(--encre);letter-spacing:.005em}
.champ input,.champ select,.champ textarea{
  width:100%;min-height:52px;padding:14px 16px;
  background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-sm);
  font-size:16px;color:var(--texte);transition:border-color var(--t),box-shadow var(--t);
}
.champ textarea{min-height:110px;resize:vertical;line-height:1.55}
.champ input::placeholder,.champ textarea::placeholder{color:var(--muet-clair)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--encre);box-shadow:0 0 0 3px rgba(14,27,46,.07);
}
.champ--duo{display:grid;gap:18px}
@media(min-width:560px){.champ--duo{grid-template-columns:1fr 1fr}}
.reassurance{display:flex;gap:10px;align-items:flex-start;font-size:.83rem;color:var(--muet);line-height:1.5}
.reassurance svg{flex:none;margin-top:2px;color:var(--muet-clair)}
.bloc-form{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-md);padding:clamp(26px,3.4vw,40px);box-shadow:var(--ombre-2)}

/* ---------- 14. Page de bien ---------- */
.galerie{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:820px){
  .galerie{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;height:clamp(420px,52vw,600px)}
  .galerie__item:first-child{grid-row:span 2}
}
.galerie__item{position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--sable-fonce);aspect-ratio:16/11}
@media(min-width:820px){.galerie__item{aspect-ratio:auto;height:100%}}
.galerie__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-lent)}
.galerie__item:hover img{transform:scale(1.03)}
.galerie__plus{
  position:absolute;right:14px;bottom:14px;background:rgba(255,255,255,.94);
  border:0;border-radius:var(--r-sm);padding:11px 17px;font-size:.85rem;font-weight:500;
  cursor:pointer;backdrop-filter:blur(6px);color:var(--encre);
}

.fiche{display:grid;gap:clamp(32px,4vw,56px)}
@media(min-width:1000px){.fiche{grid-template-columns:1fr 380px;align-items:start}}
.fiche__aside{position:sticky;top:100px;display:grid;gap:20px}

.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r-md);overflow:hidden}
@media(min-width:640px){.specs{grid-template-columns:repeat(4,1fr)}}
.specs div{background:var(--blanc);padding:22px 20px}
.specs dt{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muet);margin-bottom:7px}
.specs dd{margin:0;font-family:var(--serif);font-size:1.45rem;color:var(--encre);line-height:1.1}

.caracs{display:grid;gap:0;border-top:1px solid var(--ligne)}
@media(min-width:640px){.caracs{grid-template-columns:1fr 1fr;column-gap:48px}}
.caracs div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--ligne);font-size:.96rem}
.caracs dt{color:var(--muet)}
.caracs dd{margin:0;color:var(--encre);font-weight:500;text-align:right}

/* DPE */
.dpe{display:grid;gap:4px;max-width:340px}
.dpe__ligne{display:flex;align-items:center;gap:10px}
.dpe__lettre{
  width:34px;height:28px;border-radius:var(--r-xs);display:grid;place-items:center;
  font-size:.82rem;font-weight:700;color:#fff;flex:none;
}
.dpe__barre{height:8px;border-radius:var(--r-pill);background:var(--sable-fonce);flex:1}
.dpe__ligne[data-actif="true"] .dpe__lettre{outline:2px solid var(--encre);outline-offset:2px}
.dpe__ligne[data-actif="true"]{font-weight:600}

.conseiller{display:flex;gap:16px;align-items:center}
.conseiller__photo{width:68px;height:68px;border-radius:50%;overflow:hidden;background:var(--sable-fonce);flex:none}
.conseiller__photo img{width:100%;height:100%;object-fit:cover}

/* ---------- 15. Bandeau local ---------- */
.communes{display:flex;flex-wrap:wrap;gap:9px}
.communes li{
  border:1px solid var(--ligne);border-radius:var(--r-pill);padding:9px 18px;
  font-size:.88rem;color:var(--texte);background:var(--blanc);
}
.section--encre .communes li{border-color:var(--ligne-sombre);background:transparent;color:rgba(255,255,255,.82)}

.chiffre{display:grid;gap:6px}
.chiffre strong{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:var(--encre)}
.section--encre .chiffre strong{color:#fff}
.chiffre span{font-size:.9rem;color:var(--muet)}
.section--encre .chiffre span{color:rgba(255,255,255,.6)}

/* ---------- 16. Pied de page ---------- */
.pied{background:var(--encre);color:rgba(255,255,255,.68);padding-block:clamp(56px,7vw,84px) 0;font-size:.94rem}
.pied a{color:rgba(255,255,255,.78);text-decoration:none;transition:color var(--t)}
.pied a:hover{color:#fff}
.pied h4{color:#fff;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:600;font-family:var(--sans)}
.pied__grille{display:grid;gap:40px}
@media(min-width:760px){.pied__grille{grid-template-columns:2fr 1fr 1fr 1fr}}
.pied__liens{display:grid;gap:11px}
.pied__bas{
  margin-top:clamp(40px,5vw,64px);padding-block:26px;border-top:1px solid var(--ligne-sombre);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.84rem;color:rgba(255,255,255,.48);
}

/* ---------- 17. Barre d'appel mobile ---------- */
.appel-mobile{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ligne);
  border-top:1px solid var(--ligne);
}
.appel-mobile a{
  display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:58px;background:var(--blanc);color:var(--encre);
  text-decoration:none;font-size:.94rem;font-weight:500;
}
.appel-mobile a.principal{background:var(--encre);color:#fff}
@media(min-width:1180px){.appel-mobile{display:none}}
@media(max-width:1179px){body{padding-bottom:59px}}

/* ---------- Ruban recrutement (fixe, toutes pages sauf la page recrutement) ---------- */
.ruban-recrutement{
  position:fixed;z-index:94;text-decoration:none;
  background:var(--rouge);color:#fff;
  font-family:var(--sans);font-weight:600;letter-spacing:.02em;
  box-shadow:0 6px 24px rgba(14,27,46,.22);
  transition:background var(--t),transform var(--t);
  display:flex;align-items:center;gap:8px;
}
.ruban-recrutement:hover,.ruban-recrutement:focus-visible{background:#b31b26;color:#fff}
.ruban-recrutement svg{flex:0 0 auto}

/* Ordinateur : languette verticale collée au bord droit */
@media(min-width:1180px){
  .ruban-recrutement{
    top:50%;right:0;transform:translateY(-50%) ;
    writing-mode:vertical-rl;
    padding:20px 11px;font-size:.82rem;
    border-radius:8px 0 0 8px;
  }
  .ruban-recrutement:hover{transform:translateY(-50%) translateX(-3px)}
  .ruban-recrutement svg{transform:rotate(90deg)}
}

/* Mobile et tablette : pastille au-dessus de la barre d'appel */
@media(max-width:1179px){
  .ruban-recrutement{
    right:14px;bottom:73px;
    padding:11px 16px;font-size:.85rem;
    border-radius:999px;
  }
}
@media(prefers-reduced-motion:reduce){.ruban-recrutement{transition:none}}

/* ---------- 18. Apparition au défilement ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 620ms cubic-bezier(.22,.61,.36,1),transform 620ms cubic-bezier(.22,.61,.36,1)}
.reveal.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- 19. Utilitaires ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saut-contenu{position:absolute;left:-9999px;top:0;z-index:200;background:var(--encre);color:#fff;padding:14px 22px;border-radius:0 0 var(--r-sm) 0}
.saut-contenu:focus{left:0}
.pile{display:grid;gap:16px}
.pile-lg{display:grid;gap:26px}
.rangee{display:flex;flex-wrap:wrap;gap:12px}
.mt-l{margin-top:clamp(28px,4vw,44px)}