/* ==========================================================================
   POLICES AUTO-HÉBERGÉES
   Les fichiers sont dans le dossier /fonts/ du site. Aucune requête n'est
   envoyée vers Google : plus rapide, et aucune donnée du visiteur ne part
   vers un tiers. Licence SIL Open Font License 1.1 (voir /fonts/).
   Les pages du dossier /en/ utilisent le même dossier via ../fonts/.
   ========================================================================== */
@font-face{font-family:Lexend;font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/lexend-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lexend;font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/lexend-400-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}
@font-face{font-family:Lexend;font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/lexend-500.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lexend;font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/lexend-500-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}
@font-face{font-family:Lexend;font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/lexend-600.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Lexend;font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/lexend-600-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}
@font-face{font-family:"Libertinus Serif Bold";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/libertinus-bold.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libertinus Serif Bold";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/libertinus-bold-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}
@font-face{font-family:"Libertinus Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/libertinus-400.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libertinus Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/libertinus-400-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}

/* ==========================================================================
   Koutoubia Keys — feuille de style unique
   Charte : terracotta #c94e20 · crème #fbf7f0 · Libertinus Serif Display + Lexend
   Ce fichier est partagé par TOUTES les pages du site.
   ========================================================================== */

:root{
  /* Couleurs de marque */
  --terracotta:#c94e20;       /* aplats, gros titres, boutons */
  --terracotta-dark:#9e3517;
  --terracotta-text:#9e3517;  /* petits textes : contraste suffisant sur fond clair */
  --orange:#f47727;
  --sand:#f4e8d8;
  --cream:#fbf7f0;
  --white:#fffdf9;
  --ink:#2b211b;
  --ink-deep:#201914;
  --muted:#6f6258;
  --line:rgba(43,33,27,.13);
  --line-strong:rgba(43,33,27,.24);

  /* Dégradé de marque, relevé sur le fichier COVER fourni :
     #990012 en haut à gauche, #c22c1e au centre, #ff7a30 en bas à droite. */
  --brand-gradient:linear-gradient(135deg,#990012 0%,#c22c1e 50%,#ff7a30 100%);

  /* Typographie */
  --serif:"Libertinus Serif Display",Georgia,"Times New Roman",serif;
  --serif-bold:"Libertinus Serif Bold","Libertinus Serif Display",Georgia,serif;
  --sans:Lexend,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* Échelle d'espacement — une seule, utilisée partout */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Structure */
  --max:1180px;
  --measure:68ch;
  --radius:10px;      /* cartes, panneaux, images */
  --radius-sm:6px;    /* petits éléments */
  --radius-btn:999px; /* boutons : pilule */
  --header-h:159px;
  --rail-w:52px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}

:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px;border-radius:var(--radius)}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(34px,6.4vw,62px)}
h2{font-size:clamp(28px,4.6vw,44px);line-height:1.12}
h3{font-size:clamp(20px,2.4vw,25px);line-height:1.22}
h4{font-size:19px;line-height:1.3}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}

.lede{font-size:clamp(17px,2vw,19px);line-height:1.65;color:var(--muted);max-width:56ch}
.prose{max-width:var(--measure);color:var(--muted)}
.prose p{font-size:17px;line-height:1.75}
.prose strong{color:var(--ink);font-weight:600}
.small{font-size:13px;line-height:1.6;color:var(--muted)}

/* Libellé de catégorie — réservé aux articles, où il porte une information */
.kicker{
  display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.06em;color:var(--terracotta-text);margin-bottom:var(--s3);
}

/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--s5)}
.wrap-narrow{max-width:820px;margin-inline:auto;padding-inline:var(--s5)}
.section{padding-block:var(--s9)}
.section--tight{padding-block:var(--s8)}
.section--cream{background:var(--cream)}
.section--white{background:var(--white)}
.section--sand{background:var(--sand)}
.section--dark{background:var(--ink-deep);color:var(--white)}
.section--dark h2,.section--dark h3{color:var(--white)}
.section--dark .lede,.section--dark .prose{color:rgba(255,253,249,.72)}

