/* France Invest Crédit — thèmes clair / sombre et matière « Liquid Glass » (7 nov. 2026).
   Chargée après fic.css. Le thème est posé sur <html data-theme="light|dark"> par le script
   du <head> (page.blade.php) ; choix mémorisé dans localStorage « fic-theme » (absent = auto).
   Le verre est réservé à la couche de navigation (en-tête, menus, barre du bas, fenêtres) :
   le contenu reste opaque et lisible. */

/* ---------- 1. Palettes ---------- */
:root{
  color-scheme:light;
  /* Verre clair */
  --glass-tint:rgba(255,255,255,.58);
  --glass-tint-2:rgba(255,255,255,.34);
  --glass-solid:rgba(250,248,244,.94);
  --glass-edge:rgba(255,255,255,.75);
  --glass-rim:rgba(22,22,26,.08);
  --glass-hi:rgba(255,255,255,.9);
  --glass-shade:0 18px 40px -20px rgba(22,22,26,.32),0 2px 6px -2px rgba(22,22,26,.08);
  --glass-blur:blur(22px) saturate(1.8);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#111113;--bg-2:#18181b;--card:#1e1e22;
  --ink:#f4f2ed;--text:#d6d4cf;--muted:#a19fa7;--line:rgba(255,255,255,.12);
  --brand-ink:#ff8f63;--line-dark:rgba(255,255,255,.14);
  --night:#1b1b1f;--solid:#f4f2ed;--on-solid:#16161a;--ink-rgb:244,242,237;
  --glass-tint:rgba(38,38,44,.55);
  --glass-tint-2:rgba(24,24,28,.38);
  --glass-solid:rgba(22,22,26,.95);
  --glass-edge:rgba(255,255,255,.16);
  --glass-rim:rgba(0,0,0,.5);
  --glass-hi:rgba(255,255,255,.22);
  --glass-shade:0 20px 44px -18px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4);
}
/* Sans JavaScript : on suit le réglage du système */
@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    color-scheme:dark;
    --bg:#111113;--bg-2:#18181b;--card:#1e1e22;
    --ink:#f4f2ed;--text:#d6d4cf;--muted:#a19fa7;--line:rgba(255,255,255,.12);
    --brand-ink:#ff8f63;--line-dark:rgba(255,255,255,.14);
    --night:#1b1b1f;--solid:#f4f2ed;--on-solid:#16161a;--ink-rgb:244,242,237;
    --glass-tint:rgba(38,38,44,.55);--glass-tint-2:rgba(24,24,28,.38);--glass-solid:rgba(22,22,26,.95);
    --glass-edge:rgba(255,255,255,.16);--glass-rim:rgba(0,0,0,.5);--glass-hi:rgba(255,255,255,.22);
    --glass-shade:0 20px 44px -18px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4);
  }
}

