/* =========================================================
  base.css
  - Variables (palette charcoal-blue)
  - Reset léger
  - Typo + layout + utilitaires
========================================================= */

:root{
  /* ===== Palette SOURCE (charcoal-blue) ===== */
  --charcoal-50:  #f0f1f5;
  --charcoal-100: #e1e4ea;
  --charcoal-200: #c3c8d5;
  --charcoal-300: #a5adc0;
  --charcoal-400: #8791ab;
  --charcoal-500: #697696;
  --charcoal-600: #545e78;
  --charcoal-700: #3f475a;
  --charcoal-800: #2a2f3c;
  --charcoal-900: #15181e;
  --charcoal-950: #0f1015;

  /* ===== Palette RÔLES =====
     Objectif: lisibilité/contraste + hiérarchie claire
  */
  --bg:    var(--charcoal-100);   /* fond global clair */
  --ink:   var(--charcoal-900);  /* texte principal */
  --muted: rgba(21,24,30,.72);   /* texte secondaire lisible sur bg clair */

  /* Surfaces */
  --card:       rgba(225,228,234,.78); /* proche 100 */
  --cardSolid:  rgba(225,228,234,.94);

  /* Lignes & ombres */
  --stroke: rgba(63,71,90,.18);         /* 700 léger */
  --shadow: 0 14px 50px rgba(15,16,21,.16);

  /* Accents (dans la même palette, mais plus "présents") */
  --accent: var(--charcoal-700);
  --accent-2: var(--charcoal-600);
  --accent-soft: rgba(105,118,150,.22); /* 500 */

  /* Focus (doit ressortir nettement sur clair ET sombre) */
  --focus: rgba(195,200,213,.95); /* 200 */

  /* Radius / layout */
  --radius: 18px;
  --radius-lg: 26px;

  --container: 1120px;
  --gutter: 22px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 700ms;

  /* Typo */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
}

/* ================= RESET ================= */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height:1.65;
  font-size: 17px;

  font-weight: 650;          /* ? plus de corps */
  letter-spacing: -0.005em;  /* ? densifie l�g�rement */

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,textarea{ font:inherit; color:inherit; }

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

/* ================= LAYOUT ================= */

.container{
  width:min(var(--container), calc(100% - (var(--gutter) * 2)));
  margin-inline:auto;
}

/* ================= TEXT ================= */

.small{ font-size:.92rem; }
.muted{ color: var(--muted); }

/* lead: un poil plus “bleuté” sans perdre le contraste */
.lead{
  font-size: 1.45rem;
  color:  rgba(225,228,234,.94); /* ~ charcoal-700 */
	letter-spacing: -0.02em;
	font-weight: 400;
  max-width: 62ch;
	line-height: 1.20;   /* 👈 réduit l’espace entre lignes */
}
.lead-sm{ font-size: 1.02rem; }

.title-xl{
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 12px;
	
	
	
}

.title-lg{
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: clamp(1.55rem, 2.4vw, 2.3rem);
  line-height: 1.15;
  margin: 0;
}

/* ================= SECTIONS ================= */

.section{
  padding: clamp(56px, 6vw, 94px) 0;
  position: relative;
  display: flow-root; /* empêche le margin-collapsing */
}


/* Light section: clair, doux, avec un peu de profondeur */
.section--light{
  background: linear-gradient(
    180deg,
    rgba(240,241,245,.98),  /* 50 */
    rgba(225,228,234,.92)   /* 100 */
  );
}

/* Tint: légère teinte bleutée/grisée */
.section--tint{
  background: linear-gradient(
    180deg,
    rgba(195,200,213,.26),  /* 200 */
    rgba(240,241,245,.98)   /* 50 */
  );
}

/* Final: sombre premium, texte clair */
.section--final{
  background: #222222;
  color: rgba(240,241,245,.96);
}

.section__head{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-bottom: 26px;
}
/* ================= SECTION TITLES ================= */

/* Centrage du header */
.section__head{
  text-align: center;
  align-items: center;
}