.section-head{max-width:640px;margin-bottom:var(--s7)}
.section-head h2{margin-bottom:var(--s4)}

/* --------------------------------------------------------------------------
   En-tête fixe
   -------------------------------------------------------------------------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  background:rgba(251,247,240,.94);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
/* Filet du dégradé de marque, sur toute la largeur, au-dessus du bandeau */
.header::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--brand-gradient);
}
.header__inner{
  max-width:none;margin-inline:0;
  min-height:var(--header-h);padding:4px 28px 0;
  display:flex;align-items:center;gap:var(--s5);
}
.brand{
  display:flex;align-items:center;gap:6px;margin-right:auto;
  flex:0 0 auto;            /* ne rétrécit jamais sous sa taille réelle */
  overflow:hidden;          /* sécurité : rien ne peut sortir du rectangle */
  background:var(--brand-gradient);border-radius:var(--radius);
  padding:14px 24px 14px 4px;color:var(--white);
}
.brand img{width:144px;height:auto;flex:none}
.brand__name{font-family:var(--serif-bold);font-weight:700;font-size:26px;line-height:1.05;white-space:nowrap}
.brand__role{display:block;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.04em;color:rgba(255,253,249,.92);margin-top:7px;white-space:nowrap}

.nav-desk{display:flex;align-items:center;gap:var(--s5);flex-wrap:nowrap;flex:0 0 auto}
.nav-desk a{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;padding-block:6px;border-bottom:1.5px solid transparent;transition:border-color .18s,color .18s}
.nav-desk a:hover{border-bottom-color:var(--terracotta)}
.nav-desk a[aria-current="page"]{border-bottom-color:var(--terracotta);color:var(--terracotta-text)}

.header__actions{display:flex;align-items:center;gap:var(--s2);flex:none}

.lang{
  font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--radius-btn);
  padding:7px 12px;line-height:1;transition:border-color .18s,color .18s;
}
.lang:hover{color:var(--terracotta-text);border-color:var(--terracotta)}

.wa-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--terracotta);color:var(--white);
  font-size:13.5px;font-weight:600;line-height:1;
  padding:12px 18px;border-radius:var(--radius-btn);
  transition:background .18s;
}
.wa-btn:hover{background:var(--terracotta-dark)}
.wa-btn svg{width:16px;height:16px;flex:none;fill:currentColor}
.wa-btn span{white-space:nowrap}

.burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--radius-btn);
}
.burger span{display:block;position:relative;width:17px;height:1.5px;background:var(--ink);transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.5px;background:var(--ink);transition:transform .24s ease}
.burger span::before{top:-5.5px}
.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-5.5px) rotate(-45deg)}

/* Panneau de menu */
.menu{
  position:fixed;inset:var(--header-h) 0 auto 0;z-index:890;
  background:var(--cream);border-bottom:1px solid var(--line);
  max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  transform:translateY(-102%);visibility:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
}
.menu.is-open{transform:translateY(0);visibility:visible}
.menu__list{padding:var(--s4) var(--s5) var(--s6)}
.menu__list a{
  display:block;font-family:var(--serif);font-size:27px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.menu__list a:last-of-type{border-bottom:0}
.menu__foot{padding:0 var(--s5) var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3)}

/* --------------------------------------------------------------------------
   Rail réseaux sociaux — vertical, fixe, desktop et mobile
   -------------------------------------------------------------------------- */