/* ---------- 2. Ajustements du mode sombre ---------- */
html[data-theme="dark"] body{color:var(--text)}
/* Les blocs sombres se détachent du fond par un filet */
html[data-theme="dark"] :is(.f-sim,.f-foot){box-shadow:inset 0 1px 0 var(--line)}
html[data-theme="dark"] :is(.h-cta__box,.r-sim,.r-after,.s-result,.w-file,#wrapper-1 .simulate-fi,.s-hub .is-star .s-tile){box-shadow:inset 0 0 0 1px var(--line)}
html[data-theme="dark"] .f-result{box-shadow:inset 0 0 0 1px var(--line)}
/* Photos un peu moins éclatantes la nuit ; les illustrations ivoire gardent un cadre doux */
html[data-theme="dark"] :is(.f-banner,.f-hero__fig,.h-hero,.f-row,.b-card,.a-card) img{filter:brightness(.9) contrast(1.04)}
html[data-theme="dark"] .f-banner--illu img{filter:brightness(.86)}
/* Logos des banques : restent sur carte blanche (logos en couleur, souvent foncés) */
html[data-theme="dark"] :is(.f-banks li,.h-banks li){background:#fff}
/* Champs de formulaire anciens (Bootstrap) */
html[data-theme="dark"] :is(.form-control,.custom-select,select,textarea,input[type="text"],input[type="email"],input[type="tel"],input[type="number"]){background-color:var(--card);color:var(--ink);border-color:rgba(255,255,255,.18)}
html[data-theme="dark"] ::placeholder{color:#8a8890}
/* Anciennes pages (couleurs noires translucides codées en dur dans default.css / frontend.min.css) */
html[data-theme="dark"] :is(.page-breadcrumb,.page-breadcrumb a,.page-breadcrumb span){color:var(--muted)!important}
html[data-theme="dark"] :is(.card-date,.card-header .subtitle){color:var(--muted)!important}
html[data-theme="dark"] .card-header .btn-card{color:var(--ink)!important}
html[data-theme="dark"] .card :is(h1,h2,h3,h4,h5,.card-title){color:var(--ink)}

/* ---------- 3. Matière Liquid Glass ---------- */
/* Recette : teinte translucide + flou saturé + liseré lumineux en haut + ombre portée douce.
   Le reflet (::after) imite la lumière qui glisse sur une goutte. */
.f-dock,.f-mega,.f-consent,.f-theme,.f-appear,.swal-modal,.s-tour-pop,.s-toast{
  background:linear-gradient(180deg,var(--glass-tint),var(--glass-tint-2))!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1px var(--glass-edge),0 0 0 1px var(--glass-rim),var(--glass-shade)!important;
}
/* Verre épais pour les panneaux qui portent du texte : lisible quel que soit le fond qui passe dessous */
.f-mega,.f-consent,.swal-modal,.s-tour-pop{
  background:linear-gradient(180deg,var(--glass-thick),var(--glass-thick-2))!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
}
:root{--glass-thick:rgba(253,251,247,.9);--glass-thick-2:rgba(250,248,244,.8);--head-tint:rgba(250,248,244,.8);--head-tint-2:rgba(250,248,244,.68)}
html[data-theme="dark"]{--glass-thick:rgba(36,36,41,.9);--glass-thick-2:rgba(26,26,30,.82);--head-tint:rgba(20,20,23,.8);--head-tint-2:rgba(20,20,23,.68)}
@media (prefers-color-scheme:dark){html:not([data-theme]){--glass-thick:rgba(36,36,41,.9);--glass-thick-2:rgba(26,26,30,.82);--head-tint:rgba(20,20,23,.8);--head-tint-2:rgba(20,20,23,.68)}}

/* En-tête : flou posé sur l'en-tête lui-même (Safari ne floute que ce qui est peint dans le
   contexte d'empilement du parent : un ::before ou un enfant ne verrait rien derrière).
   Le flou crée un bloc conteneur pour les enfants en position:fixed : il est donc retiré
   quand le menu mobile (.f-nav, fixed) est ouvert. */
/* Teinte plus dense que le verre courant : reste lisible même si le flou n'est pas rendu */
.f-header{
  background:linear-gradient(180deg,var(--head-tint),var(--head-tint-2))!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom-color:transparent!important;transition:box-shadow .3s,transform .4s var(--out);
}
.f-header.is-stuck{box-shadow:inset 0 -1px 0 var(--glass-edge),0 1px 0 var(--glass-rim),0 12px 30px -24px rgba(0,0,0,.45)}
.f-header.is-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)!important}

/* Menu mobile déplié : fond presque opaque, la lisibilité d'abord */
@media (max-width:1100px){
  .f-nav{background:var(--bg)!important}
  /* Barre du bas : capsule flottante */
  .f-dock{left:max(10px,var(--sa-l));right:max(10px,var(--sa-r));bottom:calc(8px + var(--sa-b));padding:7px;border-radius:26px}
  .f-dock .f-btn{border-radius:20px}
  .f-dock .f-btn--line{background:rgba(var(--ink-rgb),.06)}
}

/* Méga-menu et fenêtres */
.f-mega{border-radius:20px}
.swal-modal{border-radius:26px!important}
.swal-overlay{background-color:rgba(10,10,12,.32)!important}
html[data-theme="dark"] :is(.swal-title,.swal-text){color:var(--ink)!important}
html[data-theme="dark"] .swal-icon--success:before,html[data-theme="dark"] .swal-icon--success:after,html[data-theme="dark"] .swal-icon--success__hide-corners{background:transparent!important}
.s-toast{color:var(--ink)!important}

/* Reflet animé au survol : une lueur suit le pointeur (variables --mx/--my posées par fic.js) */
.f-theme,.f-appear{position:relative;overflow:hidden}
.f-theme::after,.f-appear::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.45),transparent 60%);
  opacity:.55;mix-blend-mode:soft-light;transition:opacity .3s;
}

/* Repli : navigateur sans flou, ou visiteur qui demande moins de transparence */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .f-header,.f-dock,.f-mega,.f-consent,.f-theme,.f-appear,.swal-modal,.s-tour-pop,.s-toast{background:var(--glass-solid)!important}
  @media (max-width:1100px){.f-nav{background:var(--glass-solid)!important}}
}
@media (prefers-reduced-transparency:reduce){
  .f-header,.f-dock,.f-mega,.f-consent,.f-theme,.f-appear,.swal-modal,.s-tour-pop,.s-toast{background:var(--glass-solid)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .f-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--bg)!important}
  .f-theme::after,.f-appear::after{display:none}
}