/* Boost taille uniquement dans les sections */
.section__head .title-xl{
  font-size: clamp(2.6rem, 5.4vw, 4.7rem); /* ~ +30% */
}

.section__head .title-lg{
  font-size: clamp(2rem, 3.1vw, 3rem); /* ~ +30% */
}

/* Sous-texte centré */
.section__sub{
  text-align: center;
	 font-size: 0.70rem;
  color:  rgba(225,228,234,.94); /* ~ charcoal-700 */
	letter-spacing: -0.02em;
	font-weight: 600;
	 letter-spacing: -0.02em;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
}

.section__sub{
  margin: 0;
  color: rgba(21,24,30,.78); /* sombre mais plus léger */
  max-width: 70ch;
}

.section--final .section__sub{
  color: rgba(240,241,245,.82);
}

/* ================= GRID ================= */

.grid-2{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 18px;
}

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



/* =========================================================
   HERO � Vignettes (fixes �cran, bas droite)
========================================================= */

.hero{
  position: relative;
  overflow: hidden;
}

/* conteneur en bas � droite (30px du bas de l'�cran) */
.hero__thumbs{
  position: fixed;
  right: 100px;
  bottom: 30px;              /* ? A: 30px du bas de l��cran */
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* chaque vignette */
.hero__thumb{
  width: 200px;
  height: 100px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

/* (optionnel) images quand tu voudras */
.hero__thumb--1{ background: url("../media/avantagesfiscaux001.webp") center/cover no-repeat; }
.hero__thumb--2{ background: url("../media/avantagesfiscaux002.webp") center/cover no-repeat; }

/* Mobile: on masque */
@media (max-width: 900px){
  .hero__thumbs{ display:none; }
}


/* Mentions l�gales � petits compl�ments */
.modal__h4{
  margin: 14px 0 8px;
  font-size: 15px;
  color: rgba(255,255,255,.92);
}

.modal__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.modal__list li{
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.86);
}

.modal__list i{
  color: var(--accent, #00b4d8);
  font-size: 18px;
}
/* =========================================================
  MODAL � Privacy (coh�rent design : glass + accent)
========================================================= */
.footer__link{
  color:#fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity:.9;
}
.footer__link:hover{ opacity:1; }
.footer__sep{ margin: 0 .6rem; opacity:.55; }

.modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* activ� en JS */
}

.modal.is-open{ display: block; }

.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(3, 7, 18, .72);
  backdrop-filter: blur(6px);
}

.modal__dialog{
  position: relative;
  width: min(980px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  margin: 14px auto;
  overflow: hidden;

  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);

  background: rgba(12, 18, 35, .78);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.modal__head{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.modal__icon{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}
.modal__icon i{ font-size: 20px; color: var(--accent, #00b4d8); }

.modal__titles{ flex:1; min-width: 0; }
.modal__title{
  margin: 0;
  font-size: clamp(18px, 2vw, 24px);
  color: #fff;
  letter-spacing: .2px;
}
.modal__sub{
  margin: 4px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 14px;
}

.modal__close{
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius: 12px;
  width: 40px; height: 40px;
  display:grid; place-items:center;
  cursor:pointer;
}
.modal__close:hover{ background: rgba(255,255,255,.10); }

.modal__body{
  padding: 16px;
  overflow: auto;
  max-height: calc(100vh - 220px);
}

.modal__card{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.modal__h3{
  margin: 0 0 10px;
  font-size: 18px;
  color: #fff;
}
.modal__muted{ color: rgba(255,255,255,.65); font-weight: 400; }

.modal__meta{
  display:grid;
  gap: 8px;
  padding: 12px 12px;
  margin: 12px 0 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.modal__meta .k{ color: rgba(255,255,255,.65); }
.modal__meta .v{ color: rgba(255,255,255,.92); }

.modal__text p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.86);
  line-height: 1.65;
  font-size: 15px;
}

.modal__foot{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Emp�che scroll body quand modal ouverte */
body.is-modal-open{
  overflow: hidden;
}