.rail{
  position:fixed;z-index:880;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;
  background:rgba(251,247,240,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-right:0;
  border-radius:var(--radius) 0 0 var(--radius);overflow:hidden;
}
.rail a{
  width:var(--rail-w);height:var(--rail-w);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:color .18s,background .18s;
}
.rail a+a{border-top:1px solid var(--line)}
.rail a:hover{color:var(--terracotta-text);background:var(--sand)}
.rail svg{width:19px;height:19px;fill:currentColor}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:600;line-height:1;
  padding:16px 30px;border-radius:var(--radius-btn);
  transition:background .18s,color .18s,border-color .18s;
}
.btn--primary{background:var(--terracotta);color:var(--white)}
.btn--primary:hover{background:var(--terracotta-dark)}
.btn--ghost{border:1px solid var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--white)}
.btn--onDark{border:1px solid rgba(255,253,249,.35);color:var(--white)}
.btn--onDark:hover{background:var(--white);color:var(--ink-deep);border-color:var(--white)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* Lien texte souligné */
.link{
  font-size:14.5px;font-weight:600;color:var(--terracotta-text);
  border-bottom:1.5px solid currentColor;padding-bottom:2px;
  transition:color .18s;
}
.link:hover{color:var(--ink)}

/* --------------------------------------------------------------------------
   Arc de médina — le seul geste arrondi du site, utilisé avec parcimonie
   -------------------------------------------------------------------------- */
.arch{
  border-radius:50% 50% var(--radius) var(--radius) / 34% 34% var(--radius) var(--radius);
  overflow:hidden;
}
.arch img{width:100%;height:100%;object-fit:cover}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(32,25,20,.52) 0%,rgba(32,25,20,.18) 32%,rgba(32,25,20,.72) 78%,rgba(32,25,20,.9) 100%);
}
.hero__inner{
  max-width:var(--max);margin-inline:auto;width:100%;
  padding:calc(var(--header-h) + var(--s8)) var(--s5) var(--s8);
  color:var(--white);
}
.hero h1{max-width:15ch;margin-bottom:var(--s4);text-shadow:0 1px 26px rgba(32,25,20,.4)}
.hero p{max-width:50ch;font-size:clamp(16px,1.9vw,18.5px);line-height:1.6;color:rgba(255,253,249,.88);margin-bottom:var(--s6)}
.hero .btn-row{margin-bottom:var(--s5)}

/* Repères sous le hero */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.facts__grid{
  max-width:var(--max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.fact{padding:var(--s6) var(--s5);border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact__value{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);line-height:1;color:var(--terracotta);margin-bottom:var(--s2)}
.fact__label{font-size:13.5px;line-height:1.5;color:var(--muted)}

/* --------------------------------------------------------------------------
   Blocs éditoriaux (texte + image)
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center}
.split--portrait{grid-template-columns:.85fr 1fr}
.split__media{position:relative}
.split__media > picture img,.split__media > img{border-radius:var(--radius)}
.split__media .arch{aspect-ratio:3/4}
.split__body h2{margin-bottom:var(--s5)}

/* --------------------------------------------------------------------------
   Piliers
   -------------------------------------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.pillar{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6)}
.pillar__num{font-family:var(--serif);font-size:15px;color:var(--terracotta);margin-bottom:var(--s4);display:block}
.pillar h3{font-size:clamp(23px,2.9vw,30px);line-height:1.12;color:var(--terracotta);margin-bottom:var(--s4)}
.pillar p{font-size:16px;line-height:1.72;color:var(--muted);margin:0}

/* --------------------------------------------------------------------------
   Témoignages
   -------------------------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.quote{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s6);display:flex;flex-direction:column;
}
.quote blockquote{margin:0 0 var(--s5);font-size:16px;line-height:1.72;color:var(--ink)}
.quote blockquote::before{content:"";display:block;width:26px;height:2px;background:var(--terracotta);margin-bottom:var(--s4)}
.quote__meta{margin-top:auto;font-size:13.5px;line-height:1.55;color:var(--muted)}
.quote__meta strong{display:block;color:var(--ink);font-weight:600;font-size:14.5px;margin-bottom:2px}

/* --------------------------------------------------------------------------
   Calculateur
   -------------------------------------------------------------------------- */
.calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s7);align-items:start}
.calc__panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6)}
.calc__field{margin-bottom:var(--s5)}
.calc__field label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--s2)}
.calc__input{position:relative;display:flex;align-items:center}
.calc__input input{
  width:100%;font-family:var(--sans);font-size:22px;font-weight:500;color:var(--ink);
  background:var(--cream);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:15px 56px 15px 16px;
}
.calc__input input:focus{outline:none;border-color:var(--terracotta)}
.calc__input span{position:absolute;right:15px;font-size:14px;color:var(--muted);pointer-events:none}
.calc__result{background:var(--ink-deep);color:var(--white);border-radius:var(--radius);padding:var(--s5);margin-bottom:var(--s5)}
.calc__result-label{font-size:13px;color:rgba(255,253,249,.7);margin-bottom:var(--s2)}
.calc__result-value{font-family:var(--serif);font-size:clamp(34px,5vw,46px);line-height:1}
.calc__result-rate{font-size:13.5px;color:rgba(255,253,249,.7);margin-top:var(--s2)}

