/* ==========================================================================
   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);

  /* Couleurs relevées sur le logo. Chacune a un emploi précis :
     - le rouge profond pour les aplats sombres et les pastilles numérotées
     - le terracotta pour les textes et les boutons (déjà défini plus haut)
     - l'orange vif uniquement en accent sur fond sombre : sur fond clair
       il descend à 2,6 de contraste et devient illisible
     - l'orange du rail est assombri pour que les icônes blanches passent
       le seuil de 3,0 exigé pour un pictogramme. */
  --brand-red:#990012;
  --brand-orange:#ff7a30;
  --rail-orange:#e2632a;
  --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:158px;
  --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);
}
/* Le bloc de marque est désormais un seul fichier vectoriel : dégradé, logo
   et textes y sont déjà dessinés. Il suffit donc de lui donner une largeur,
   et il ne peut plus déborder ni se déformer, quelle que soit la fenêtre.
   Sa largeur est bornée par l'espace laissé libre par les boutons de droite,
   ce qui règle le débordement du burger sur mobile. */
.brand{display:block;margin-right:auto;min-width:0;line-height:0}
.brand img,.brand picture{display:block;width:373px;height:auto;max-width:100%}

.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:var(--rail-orange);
  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(--white);transition:background .18s;
}
.rail a+a{border-top:1px solid rgba(255,253,249,.28)}
.rail a:hover{background:var(--terracotta-dark)}
.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;color:var(--brand-orange)}
.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;
  border-top:4px solid transparent;border-image:var(--brand-gradient) 1;
}
.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:block;margin-bottom:var(--s5);line-height:0}
.footer__brand img{width:230px;max-width:100%;height:auto}
.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}
}

/* Largeur du bloc de marque : toujours inférieure à la place laissée libre
   par les boutons de droite. C'est ce qui empêche le burger de sortir. */
@media (max-width:1023px){
  :root{--header-h:140px}
  .brand img,.brand picture{width:min(calc(100vw - 340px),320px)}
}

/* ==========================================================================
   TABLETTE  — jusqu'à 980px
   ========================================================================== */
@media (max-width:980px){
  :root{--header-h:140px}
  .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:128px;--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 img,.brand picture{width:min(calc(100vw - 140px),300px)}

  .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 */
/* Sous 420 px, la version compacte du bloc prend le relais (voir le
   <picture> dans les pages) et les boutons se resserrent. */
@media (max-width:420px){
  :root{--header-h:106px}
  .header__inner{padding:4px 10px 0;gap:6px}
  .brand img,.brand picture{width:min(calc(100vw - 128px),240px)}
  .wa-btn{padding:10px 11px}
  .wa-btn svg{width:17px;height:17px}
  .burger{width:40px;height:40px}
  .lang{padding:6px 7px;font-size:11.5px}
}

/* ==========================================================================
   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}
}
/* Aucun emplacement vide n'est affiché : si une photo manque, la grille
   se referme simplement sur les tuiles existantes. */

/* ==========================================================================
   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(--brand-red);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)}

/* ==========================================================================
   PAGE « NOS CALCULATEURS »
   Ces règles vivaient dans la page elle-même. Elles rejoignent la feuille
   commune : une seule source pour toute la mise en forme du site.
   ========================================================================== */
.calcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);align-items:start}
.ccard{min-width:0}
.ccard > h2{font-size:clamp(22px,2.4vw,27px);margin-bottom:var(--s2)}
.ccard__s{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 var(--s5);max-width:52ch}

.calcs .calc{grid-template-columns:1fr;gap:var(--s5)}
.calcs .calc__panel{padding:var(--s5)}
.calcs .calc__result{padding:var(--s4) var(--s5);margin:var(--s5) 0 var(--s4)}
.calcs .calc__result-value{font-size:clamp(28px,3.4vw,34px)}
.calcs .calc__input input{font-size:19px;padding:13px 52px 13px 14px}
.calcs .calc__table{font-size:13.5px}
.calcs .calc__table td{padding:10px 0}
.calcs .calc__table tr:last-child td{padding-top:13px;font-size:15px}
.calcs .calc__note{margin-top:var(--s4);padding:var(--s3) var(--s4);font-size:12.5px}
.calcs .calc__field{margin-bottom:var(--s4)}
#yield .calc__table td:last-child{display:table-cell;color:var(--ink);font-size:14.5px;font-weight:600;white-space:nowrap}

.yfield{margin-bottom:var(--s4)}
.yfield label{display:block;font-size:14px;font-weight:600;margin-bottom:var(--s2)}
.ybox{display:flex;gap:var(--s2)}
.ybox input{flex:1;min-width:0;font-family:var(--sans);font-size:19px;font-weight:500;color:var(--ink);background:var(--cream);border:1px solid var(--line-strong);border-radius:var(--radius);padding:13px 14px;text-align:right}
.ybox input:focus{outline:none;border-color:var(--terracotta)}
.ybox select{font-family:var(--sans);font-size:15px;color:var(--ink);background:var(--cream);border:1px solid var(--line-strong);border-radius:var(--radius);padding:0 10px;cursor:pointer}
.ybox select:focus{outline:none;border-color:var(--terracotta)}
.ypair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ypair .ybox input{font-size:16px;padding:11px 12px}

.yslider{padding:11px 0;border-bottom:1px solid var(--line)}
.yslider:first-of-type{border-top:1px solid var(--line)}
.ylab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);font-size:13.5px;color:var(--muted);line-height:1.35}
.ylab b{color:var(--ink);white-space:nowrap;font-weight:600}
.yslider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:10px 0 0;border-radius:999px;background:var(--line-strong);cursor:pointer}
.yslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--terracotta);border:0;cursor:pointer}
.yslider input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--terracotta);border:0;cursor:pointer}
.yslider input[type=range]:focus{outline:none}
.yslider input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(226,99,42,.3)}
.yslider input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 4px rgba(226,99,42,.3)}

.yreset{margin:var(--s4) 0 0;text-align:right}
.yreset button{font-family:var(--sans);font-size:12.5px;color:var(--muted);background:none;border:1px solid var(--line-strong);border-radius:var(--radius-btn);padding:6px 14px;cursor:pointer}
.yreset button:hover{border-color:var(--terracotta);color:var(--terracotta-text)}

@media (max-width:900px){.calcs{grid-template-columns:1fr;gap:var(--s7)}}
@media (max-width:480px){.ypair{grid-template-columns:1fr;gap:var(--s4)}}