/* ============================================================
   SITE VITRINE — header, hero, sections, FAQ, contact, footer
   ============================================================ */
/* ==================== SITE MARKETING ====================

   EN-TÊTE — marque à gauche, navigation serrée, actions à droite.

   Ce qu'il a fallu corriger, et pourquoi :

   1. la marque se faisait comprimer. Les liens, trop larges pour la place
      restante, poussaient le bloc de marque jusqu'à ce que « La maison » se
      replie par-dessus le logo. D'où `flex-shrink:0` sur la marque et
      `white-space:nowrap` partout où un libellé peut se couper ;
   2. le fond de l'état défilé était translucide à 92 %. Le héros passait au
      travers et le liseré du haut prenait la couleur de ce qui défilait
      dessous — la bande qui paraissait cassée ;
   3. « Connexion » apparaissait deux fois, parce que le lien réservé au
      tiroir mobile vivait dans la même liste que les liens de navigation.
      Les actions sont désormais dans deux blocs distincts qui ne sont jamais
      visibles ensemble : `.nav-panel-foot` sur téléphone, `.nav-cta` ailleurs.

   Le conteneur de l'en-tête est plus large que celui des sections : la marque
   se pose près du bord de la page, pas au bord de la colonne de texte. */

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:transparent;padding:20px 0;
  transition:background .35s,box-shadow .35s,padding .35s;
}
.site-header.scrolled{background:#0A1826;box-shadow:0 1px 0 var(--border-dark);padding:11px 0}
@supports (backdrop-filter:blur(10px)){
  .site-header.scrolled{background:rgba(10,24,38,.9);backdrop-filter:blur(16px) saturate(140%)}
}
.site-header .container{
  max-width:1460px;padding:0 clamp(18px,2.6vw,40px);
  display:flex;align-items:center;gap:clamp(20px,3vw,48px);
}

/* ---- Navigation ----
   Serrée et alignée à gauche, juste après la marque : centrée, elle donnait
   l'impression d'un bloc qui flotte entre deux murs. `flex:1` lui laisse la
   place restante et `min-width:0` l'autorise à la rendre. */
.nav-panel{flex:1;min-width:0;display:flex;align-items:center}
.nav-panel-head,.nav-panel-foot{display:none}
.nav-links{display:flex;align-items:center;gap:clamp(13px,1.75vw,28px);min-width:0}
.nav-links a{
  font-size:13.5px;color:rgba(255,255,255,.72);letter-spacing:.01em;
  white-space:nowrap;padding:6px 0;position:relative;transition:color .2s;
}
.nav-links a:hover{color:#fff}
/* Un filet d'or sous le lien survolé : la navigation d'un site de patrimoine
   se signale, elle ne clignote pas. */
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold-light);transform:scaleX(0);transform-origin:left;
  transition:transform .25s;
}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-btn{padding:10px 18px;font-size:12.5px;white-space:nowrap}
.nav-burger{
  display:none;color:#fff;font-size:24px;flex-shrink:0;
  width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px;
}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;background:radial-gradient(ellipse 120% 70% at 15% 0%,#132C46 0%,var(--navy) 55%,#081422 100%);overflow:hidden;padding:140px 0 100px}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(233,225,197,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.4}
.hero-seal{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:560px;height:560px;opacity:.16}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero-eyebrow{color:var(--gold-light)}
.hero-eyebrow::before{background:var(--gold-light)}
.hero h1{font-size:clamp(38px,5vw,60px);color:#fff;font-weight:400;margin:22px 0 24px;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--gold-pale)}
.hero p.lead{font-size:17px;color:rgba(237,234,226,.72);max-width:520px;margin-bottom:36px;font-weight:300}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:56px}
.hero-stats{display:flex;gap:44px;flex-wrap:wrap}
.hstat-num{font-family:var(--font-d);font-size:26px;color:#fff;font-weight:500}
.hstat-label{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.hero-card{background:rgba(255,255,255,.04);border:1px solid rgba(233,225,197,.16);border-radius:var(--radius-lg);padding:34px;backdrop-filter:blur(6px)}
.hero-card-top{display:flex;align-items:center;gap:12px;margin-bottom:22px;padding-bottom:20px;border-bottom:1px solid rgba(233,225,197,.12)}
.hero-card-top .seal-mini{width:34px;height:34px}
.hero-card-top div strong{color:#fff;font-family:var(--font-d);font-size:15px;display:block}
.hero-card-top div span{color:rgba(255,255,255,.45);font-size:11px}
.hero-flow{display:flex;flex-direction:column;gap:0}
.hf-step{display:flex;gap:14px;padding:14px 0;position:relative}
.hf-step:not(:last-child)::after{content:'';position:absolute;left:15px;top:44px;bottom:-6px;width:1px;background:rgba(233,225,197,.18)}
.hf-num{width:31px;height:31px;border-radius:50%;border:1px solid var(--gold-light);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-m);font-size:12px;flex-shrink:0;background:var(--navy)}
.hf-step strong{color:#fff;font-size:13.5px;font-weight:500;display:block;margin-bottom:2px}
.hf-step span{color:rgba(255,255,255,.5);font-size:12px}

/* SECTION generic */
.section{padding:110px 0}
.section-tight{padding:70px 0}
.section-navy{background:var(--navy);color:#fff}
.section-navy h2,.section-navy h3{color:#fff}
.section-navy .card-title,.section-navy strong{color:#fff}
.section-head{max-width:640px;margin-bottom:60px}
.section-head h2{font-size:clamp(28px,3.4vw,42px);margin-top:16px;font-weight:400}
.section-head p{color:var(--muted);font-size:15.5px;margin-top:16px;max-width:560px}
.section-navy .section-head p{color:rgba(237,234,226,.62)}
.section-foot{margin-top:56px}

/* LOGOS STRIP */
.trust-strip{padding:26px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-strip .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.trust-item{font-family:var(--font-m);font-size:11px;letter-spacing:.08em;color:var(--hint);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.trust-item i{color:var(--gold)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.about-figure{position:relative;background:var(--navy);border-radius:var(--radius-lg);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.about-figure svg{width:46%;color:var(--gold);opacity:.85}
.about-figure::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 40%,rgba(169,129,44,.18) 100%)}
.about-quote{font-family:var(--font-d);font-size:22px;font-style:italic;color:var(--title);line-height:1.5;margin-bottom:22px}
.about-body p{color:var(--muted);font-size:15px;margin-bottom:16px}
.about-signoff{margin-top:26px;display:flex;align-items:center;gap:14px}
.about-signoff .avatar{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:16px}
.about-signoff strong{display:block;font-size:13.5px;color:var(--title)}
.about-signoff span{font-size:12px;color:var(--muted)}

/* SERVICES */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.svc-card{background:var(--card);padding:36px 30px;transition:background .25s}
.svc-card:hover{background:var(--ivory-2)}
.svc-icon{width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:22px}
.svc-card h3{font-size:18px;margin-bottom:10px;font-weight:500}
.svc-card p{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.svc-link{font-size:12.5px;color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:6px}

/* FIDEICOMISO */
.fid-wrap{background:var(--navy);border-radius:var(--radius-lg);position:relative;overflow:hidden}
.fid-top{position:relative;padding:70px 60px 50px;border-bottom:1px solid rgba(233,225,197,.12)}
.fid-seal-bg{position:absolute;left:-40px;bottom:-60px;width:280px;height:280px;color:var(--gold);opacity:.08}
.fid-top .container-inner{position:relative;z-index:1;max-width:760px}
.fid-top h2{color:#fff;font-size:clamp(26px,3vw,38px);margin:16px 0 20px}
.fid-top p{color:rgba(237,234,226,.68);font-size:15.5px;margin-bottom:14px}
.fid-actors{padding:56px 60px 60px}
.fa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.fa-grid::before{content:'';position:absolute;top:34px;left:16%;right:16%;height:1px;background:repeating-linear-gradient(90deg,rgba(233,225,197,.35) 0 6px,transparent 6px 12px)}
.fa-item{position:relative;text-align:center;padding:0 16px}
.fa-num{width:68px;height:68px;border-radius:50%;background:var(--navy);border:1px solid var(--gold-light);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:22px;margin:0 auto 18px;position:relative;z-index:1}
.fa-item h4{color:#fff;font-size:16px;margin-bottom:6px}
.fa-item .fa-role{color:var(--gold-light);font-size:11px;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:10px}
.fa-item p{color:rgba(237,234,226,.6);font-size:13px}
.fid-types{padding:0 60px 66px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ft-card{background:rgba(255,255,255,.03);border:1px solid rgba(233,225,197,.14);border-radius:var(--radius);padding:22px 18px}
.ft-card i{color:var(--gold-light);font-size:22px;margin-bottom:12px;display:block}
.ft-card strong{color:#fff;font-size:13.5px;display:block;margin-bottom:6px}
.ft-card span{color:rgba(237,234,226,.55);font-size:12px}
/* ---- Les deux parcours ----
   Deux colonnes égales : ni l'une ni l'autre n'est la voie principale, et
   c'est précisément ce que la mise en page doit dire. */
.fid-paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 60px 46px}
.fid-path{
  background:rgba(255,255,255,.03);border:1px solid rgba(233,225,197,.14);
  border-radius:var(--radius);padding:26px 24px;
}
.fid-path-icon{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(233,225,197,.07);border:1px solid rgba(233,225,197,.2);
  color:var(--gold-light);font-size:21px;margin-bottom:18px;
}
.fid-path h3{color:#fff;font-size:18px;margin-bottom:10px}
.fid-path p{color:rgba(237,234,226,.6);font-size:13.5px;line-height:1.6;margin-bottom:16px}
.fid-path-meta{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-light);opacity:.8;
}
.fid-path-meta i{font-size:14px}

.fid-cta{padding:44px 60px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fid-cta h3{color:#fff;font-size:20px;margin-bottom:6px}
.fid-cta p{color:rgba(237,234,226,.6);font-size:13.5px}

@media(max-width:900px){
  .about-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .fa-grid{grid-template-columns:1fr;gap:34px}
  .fa-grid::before{display:none}
  .fid-types{grid-template-columns:1fr 1fr}
  .fid-paths{grid-template-columns:1fr}
  .fid-top,.fid-actors,.fid-types,.fid-paths,.fid-cta{padding-left:28px;padding-right:28px}
}

/* BANKING PREVIEW */
.bank-preview{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center}
/* L'appel à l'action prend les deux colonnes et se centre dessous. `1 / -1`
   plutôt qu'un nombre : la grille passe à une seule colonne sous 1000 px, et
   `1 / 3` y deviendrait une piste implicite au lieu de la pleine largeur. */
.bp-cta{grid-column:1 / -1;display:flex;justify-content:center;margin-top:16px}
.bp-list{margin-top:26px;display:flex;flex-direction:column;gap:18px}
.bp-item{display:flex;gap:14px;align-items:flex-start}
.bp-item i{color:var(--gold-light);font-size:19px;margin-top:2px}
.bp-item strong{display:block;color:#fff;font-size:14px;margin-bottom:3px}
.bp-item span{color:rgba(237,234,226,.6);font-size:13px}
.bp-mock{background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.bp-mock-bar{background:var(--navy-soft);padding:12px 18px;display:flex;gap:8px}
.bp-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.bp-mock-body{padding:24px}
.bp-balance{background:linear-gradient(135deg,var(--navy) 0%,#1B3049 60%,#26456A 100%);border-radius:var(--radius);padding:22px;color:#fff;margin-bottom:16px}
.bp-balance span{font-size:11px;color:rgba(255,255,255,.55)}
.bp-balance div{font-family:var(--font-d);font-size:28px;margin-top:6px}
.bp-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.bp-row:last-child{border:none}
.bp-row .r-name{color:var(--ink);font-weight:500}
.bp-row .r-cat{color:var(--hint)}
.bp-row .r-amt{font-family:var(--font-m)}

/* TEAM */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.team-card{text-align:center}
.team-avatar{width:100%;aspect-ratio:1;border-radius:var(--radius-lg);background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;overflow:hidden}
.team-avatar span{font-family:var(--font-d);font-size:34px;color:var(--gold-light)}
.team-avatar::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,transparent 50%,rgba(169,129,44,.22) 100%)}
.team-card h4{font-size:15.5px;margin-bottom:4px}
.team-card span{font-size:12px;color:var(--muted)}

/* FAQ */
.faq-list{max-width:820px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:22px 4px;cursor:pointer;font-size:15px;font-weight:500;color:var(--title)}
.faq-q i{color:var(--gold);transition:transform .25s;font-size:18px}
.faq-item.open .faq-q i{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:340px}
.faq-a p{padding:0 4px 22px;color:var(--muted);font-size:13.5px;max-width:640px}

/* CONTACT + FOOTER */
.contact-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px}
.contact-info h2{margin-bottom:16px}
.contact-info p{color:var(--muted);font-size:14.5px;margin-bottom:26px;max-width:420px}
.ci-row{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start}
.ci-row i{color:var(--gold);font-size:19px;margin-top:2px}
.ci-row strong{display:block;font-size:13.5px}
.ci-row span{font-size:13px;color:var(--muted)}
.contact-form{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:34px}
.fg{margin-bottom:16px}
.fl{display:block;font-size:12px;font-weight:500;color:var(--title);margin-bottom:7px}
.fi{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13.5px;background:var(--ivory);color:var(--ink);transition:border-color .2s}
.fi:focus{border-color:var(--gold-light);background:var(--card)}
textarea.fi{resize:vertical;min-height:90px}

footer{background:var(--navy);color:rgba(237,234,226,.6);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(233,225,197,.1)}
.footer-brand .brand-name{color:#fff}
.footer-brand p{font-size:13px;margin-top:16px;max-width:280px;color:rgba(237,234,226,.5)}
.footer-col h5{color:#fff;font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.footer-col a{display:block;font-size:13px;color:rgba(237,234,226,.55);margin-bottom:11px}
.footer-col a:hover{color:#fff}
.footer-bottom{padding-top:24px;display:flex;justify-content:space-between;font-size:12px;color:rgba(237,234,226,.4);flex-wrap:wrap;gap:10px}

/* ============================================================
   RESPONSIVE DU SITE VITRINE

   Le site était dessiné pour un large écran et pour lui seul : héros sur deux
   colonnes jusqu'en bas de l'échelle, sceau décoratif débordant de la page,
   sections gardant 110 px de respiration sur un écran de 375 px.

   Le principe de la version mobile n'est pas « la même page en plus étroit ».
   Sur téléphone on lit une colonne, on fait défiler beaucoup, et l'on vise
   avec le pouce. Chaque bloc a donc été repensé plutôt que rétréci : le menu
   devient un panneau plein écran, le héros se lit d'un trait, les grilles se
   changent en listes, et les séries de chiffres en paires encadrées.
   ============================================================ */

/* ---- 1140 px : le menu passe en panneau ----
   Sept liens, deux boutons et l'interrupteur cessent de tenir ici. Le panneau
   est un plein écran et non un tiroir de 300 px : sur téléphone, une
   navigation qui laisse voir la page derrière elle invite à viser à côté. */
@media(max-width:1140px){
  .nav-burger{display:flex}
  .nav-cta .btn{display:none}

  /* `.nav-panel` passe en `position:fixed` ci-dessous et SORT DONC DU FLUX.
     C'est lui qui portait le `flex:1` poussant les actions vers la droite :
     sans remplaçant, la marque et le bouton du menu se retrouvaient collés
     l'un à l'autre au bord gauche, le bouton flottant au milieu de la barre.
     `margin-left:auto` rend ce rôle à `.nav-cta`. */
  .site-header .container{gap:14px}
  .nav-cta{margin-left:auto}

  /* La marge négative alignait optiquement l'icône sur le bord du contenu
     quand le bouton était seul. Il ne l'est plus : elle le ferait déborder du
     rail de la page, à côté du sélecteur de langue. */
  .nav-burger{margin-right:0}

  .nav-panel{
    position:fixed;inset:0;z-index:210;
    display:flex;flex-direction:column;align-items:stretch;
    background:linear-gradient(170deg,#12283F 0%,var(--navy) 45%,#07131F 100%);
    padding:0;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.22,.8,.3,1);
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;
  }
  .nav-panel.open{transform:translateX(0);visibility:visible}

  /* Grain de sceau, comme le héros : le panneau appartient au même monde. */
  .nav-panel::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(233,225,197,.055) 1px,transparent 1px);
    background-size:26px 26px;
  }

  .nav-panel-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px clamp(18px,5vw,28px);
    border-bottom:1px solid rgba(233,225,197,.12);position:relative;
  }
  .nav-panel-head .brand-name{font-size:18px}
  .nav-panel-close{
    width:44px;height:44px;margin-right:-10px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:rgba(255,255,255,.7);font-size:24px;transition:all .2s;
  }
  .nav-panel-close:hover{color:#fff;background:rgba(255,255,255,.07)}

  /* Les liens deviennent des rangées : pleine largeur, 56 px de haut, un
     numéro discret pour donner du rythme à une liste qui, sans lui, n'est
     qu'un empilement. */
  .nav-links{
    flex:1;flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(18px,5vw,28px);position:relative;counter-reset:navi;
  }
  .nav-links a{
    display:flex;align-items:center;
    font-family:var(--font-d);font-size:17px;font-weight:400;
    color:rgba(255,255,255,.85);
    padding:17px 0;border-bottom:1px solid rgba(233,225,197,.09);
  }
  .nav-links a::after{display:none}
  .nav-links a::before{
    content:counter(navi,decimal-leading-zero);counter-increment:navi;
    font-family:var(--font-m);font-size:10.5px;color:var(--gold-light);
    opacity:.6;margin-right:16px;letter-spacing:.06em;
  }
  .nav-links a:active{color:var(--gold-pale)}

  .nav-panel-foot{
    display:flex;flex-direction:column;gap:11px;position:relative;
    padding:20px clamp(18px,5vw,28px) calc(24px + env(safe-area-inset-bottom));
    border-top:1px solid rgba(233,225,197,.12);
    background:rgba(7,19,31,.45);
  }
  .nav-panel-theme{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:6px;padding-top:14px;border-top:1px solid rgba(233,225,197,.09);
  }
  .nav-panel-theme span{
    font-family:var(--font-m);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(255,255,255,.4);
  }
  /* L'interrupteur du panneau remplace celui de la barre, il ne s'y ajoute
     pas : deux interrupteurs du même réglage sur un même écran, c'est le
     doublon que l'on vient de retirer ailleurs. */
  .nav-cta .theme-switch{display:none}
}
@media(min-width:1141px){
  .nav-burger,.nav-panel-close{display:none}
  .nav-panel-theme{display:none}
}

/* Entre 1141 et 1320 px, la barre porte déjà sept liens, l'interrupteur de
   thème et deux boutons : le sélecteur de langue y ajoute sa part. Le code à
   deux lettres tombe, le drapeau reste — c'est lui qu'on lit de toute façon.
   Sans cela, la navigation se met à déborder juste au-dessus du point de
   bascule, là où personne ne pense à vérifier. */
@media(min-width:1141px) and (max-width:1320px){
  .lang-code{display:none}
  .lang-btn{padding:7px 9px;gap:5px}
}

/* ---- 1000 px : le héros se déplie ----
   C'est le palier qui manquait le plus : le héros restait sur deux colonnes
   jusqu'en bas de l'échelle. */
@media(max-width:1000px){
  .hero{min-height:0;padding:112px 0 70px}
  .hero .container{grid-template-columns:1fr;gap:42px}
  .hero-seal{right:-180px;width:420px;height:420px;opacity:.1}
  .hero h1{font-size:clamp(32px,6.4vw,46px)}
  .hero p.lead{max-width:none}
  .hero-actions{margin-bottom:40px}
  .hero-stats{gap:26px 40px}
  .hero-card{padding:28px}
  .bank-preview,.contact-wrap{grid-template-columns:1fr}
  .bp-mock{order:-1}
}

@media(max-width:900px){
  .section{padding:74px 0}
  .section-tight{padding:52px 0}
  .section-head{margin-bottom:40px}
  .section-foot{margin-top:38px}
  .team-grid{grid-template-columns:1fr 1fr;gap:20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
  .about-grid{gap:40px}
  .about-figure{aspect-ratio:16/10;max-height:320px}
  .about-figure svg{width:28%}
}

/* ============================================================
   720 px — LA VERSION TÉLÉPHONE

   Ici on ne rétrécit plus, on redessine. Trois partis pris :

   • une seule colonne, sans exception, et des blocs qui vont d'un bord à
     l'autre plutôt que de flotter au centre ;
   • une échelle typographique à part. Un titre de 60 px réduit
     proportionnellement donne 28 px serrés et illisibles, alors qu'un titre
     pensé pour 375 px se pose à 34 px avec de l'air autour ;
   • toute action principale occupe la largeur. Un bouton de 140 px au milieu
     d'un écran de 375 px se rate une fois sur trois.
   ============================================================ */
@media(max-width:720px){
  /* ---- En-tête ----
     La barre est opaque dès le départ, sans attendre le défilement : le héros
     passe dessous, et une barre translucide laisse lire un texte qui bouge. */
  .site-header{padding:14px 0;background:rgba(10,24,38,.72)}
  .site-header.scrolled{padding:10px 0}
  .brand{gap:10px;min-width:0}
  .brand-mark{width:32px;height:32px}
  .brand-name{font-size:17px}

  /* ---- Langue et menu, sur téléphone ----
     Les deux restent côte à côte et à portée du pouce, à droite. Le code de
     langue tombe sous 380 px — le drapeau suffit à dire laquelle est active,
     et deux caractères de plus poussaient le bouton du menu hors du rail. */
  .nav-cta{gap:6px}
  .lang-btn{padding:6px 9px;gap:6px}
  .lang-menu{min-width:180px}

  /* ---- Héros ---- */
  .hero{padding:96px 0 52px;min-height:0}
  .hero-seal{display:none}
  .hero .container{gap:34px}
  .eyebrow{font-size:10px;letter-spacing:.12em}
  .hero h1{font-size:clamp(30px,8.6vw,38px);margin:18px 0;line-height:1.18}
  .hero p.lead{font-size:15.5px;margin-bottom:28px}
  .hero-actions{gap:10px;margin-bottom:38px;flex-direction:column}
  .hero-actions .btn{width:100%}

  /* Les quatre chiffres passent en paires encadrées : alignés en colonne, ils
     s'étiraient sur un écran entier pour quatre lignes de rien. */
  .hero-stats{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    background:rgba(233,225,197,.14);
    border:1px solid rgba(233,225,197,.14);border-radius:var(--radius);
    overflow:hidden;
  }
  .hero-stats > div{background:#0C1C2D;padding:16px 14px}
  .hstat-num{font-size:20px}
  .hstat-label{font-size:9.5px;letter-spacing:.07em}

  .hero-card{padding:22px 18px;border-radius:var(--radius)}
  .hf-step{padding:12px 0}
  .hf-step strong{font-size:13px}

  /* ---- Bandeau de confiance : une liste, pas une ligne qui se casse ---- */
  .trust-strip{padding:18px 0}
  .trust-strip .container{display:grid;grid-template-columns:1fr;gap:11px}
  .trust-item{font-size:10.5px;line-height:1.4;align-items:flex-start}
  .trust-item i{font-size:15px;margin-top:-1px}

  /* ---- Sections ---- */
  .section{padding:56px 0}
  .section-head{margin-bottom:30px}
  .section-head h2{font-size:clamp(25px,7.4vw,32px);margin-top:12px}
  .section-head p{font-size:14.5px;margin-top:12px}

  /* ---- La maison ---- */
  .about-grid{gap:28px}
  .about-figure{aspect-ratio:2/1;max-height:200px;border-radius:var(--radius)}
  .about-figure svg{width:22%}
  .about-quote{font-size:19px;line-height:1.45}
  .about-body p{font-size:14.5px}
  .about-signoff{margin-top:22px}

  /* ---- Services : des cartes empilées ---- */
  .svc-grid{grid-template-columns:1fr;border-radius:var(--radius)}
  .svc-card{padding:26px 20px}
  .svc-icon{width:40px;height:40px;font-size:18px;margin-bottom:16px}
  .svc-card h3{font-size:17px}

  /* ---- Fideicomiso ---- */
  .fid-wrap{border-radius:var(--radius)}
  .fid-top{padding:40px 20px 32px}
  .fid-top h2{font-size:clamp(23px,6.6vw,29px)}
  .fid-top p{font-size:14.5px}
  .fid-seal-bg{width:170px;height:170px;left:-56px;bottom:-40px}
  .fid-actors{padding:34px 20px 38px}
  .fa-grid{gap:26px}
  /* Les trois acteurs deviennent des rangées, rond à gauche et texte à
     droite : centrés et empilés, ils perdaient la moitié de la largeur. */
  /* Quatre enfants — la pastille, le titre, le rôle, le paragraphe — dans une
     grille à deux colonnes. Le remplissage automatique envoyait le rôle et le
     paragraphe sur la deuxième rangée, dont la première cellule ne fait que
     52 px : le texte s'y affichait un mot par ligne. La pastille enjambe donc
     les trois rangées, et les textes gardent la colonne large. */
  .fa-item{text-align:left;padding:0;display:grid;grid-template-columns:52px 1fr;gap:2px 16px;align-items:start}
  .fa-num{width:52px;height:52px;font-size:18px;margin:0;grid-column:1;grid-row:1 / span 3}
  .fa-item h4{font-size:15px;grid-column:2;grid-row:1}
  .fa-item .fa-role{margin-bottom:6px;grid-column:2;grid-row:2}
  .fa-item p{font-size:13px;grid-column:2;grid-row:3}
  .fid-types{grid-template-columns:1fr;padding:0 20px 38px;gap:10px}
  /* La carte a TROIS enfants — l'icône, le titre, la description — et non
     deux. Sans placement explicite, le remplissage automatique envoyait la
     description sur la deuxième rangée, dans la colonne de 34 px réservée à
     l'icône : le texte s'y affichait un mot par ligne.
     L'icône enjambe donc les deux rangées, et les deux textes prennent la
     colonne large. */
  .ft-card{display:grid;grid-template-columns:34px 1fr;gap:4px 14px;align-items:start;padding:16px}
  .ft-card i{margin:0;font-size:20px;grid-column:1;grid-row:1 / span 2;align-self:start}
  .ft-card strong{grid-column:2;grid-row:1;margin-bottom:0}
  .ft-card span{grid-column:2;grid-row:2}
  .fid-paths{grid-template-columns:1fr;gap:12px;padding:0 20px 30px}
  .fid-path{padding:22px 18px}
  .fid-path h3{font-size:16.5px}
  .fid-cta{padding:26px 20px;flex-direction:column;align-items:stretch;gap:18px}
  .fid-cta .btn{width:100%}

  /* ---- Aperçu bancaire ---- */
  .bank-preview{gap:34px}
  .bp-mock{border-radius:var(--radius)}
  .bp-mock-body{padding:18px}
  .bp-balance{padding:18px}
  .bp-balance div{font-size:23px}
  .bp-row{font-size:12px;gap:12px}
  .bp-item strong{font-size:13.5px}

  /* ---- Équipe ---- */
  .team-grid{grid-template-columns:1fr 1fr;gap:14px}
  .team-avatar{border-radius:var(--radius);margin-bottom:11px}
  .team-avatar span{font-size:25px}
  .team-card h4{font-size:14px;line-height:1.25}
  .team-card span{font-size:11px}

  /* ---- FAQ : des cartes, pas des lignes ----
     Sur une page étroite, une simple bordure basse ne donne plus à voir ce
     qui est cliquable. */
  .faq-list{display:flex;flex-direction:column;gap:10px}
  .faq-item{
    border:1px solid var(--border);border-radius:var(--radius);
    background:var(--card);overflow:hidden;
  }
  .faq-q{padding:16px;font-size:14.5px;gap:14px;align-items:flex-start;line-height:1.4}
  .faq-q i{margin-top:2px;flex-shrink:0}
  .faq-a p{padding:0 16px 16px;font-size:13.5px}
  .faq-item.open .faq-a{max-height:460px}

  /* ---- Contact ---- */
  .contact-wrap{gap:34px}
  .contact-info p{font-size:14px;margin-bottom:22px}
  .ci-row{margin-bottom:15px}
  .contact-form{padding:22px 18px;border-radius:var(--radius)}

  /* ---- Pied de page ---- */
  footer{padding:44px 0 20px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px 18px;padding-bottom:26px}
  .footer-brand{grid-column:1 / -1}
  .footer-brand p{max-width:none;font-size:12.5px}
  .footer-col h5{margin-bottom:12px}
  .footer-col a{margin-bottom:9px}
  .footer-bottom{flex-direction:column;gap:6px;font-size:11.5px}
}

/* ---- 380 px : les plus petits téléphones ---- */
@media(max-width:380px){
  .hero-stats{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .brand-name{font-size:16px}
  .fa-item{grid-template-columns:44px 1fr;gap:13px}
  .fa-num{width:44px;height:44px;font-size:16px}

  /* Le drapeau dit déjà quelle langue est active : les deux lettres du code
     n'ajoutent rien et poussaient le bouton du menu hors du rail. */
  .lang-code,.lang-caret{display:none}
  .lang-btn{padding:7px}
}

/* Lien de la section en cours — posé par l'observateur dans site.js. Il
   passait par un style en ligne, que le panneau mobile héritait ensuite
   au mauvais moment. */
.nav-links a.is-current{color:#fff}
.nav-links a.is-current::after{transform:scaleX(1)}
@media(max-width:1140px){
  .nav-links a.is-current{color:var(--gold-pale)}
  .nav-links a.is-current::before{opacity:1}
}

/* ============================================================
   LE FONDS FIDUCIAIRE — section #fonds

   Deux côtés qui doivent se lire comme un seul programme. Tout le travail
   visuel tient à ça : le circuit au-dessus les relie, les deux cartes ont la
   même hauteur et la même forme, et seul le contenu diffère. Les présenter
   dans deux décors différents ferait croire à deux offres sans rapport — ce
   qui est exactement l'erreur que la refonte corrige.

   Aucune couleur écrite en dur : les jetons de base.css portent déjà les deux
   thèmes, et un code hexadécimal posé ici ne basculerait pas en sombre.
   ============================================================ */

/* ---- Le circuit ----
   Cinq actes, une bande. Les chevrons sont en ::after pour qu'aucun ne pende
   en fin de ligne quand la bande se replie, et ils disparaissent dès que la
   grille passe à deux colonnes : une flèche qui pointe vers le bas de l'écran
   ment sur l'ordre de lecture. */
.fn-cycle{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px 26px;
}
.fn-cycle-step{position:relative;text-align:center;padding:0 6px}
.fn-cycle-ico{
  width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;font-size:19px;
  margin:0 auto 14px;
}
.fn-cycle-step strong{
  display:block;font-family:var(--font-d);font-size:15px;font-weight:500;
  color:var(--title);margin-bottom:7px;
}
.fn-cycle-step > span:not(.fn-cycle-ico){display:block;font-size:12.5px;line-height:1.5;color:var(--muted)}
.fn-cycle-step:not(:last-child)::after{
  content:'';position:absolute;top:21px;right:-9px;
  width:9px;height:9px;
  border-top:1px solid var(--border);border-right:1px solid var(--border);
  transform:rotate(45deg);
}

/* La devise du programme. Elle porte tout le concept en six mots, donc elle a
   droit à la fonte de titre et à rien d'autre autour. */
.fn-devise{
  margin:26px 0 56px;text-align:center;
  font-family:var(--font-d);font-size:clamp(19px,2.4vw,25px);font-style:italic;
  font-weight:400;color:var(--title);
}

/* ---- Les deux côtés ---- */
.fn-sides{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:80px}
.fn-side{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:38px 34px;
  display:flex;flex-direction:column;
}
.fn-side-ico{
  width:50px;height:50px;border-radius:50%;
  background:var(--navy);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  margin-bottom:22px;
}
.fn-side .eyebrow{margin-bottom:12px}
.fn-side h3{font-size:23px;font-weight:400;margin-bottom:14px}
.fn-side > p{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:24px}
.fn-side > p strong{color:var(--title);font-weight:500}

/* Chaque item est une ligne en flex : l'icône, puis le texte. Le texte DOIT
   être enveloppé dans un <span> — c'est la règle, et elle n'est pas
   décorative.

   Un conteneur flex fabrique un élément flex par enfant, et un par suite de
   texte contiguë. Un simple <strong> au milieu de la phrase devient donc un
   TROISIÈME élément flex, posé dans sa propre colonne : la phrase se coupe en
   deux morceaux qui se lisent de travers, avec le mot en gras planté au
   milieu. C'est arrivé sur « à taux zéro ».

   Le <span> rend au texte son unité : quoi qu'on mette dedans — gras, lien,
   italique — cela reste une seule ligne de prose.

   Les deux règles ci-dessous sont la ceinture : `flex:1` pour que le texte
   prenne la place restante, `min-width:0` pour qu'il puisse la rendre si un
   mot très long s'y trouve. */
.fn-list{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:12px}
.fn-list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:13.2px;line-height:1.6;color:var(--slate);
}
.fn-list li > span{flex:1;min-width:0}
.fn-list strong{font-weight:600;color:var(--title)}
.fn-list i{color:var(--gold);font-size:16px;flex-shrink:0;margin-top:2px}

/* ---- Le barème ----
   La question que se pose tout apporteur. Le taux est en monospace et aligné à
   droite : c'est une colonne de chiffres, et on la lit en la comparant d'une
   ligne à l'autre, pas en la lisant comme une phrase. */
.fn-rates{
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin-bottom:14px;
}
.fn-rate-head{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 16px;background:var(--ivory-2);
  font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.fn-rate-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 16px;border-top:1px solid var(--border);
  font-size:13.5px;color:var(--ink);
}
.fn-rate-row b{font-size:15px;color:var(--gold);font-weight:500}

/* La mention qui empêche de lire le barème comme une promesse. Elle est petite
   mais elle n'est pas cachée : c'est la seule raison pour laquelle le chiffre
   au-dessus est affichable. */
.fn-fine{
  margin-top:auto;padding-top:14px;
  font-size:11.8px;line-height:1.55;color:var(--hint);
}

.fn-sub{
  font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.fn-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.fn-chip{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);border-radius:100px;
  padding:6px 13px;font-size:12.3px;color:var(--slate);background:var(--ivory);
}
.fn-chip i{font-size:14px;color:var(--gold)}

/* ---- Comment déposer ----
   Les deux frises, annoncées avec les mots exacts du formulaire. Un visiteur
   qui commence sa demande doit retrouver « Origine » et « Affectation » à
   l'écran suivant, sinon il croit s'être trompé de parcours. */
.fn-flows{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
.fn-flow{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:28px 26px;
}
.fn-flow-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.fn-flow-ico{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--navy);color:var(--gold-light);
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.fn-flow-head strong{display:block;font-family:var(--font-d);font-size:16.5px;font-weight:500;color:var(--title)}
.fn-flow-head div > span{display:block;font-size:12px;color:var(--muted);margin-top:2px}

.fn-flow-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.fn-flow-steps li{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;font-size:13.8px;color:var(--ink);
  border-top:1px solid var(--border);
}
.fn-flow-steps li:first-child{border-top:none}
.fn-flow-steps b{
  width:25px;height:25px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--gold);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-m);font-size:11px;font-weight:400;
}

/* Ce qui suit le dépôt, commun aux deux natures : même mécanisme, seuls les
   yeux qui l'exercent changent. */
.fn-after{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-bottom:80px;
}
.fn-after > div{background:var(--card);padding:20px 18px}
.fn-after b{
  display:block;font-family:var(--font-d);font-size:14.5px;font-weight:500;
  color:var(--title);margin-bottom:7px;
}
.fn-after span{display:block;font-size:12.3px;line-height:1.55;color:var(--muted)}

/* ---- La vision ----
   Bleu nuit et sceau en fond, comme la section fideicomiso : c'est le même
   registre, celui de l'engagement pris dans la durée, et il n'y en a que deux
   sur la page. */
.fn-vision{
  position:relative;overflow:hidden;
  background:var(--navy);border-radius:var(--radius-lg);
  padding:66px 60px;text-align:center;
}
.fn-vision-seal{
  position:absolute;right:-70px;bottom:-90px;width:320px;height:320px;
  color:var(--gold);opacity:.07;pointer-events:none;
}
.fn-vision .eyebrow{justify-content:center;margin-bottom:18px}
.fn-vision h2{
  position:relative;z-index:1;color:#fff;font-weight:400;
  font-size:clamp(24px,3.2vw,36px);max-width:760px;margin:0 auto 20px;
}
.fn-vision p{
  position:relative;z-index:1;
  color:rgba(237,234,226,.62);font-size:15px;line-height:1.75;
  max-width:660px;margin:0 auto 32px;
}
.fn-vision-cta{position:relative;z-index:1;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ============================================================
   LE FONDS — écrans étroits
   ============================================================ */
@media(max-width:1000px){
  /* Le circuit passe en trois puis deux colonnes ; les chevrons disparaissent
     dès qu'il y a plus d'une ligne, sinon ils désignent la mauvaise case. */
  .fn-cycle{grid-template-columns:repeat(3,1fr);gap:22px 12px;padding:28px 22px}
  .fn-cycle-step:not(:last-child)::after{display:none}

  .fn-sides{grid-template-columns:1fr;gap:16px;margin-bottom:60px}
  .fn-flows{grid-template-columns:1fr}
  .fn-after{grid-template-columns:1fr 1fr;margin-bottom:60px}
  .fn-vision{padding:52px 34px}
}

@media(max-width:720px){
  .fn-cycle{grid-template-columns:1fr 1fr;padding:24px 16px}
  .fn-cycle-step > span:not(.fn-cycle-ico){font-size:12px}
  .fn-devise{margin:20px 0 40px}

  .fn-side{padding:28px 20px}
  .fn-side h3{font-size:20px}
  .fn-after{grid-template-columns:1fr}
  .fn-flow{padding:22px 18px}

  .fn-vision{padding:42px 22px;border-radius:var(--radius)}
  .fn-vision-seal{right:-90px;bottom:-110px;width:260px;height:260px}
  .fn-vision-cta .btn{width:100%}
}

/* ============================================================
   LES DEUX RÉGIMES D'ATTRIBUTION, ET LA DÉSHÉRENCE

   C'est l'information la plus structurante de la section : présenter le
   programme comme un financement unique à 0,5–2 % ferait croire qu'une demande
   de 80 000 € se rembourse, alors qu'elle ne se rembourse pas.

   Le vert distingue la dotation d'un engagement à rembourser — deux couleurs
   pour deux engagements opposés, jamais la même pour les deux.
   ============================================================ */
.fn-regimes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 22px}
.fn-regime{
  position:relative;padding:16px 18px 15px;border-radius:12px;
  border:1px solid var(--border);background:var(--ivory);
}
.fn-regime.don{border-color:var(--success-border);background:var(--success-bg)}
.fn-regime-seuil{
  display:block;font-family:var(--font-m);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--hint);margin-bottom:9px;
}
.fn-regime b{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-d);font-size:15.5px;font-weight:500;color:var(--title);
}
.fn-regime b i{font-size:18px;color:var(--gold)}
.fn-regime.don b i{color:var(--success)}
.fn-regime em{
  display:block;font-style:normal;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);margin:4px 0 8px;
}
.fn-regime.don em{color:var(--success)}
.fn-regime > span{display:block;font-size:12.3px;line-height:1.55;color:var(--muted)}

/* L'accord de donation à terme. Encadré, parce que c'est lui qui finance les
   dotations : sans cette explication, le programme paraîtrait distribuer de
   l'argent qui ne vient de nulle part. */
.fn-desherence{
  margin-top:18px;padding:16px 18px;border-radius:12px;
  border:1px solid var(--border);background:var(--ivory);
}
.fn-desherence b{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-family:var(--font-d);font-size:14.5px;font-weight:500;color:var(--title);
}
.fn-desherence b i{font-size:18px;color:var(--gold)}
.fn-desherence p{font-size:12.6px;line-height:1.65;color:var(--muted)}
.fn-desherence p strong{color:var(--title);font-weight:600}

@media(max-width:720px){
  .fn-regimes{grid-template-columns:1fr}
}

/* ============================================================
   SÉLECTEUR DE LANGUE DE LA VITRINE

   Il manquait : on ne pouvait changer de langue qu'une fois connecté, alors
   qu'on lit un site avant de s'y inscrire. Le choix d'un visiteur vit dans un
   cookie, celui d'un titulaire dans son compte.

   Il reste visible sur téléphone, à gauche du bouton du menu. Le ranger dans
   le panneau de navigation l'aurait caché derrière deux gestes, pour un
   réglage qui se prend en arrivant.

   Les drapeaux sont des SVG et non des emoji : Windows n'a aucune police qui
   dessine les indicateurs régionaux. Voir includes/langues.php.
   ============================================================ */
.lang-pick{position:relative;flex-shrink:0}
.lang-btn{
  display:flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:9999px;
  border:1px solid rgba(233,225,197,.22);background:rgba(255,255,255,.05);
  color:#fff;font-size:12px;font-weight:500;cursor:pointer;
  transition:background .18s,border-color .18s;
}
.lang-btn:hover,.lang-pick.open .lang-btn{background:rgba(255,255,255,.1);border-color:var(--gold-light)}
.lang-flag{
  display:block;width:20px;height:14px;flex-shrink:0;
  border-radius:2px;overflow:hidden;line-height:0;
}
.lang-flag svg{display:block;width:100%;height:100%}
.lang-code{letter-spacing:.05em}
.lang-caret{font-size:15px;opacity:.7;transition:transform .2s}
.lang-pick.open .lang-caret{transform:rotate(180deg)}

.lang-menu{
  position:absolute;top:calc(100% + 9px);right:0;z-index:240;min-width:196px;
  background:#0E2036;border:1px solid rgba(233,225,197,.16);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
.lang-pick.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu form{margin:0}
.lang-menu :is(button,a){
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 11px;border-radius:9px;
  font-size:13px;color:rgba(237,234,226,.78);cursor:pointer;
  transition:background .15s,color .15s;
}
.lang-menu :is(button,a):hover{background:rgba(255,255,255,.07);color:#fff}
.lang-menu :is(button,a).active{background:rgba(169,129,44,.18);color:#fff;font-weight:500}
.lang-soon{
  margin-left:auto;font-family:var(--font-m);font-size:8.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(237,234,226,.42);
}

/* ============================================================
   LE VERRE SUR LE SÉLECTEUR DE LANGUE DE LA VITRINE

   Même matière que partout ailleurs, mais une variante FIXE, de nuit — et ce
   n'est pas un oubli de la bascule claire/sombre.

   Ce menu s'ouvre sous la barre du haut, qui est une surface `--navy` : elle
   reste sombre dans les deux thèmes, c'est une règle de la charte (voir
   base.css). Du verre laiteux posé sur du bleu nuit donnerait une plaque
   blanche sur fond sombre — la lisibilité y perdrait, et le texte du menu est
   écrit en clair. Le verre suit donc ce qu'il y a DERRIÈRE lui, pas le thème
   de la page : c'est ce que fait du vrai verre.

   Le flou, lui, est le même partout : --glass-blur ne bascule pas de nature,
   seulement d'intensité.
   ============================================================ */
.lang-menu{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 52%),
    radial-gradient(130% 90% at 82% -25%, rgba(201,162,39,.18), transparent 62%),
    rgba(14,32,54,.72);
  -webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%);
  border-color:rgba(233,225,197,.18);
  box-shadow:0 22px 54px -20px rgba(0,0,0,.72), inset 0 1px 0 rgba(233,225,197,.16);
}
.lang-btn{
  -webkit-backdrop-filter:blur(14px) saturate(130%);backdrop-filter:blur(14px) saturate(130%);
}

/* La liste déroulante de select.js, quand elle s'ouvre sur la vitrine, prend
   le verre de :root comme partout : elle apparaît au milieu de la page, sur
   fond ivoire ou nuit selon le thème, et c'est bien ce fond-là qu'elle doit
   refléter. Rien à faire ici. */

/* Sélecteur de langue en liens (i18n) : la coche dit la langue courante. */
.lang-menu a{text-decoration:none}
.lang-on{margin-left:auto;font-size:15px;color:var(--gold-light)}

/* ============================================================
   Pages juridiques (mentions, CGU, confidentialité, pages ajoutées)
   L'en-tête y est plein d'emblée : il n'y a pas de héros sombre dessous
   pour le porter, et un en-tête transparent sur fond ivoire disparaît.
   ============================================================ */
.site-header.solid{background:#0A1826;box-shadow:0 1px 0 var(--border-dark)}
.legal-section{padding:150px 0 90px;background:var(--ivory)}
.legal-page{max-width:820px}
.legal-page h1{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(30px,4.4vw,44px);color:var(--title);margin:10px 0 8px;letter-spacing:-.01em}
.legal-meta{color:var(--muted);font-size:14px;margin:0 0 30px}
.legal-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 18px;padding:18px 20px;margin:0 0 34px;background:var(--card);border:1px solid var(--border);border-radius:14px}
.legal-toc a{display:flex;gap:10px;align-items:baseline;font-size:14px;color:var(--ink);text-decoration:none;padding:4px 0}
.legal-toc a:hover{color:var(--gold)}
.legal-toc .num{color:var(--gold);font-weight:600;min-width:18px}
.legal-page h2{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:22px;color:var(--title);margin:34px 0 12px;scroll-margin-top:100px}
.legal-page h2 .num{color:var(--gold)}
.legal-body{color:var(--ink);font-size:15.5px;line-height:1.75}
.legal-body p{margin:0 0 12px}
.legal-body ul,.legal-body ol{margin:0 0 12px;padding-left:22px}
.legal-body li{margin:4px 0}
.legal-body a.legal-link{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  .legal-section{padding:112px 0 64px}
  .legal-toc{padding:14px 16px}
}