.calc__table{width:100%;border-collapse:collapse;font-size:14.5px}
.calc__table th{text-align:left;font-weight:600;font-size:12.5px;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--line)}
.calc__table th:nth-child(2),.calc__table td:nth-child(2){text-align:right;white-space:nowrap}
.calc__table th:last-child,.calc__table td:last-child{text-align:right;color:var(--muted);font-size:13px;white-space:nowrap}
.calc__table td{padding:13px 0;border-bottom:1px solid var(--line)}
.calc__table tr:last-child td{border-bottom:0;padding-top:16px;font-weight:600;color:var(--ink);font-size:16px}
.calc__note{margin-top:var(--s5);padding:var(--s4);background:var(--sand);border-radius:var(--radius);border-left:3px solid var(--terracotta);font-size:13px;line-height:1.6;color:var(--ink)}

/* --------------------------------------------------------------------------
   Cartes d'articles
   -------------------------------------------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.post{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);
  display:flex;flex-direction:column;transition:border-color .2s;
}
.post:hover{border-color:var(--line-strong)}
.post h3{font-size:21px;margin-bottom:var(--s3)}
.post p{font-size:15px;line-height:1.65;color:var(--muted);margin-bottom:var(--s5)}
.post .link{margin-top:auto;align-self:flex-start}

/* --------------------------------------------------------------------------
   Bande d'appel final
   -------------------------------------------------------------------------- */
.cta-band{text-align:center}
.cta-band h2{margin-bottom:var(--s4)}
.cta-band .lede{margin-inline:auto;margin-bottom:var(--s6)}
.cta-band .btn-row{justify-content:center}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.footer{background:var(--ink-deep);color:rgba(255,253,249,.7);padding-block:var(--s8) var(--s6);font-size:14px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7);margin-bottom:var(--s7)}
/* Le logo blanc seul se perdait sur le brun foncé : on reprend le bloc de marque. */
.footer__brand{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:var(--s5);
  background:var(--brand-gradient);border-radius:var(--radius);
  padding:12px 20px 12px 7px;
}
.footer__brand img{width:84px;height:auto}
.footer__brand span{font-family:var(--serif-bold);font-weight:700;font-size:23px;line-height:1;color:var(--white)}
.footer p{font-size:14px;line-height:1.7;max-width:36ch}
.footer h4{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--white);margin-bottom:var(--s4)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:10px}
.footer a{transition:color .18s}
.footer a:hover{color:var(--white)}
.footer__bottom{
  border-top:1px solid rgba(255,253,249,.16);padding-top:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;font-size:12.5px;
}
.footer__legal{display:flex;flex-wrap:wrap;gap:var(--s4)}

/* --------------------------------------------------------------------------
   Bandeau cookies
   -------------------------------------------------------------------------- */