/* ---------- 4. Bouton de thème (en-tête) ---------- */
.f-theme{
  flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;
  color:var(--ink);cursor:pointer;transition:transform .35s var(--out);
}
.f-theme:hover{transform:scale(1.06)}
.f-theme:active{transform:scale(.94)}
.f-theme svg{grid-area:1/1;width:20px;height:20px;transition:transform .55s var(--out),opacity .3s}
.f-theme__moon{opacity:0;transform:rotate(-90deg) scale(.5)}
html[data-theme="dark"] .f-theme__sun{opacity:0;transform:rotate(90deg) scale(.5)}
html[data-theme="dark"] .f-theme__moon{opacity:1;transform:none}
@media (max-width:1100px){
  .f-theme{order:1;margin-left:auto;width:42px;height:42px}
  .f-burger{order:2;margin-left:4px}
}

/* ---------- 5. Sélecteur Auto / Clair / Sombre (pied de page) ---------- */
.f-appear{
  --i:0;display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;
  padding:4px;border-radius:999px;font-size:13.5px;
}
/* Le pied de page est toujours sombre : verre sombre dans les deux thèmes */
.f-foot .f-appear{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px -14px rgba(0,0,0,.6)!important;
}
.f-appear button{
  position:relative;z-index:1;min-width:64px;min-height:34px;padding:4px 12px;border:0;border-radius:999px;
  background:none;color:var(--on-dark-2);font:600 13.5px var(--sans);cursor:pointer;transition:color .25s;
}
.f-appear button:hover{color:#fff}
.f-appear button[aria-checked="true"]{color:#fff}
/* La lentille glisse sous l'option choisie */
.f-appear__lens{
  position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 3);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.08),0 4px 12px -4px rgba(0,0,0,.5);
  transform:translateX(calc(var(--i) * 100%));transition:transform .5s cubic-bezier(.34,1.4,.5,1);
}



/* ---------- 6. Bascule animée (View Transitions) ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:fic-theme-reveal .7s var(--out)}
@keyframes fic-theme-reveal{
  from{clip-path:circle(0 at var(--tx,50%) var(--ty,0))}
  to{clip-path:circle(150vmax at var(--tx,50%) var(--ty,0))}
}
@media (prefers-reduced-motion:reduce){
  .f-theme svg,.f-appear__lens,.f-theme{transition:none}
  ::view-transition-new(root){animation:none}
}

/* ---------- 7. Fond « Lumière d'arche » (7 nov. 2026, v2) ----------
   Reprend la scène des photos du site : mur de pierre ivoire, soleil qui projette une
   fenêtre en arche, arche au trait laiton. Sombre = « Soir », lueur ambre.
   Images : img/fond/{clair,sombre}-{paysage,portrait}.webp (générateur : resources/fond/).
   Fixe, sans animation : html::before en position fixe (fonctionne aussi sur iPhone). */
:root{--fond:url("../img/fond/clair-paysage.webp?v=1");--fond-p:url("../img/fond/clair-portrait.webp?v=1")}
html[data-theme="dark"]{--fond:url("../img/fond/sombre-paysage.webp?v=1");--fond-p:url("../img/fond/sombre-portrait.webp?v=1")}
@media (prefers-color-scheme:dark){html:not([data-theme]){--fond:url("../img/fond/sombre-paysage.webp?v=1");--fond-p:url("../img/fond/sombre-portrait.webp?v=1")}}
body,body#page-wrapper{background:transparent!important}
html::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg) var(--fond) center/cover no-repeat}
@media (max-aspect-ratio:4/5){html::before{background-image:var(--fond-p)}}
/* Sections alternées : laissent deviner le fond */
.f-s--alt{background:color-mix(in srgb,var(--bg-2) 70%,transparent)!important}
@media print{html::before{display:none}}

/* Blocs anthracite (simulateur, encart final, pied de page, résultats) : scène « Nuit »,
   même esprit que le fond. Lumière à droite pour laisser le texte de gauche au calme.
   Mêmes images dans les deux thèmes : ces blocs restent sombres. */
:root{--nuit:url("../img/fond/nuit-panneau.webp?v=1");--nuit-p:url("../img/fond/nuit-portrait.webp?v=1")}
:is(.f-sim,.f-foot,.h-cta__box,.r-after,#wrapper-1 .simulate-fi){background-image:var(--nuit)!important;background-size:cover!important;background-position:right center!important;background-repeat:no-repeat!important}
/* Colonnes étroites et hautes : version portrait */
:is(.s-result,.w-file){background-image:var(--nuit-p)!important;background-size:cover!important;background-position:center top!important;background-repeat:no-repeat!important}
@media (max-width:720px){
  :is(.f-sim,.f-foot,.h-cta__box,.r-after,#wrapper-1 .simulate-fi){background-image:var(--nuit-p)!important;background-position:center top!important}
}
@media print{:is(.f-sim,.f-foot,.h-cta__box,.r-after,.s-result,.w-file){background-image:none!important}}

/* WebKit : un calque animé + masqué (bandeau des banques) peut se peindre au-dessus d'un
   élément flouté. On l'enferme dans son propre contexte d'empilement, sous l'en-tête. */
.h-banks,.h-banks__rail{position:relative;z-index:0;isolation:isolate}