.cookies{
  position:fixed;left:var(--s4);right:calc(var(--rail-w) + var(--s4));bottom:var(--s4);z-index:950;
  background:var(--ink-deep);color:rgba(255,253,249,.82);
  padding:var(--s5);max-width:520px;border-radius:var(--radius);
  display:none;
}
.cookies.is-open{display:block}
.cookies p{font-size:13px;line-height:1.6;margin-bottom:var(--s4)}
.cookies a{color:var(--white);text-decoration:underline}
.cookies__actions{display:flex;flex-wrap:wrap;gap:var(--s2)}
.cookies button{font-size:13px;font-weight:600;padding:12px 18px;border-radius:var(--radius-btn);line-height:1}
.cookies .is-primary{background:var(--terracotta);color:var(--white)}
.cookies .is-ghost{border:1px solid rgba(255,253,249,.35);color:var(--white)}

/* --------------------------------------------------------------------------
   Révélation au défilement — une seule orchestration, discrète
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

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

/* ==========================================================================
   GRAND ÉCRAN ÉTROIT — jusqu'à 1300px
   Le bandeau a besoin de 1228 px pour afficher le bloc de marque, les six
   liens, le bouton EN et le bouton WhatsApp. En dessous, la navigation
   horizontale laisse la place au bouton menu. Rien d'autre ne change.
   ========================================================================== */
@media (max-width:1300px){
  .nav-desk{display:none}
  .burger{display:flex}
}

/* ==========================================================================
   TABLETTE  — jusqu'à 980px
   ========================================================================== */
@media (max-width:980px){
  .nav-desk{display:none}
  .burger{display:flex}
  .section{padding-block:var(--s8)}
  .split,.split--portrait{grid-template-columns:1fr;gap:var(--s6)}
  .split__media{max-width:440px}
  .split__media .arch{aspect-ratio:4/5}
  .pillars{grid-template-columns:1fr}
  .pillar h3{font-size:26px}
  .quotes{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr 1fr}
  .calc{grid-template-columns:1fr;gap:var(--s6)}
  .facts__grid{grid-template-columns:1fr 1fr}
  .fact{border-left:0;border-top:1px solid var(--line);padding:var(--s5)}
  .fact:nth-child(-n+2){border-top:0}
  .fact:nth-child(even){border-left:1px solid var(--line)}
  .footer__grid{grid-template-columns:1fr 1fr;gap:var(--s6)}
}

/* ==========================================================================
   MOBILE — jusqu'à 640px
   ========================================================================== */
@media (max-width:640px){
  :root{--header-h:84px;--rail-w:44px}
  body{font-size:15.5px}

  .wrap,.wrap-narrow{padding-inline:var(--s4)}
  .section{padding-block:var(--s7)}
  .section--tight{padding-block:var(--s6)}
  .section-head{margin-bottom:var(--s6)}

  /* En-tête : marque + menu + WhatsApp, rien d'autre */
  .header__inner{padding:4px var(--s3) 0;gap:var(--s2)}
  .brand{gap:5px;padding:9px 15px 9px 4px}
  .brand img{width:68px;height:auto}
  .brand__name{font-size:22px}
  .brand__role{font-size:10.5px;margin-top:5px}
  .wa-btn{padding:11px 13px}
  .wa-btn span{display:none}
  .wa-btn svg{width:18px;height:18px}
  .lang{padding:7px 8px;font-size:12px}

  /* Le rail reste centré verticalement, comme sur ordinateur */
  .rail svg{width:17px;height:17px}

  .hero{min-height:92svh}
  .hero__inner{padding:calc(var(--header-h) + var(--s7)) var(--s4) var(--s7)}
  .hero h1{max-width:none}
  .hero p{margin-bottom:var(--s5)}
  .hero .btn-row{flex-direction:column;align-items:stretch;padding-right:calc(var(--rail-w) + 4px)}
  .btn{padding:16px 20px;width:100%}
  .btn-row .btn{width:100%}

  .split__media{max-width:none}
  .split__media .arch{aspect-ratio:3/4}

  .pillar{padding:var(--s5)}
  .quote{padding:var(--s5)}
  .posts{grid-template-columns:1fr}
  .post{padding:var(--s5)}

  .calc__panel{padding:var(--s5)}
  .calc__input input{font-size:19px;padding:14px 50px 14px 13px}
  .calc__table{font-size:13.5px}
  .calc__table th:last-child,.calc__table td:last-child{display:none}

  .menu__list a{font-size:24px;padding:12px 0}

  .footer{padding-block:var(--s7) var(--s6)}
  .footer__grid{grid-template-columns:1fr;gap:var(--s6)}
  .footer__bottom{flex-direction:column;gap:var(--s3)}

  .cookies{left:var(--s3);right:var(--s3);bottom:var(--s3);padding:var(--s4);max-width:none}
  .cookies__actions button{flex:1}
}

/* Très petits écrans */
@media (max-width:380px){
  :root{--header-h:77px}
  .brand{gap:4px;padding:8px 13px 8px 3px}
  .brand img{width:58px;height:auto}
  .brand__name{font-size:20px}
  .brand__role{display:none}
}

/* ==========================================================================
   MOSAÏQUE D'ILLUSTRATIONS
   Pour ajouter une photo : dupliquer un bloc <figure class="tile"> dans le HTML
   et déposer le fichier image à la racine du site. La grille s'adapte seule.
   ========================================================================== */
.mosaic{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--s4);
}
.tile{
  margin:0;position:relative;overflow:hidden;
  border-radius:var(--radius);background:var(--sand);
  aspect-ratio:3/4;
}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover img{transform:scale(1.03)}
.tile figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:var(--s6) var(--s4) var(--s4);
  font-size:13.5px;line-height:1.45;color:var(--white);
  background:linear-gradient(180deg,rgba(32,25,20,0),rgba(32,25,20,.8));
}
.tile--wide{aspect-ratio:3/4}
@media (min-width:900px){
  .tile--wide{grid-column:span 2;aspect-ratio:16/11}
  .tile--tall{grid-row:span 2;aspect-ratio:auto}
}
/* Emplacement vide en attente d'une photo */
.tile--empty{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px dashed var(--line-strong);background:transparent;
  font-size:13px;color:var(--muted);padding:var(--s4);
}

/* ==========================================================================
   FORMULAIRE
   ========================================================================== */
.form{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s7);
}
.field{margin-bottom:var(--s6)}
.field:last-of-type{margin-bottom:var(--s5)}
.field > label,.field legend{
  display:block;font-size:15px;font-weight:600;color:var(--ink);
  margin-bottom:var(--s3);padding:0;
}
.field .hint{display:block;font-weight:400;font-size:13.5px;color:var(--muted);margin-top:4px}
.req{color:var(--terracotta)}

.input,.textarea,select.input{
  width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
  background:var(--cream);border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .18s;
}
.input:focus,.textarea:focus{outline:none;border-color:var(--terracotta)}
.textarea{min-height:140px;resize:vertical;line-height:1.6}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}

fieldset{border:0;padding:0;margin:0}
.choices{display:grid;gap:var(--s2)}
.choices--2{grid-template-columns:1fr 1fr}
.choice{
  display:flex;align-items:flex-start;gap:11px;
  padding:13px 16px;border:1px solid var(--line-strong);border-radius:var(--radius);
  font-size:15px;line-height:1.4;cursor:pointer;background:var(--cream);
  transition:border-color .16s,background .16s;
}
.choice:hover{border-color:var(--muted)}
.choice input{accent-color:var(--terracotta);width:18px;height:18px;margin:1px 0 0;flex:none;cursor:pointer}
.choice:has(input:checked){border-color:var(--terracotta);background:var(--sand)}
.choice:has(input:focus-visible){outline:2px solid var(--terracotta);outline-offset:2px}

.conditional{display:none}
.conditional.is-shown{display:block}

.consent{display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.consent input{accent-color:var(--terracotta);width:18px;height:18px;margin:2px 0 0;flex:none}
.consent a{color:var(--terracotta-text);text-decoration:underline}

.form-error{
  display:none;margin-bottom:var(--s5);padding:var(--s4);
  border-radius:var(--radius);background:#fbe9e2;border:1px solid var(--terracotta);
  font-size:14px;color:var(--ink);
}
.form-error.is-shown{display:block}

.contact-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--s7);align-items:start}
.aside-card{
  background:var(--sand);border-radius:var(--radius);padding:var(--s6);
  position:sticky;top:calc(var(--header-h) + 24px);
}
.aside-card h3{font-size:22px;margin-bottom:var(--s4)}
.aside-card p{font-size:14.5px;line-height:1.65;color:var(--muted)}
.aside-card ul{list-style:none;margin:var(--s4) 0 0;padding:0;font-size:14.5px}
.aside-card li{padding:11px 0;border-top:1px solid var(--line)}

@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr}
  .aside-card{position:static}
}
@media (max-width:640px){
  .form{padding:var(--s5)}
  .grid-2{grid-template-columns:1fr}
  .choices--2{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr 1fr;gap:var(--s3)}
  .tile figcaption{font-size:12px;padding:var(--s5) var(--s3) var(--s3)}
}

/* ==========================================================================
   QUARTIERS (page La Médina)
   ========================================================================== */
.zones{border-top:1px solid var(--line-strong)}
.zone{
  display:grid;grid-template-columns:320px 1fr;gap:var(--s7);
  padding:var(--s7) 0;border-bottom:1px solid var(--line-strong);
}
.zone__side h3{margin:var(--s1) 0 var(--s3);color:var(--ink)}
.zone__places{
  font-size:14px;line-height:1.6;color:var(--terracotta-text);font-weight:500;margin:0;
}
.zone__body{max-width:56ch}
.zone__body p{font-size:16.5px}

@media (max-width:860px){
  .zone{grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) 0}
  .zone__body{max-width:none}
  .zone__body p{font-size:15.5px}
}

/* ==========================================================================
   CHRONOLOGIE (page Accompagnement)
   ========================================================================== */
.timeline{position:relative;max-width:820px}
.timeline::before{
  content:"";position:absolute;left:26px;top:14px;bottom:14px;width:2px;
  background:var(--line-strong);
}
.tstep{
  position:relative;display:grid;grid-template-columns:54px 1fr;
  gap:var(--s5);padding-bottom:var(--s6);
}
.tstep:last-child{padding-bottom:0}
.tstep__num{
  width:54px;height:54px;border-radius:50%;
  background:var(--terracotta-dark);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:22px;line-height:1;
  position:relative;z-index:1;
}
.tstep__body{padding-top:var(--s2)}
.tstep__body h3{font-size:clamp(20px,2.3vw,24px);margin-bottom:var(--s2)}
.tstep__body p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}

@media (max-width:640px){
  .timeline::before{left:21px}
  .tstep{grid-template-columns:44px 1fr;gap:var(--s4);padding-bottom:var(--s5)}
  .tstep__num{width:44px;height:44px;font-size:19px}
  .tstep__body{padding-top:6px}
  .tstep__body p{font-size:15px}
}

/* ==========================================================================
   ACTUALITÉS IMMOBILIÈRES
   ========================================================================== */
.news{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.news-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s5);display:flex;flex-direction:column;transition:border-color .2s;
}
.news-item:hover{border-color:var(--line-strong)}
.news-item .src{
  font-size:12.5px;font-weight:600;color:var(--terracotta-text);
  margin-bottom:var(--s3);
}
.news-item h3{font-size:18px;line-height:1.28;margin-bottom:var(--s3)}
.news-item p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:var(--s4)}
.news-item .link{margin-top:auto;align-self:flex-start;font-size:13.5px}

@media (max-width:980px){ .news{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .news{grid-template-columns:1fr} .news-item{padding:var(--s4)} }

/* Trait de marque sur le résultat du calculateur.
   Pseudo-élément plutôt que border-image : border-image annulerait l'arrondi. */
.calc__result{position:relative;overflow:hidden}
.calc__result::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--brand-gradient);
}
.calc__result-label,.calc__result-value,.calc__result-rate{padding-left:var(--s3)}