/* vitrine.css — Pages d'accueil de la suite Ameriack (avec marque.css pour les polices, relief.css pour le relief). */
:root{--vert:#0F3D36;--vert-2:#17564C;--vert-clair:#EEF4F2;--or:#E9B043;--creme:#FAF8F2;--texte:#12211D;--gris:#5F6B68;--gris-clair:#E6E8E6;--ok:#1D7A44}
body.vitrine{background:var(--creme);color:var(--texte);margin:0;font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
body.vitrine *,body.vitrine *::before,body.vitrine *::after{box-sizing:border-box}
body.vitrine main{display:block}
body.vitrine .flottante{color:var(--texte);font-weight:600}
.cadre{max-width:1120px;margin:0 auto;padding:0 20px}
.surtitre{display:inline-flex;align-items:center;gap:.55rem;font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--or)}
.surtitre::before{content:"";width:24px;height:2px;background:var(--or)}
.surtitre.fonce{color:var(--vert-2)}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.015em;margin:0}
.btn-or,.btn-ligne{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:11px;font-weight:600;
  text-decoration:none;padding:.65rem 1.1rem;font-size:.95rem;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn-or{background:var(--or);color:#2B1D00}
.btn-or:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(233,176,67,.8)}
.btn-ligne{color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ligne:hover{border-color:#fff;transform:translateY(-1px)}
.grand{padding:.85rem 1.35rem;font-size:1rem}

/* En-tête (posé sur le héros sombre) */
.haut{position:absolute;top:0;left:0;right:0;z-index:20}
.haut-in{display:flex;align-items:center;gap:24px;height:76px}
.logo{height:34px;display:block}
.liens{display:flex;gap:22px;margin-left:auto}
.liens a{color:rgba(255,255,255,.78);text-decoration:none;font-size:.92rem}
.liens a:hover{color:#fff}
.acces{display:flex;align-items:center;gap:14px}
.lien-clair{color:#fff;text-decoration:none;font-weight:600;font-size:.92rem}

/* Héros */
.heros{background:radial-gradient(120% 90% at 85% 10%,#17564C 0%,#0F3D36 45%,#082520 100%);color:#fff;padding:140px 0 110px}
.heros .voile{background:linear-gradient(90deg,rgba(8,37,32,.82) 0%,rgba(8,37,32,.45) 48%,rgba(8,37,32,0) 75%)}
.heros-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.heros h1{font-size:clamp(2.5rem,5.4vw,4rem);line-height:1.02;margin:18px 0 0;color:#fff}
.heros h1 em{font-style:normal;color:var(--or)}
.chapo{font-size:1.1rem;color:rgba(250,248,242,.82);max-width:36ch;margin:22px 0 0;line-height:1.6}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.faits{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.86rem;color:rgba(250,248,242,.75)}
.faits li{display:flex;align-items:center;gap:.5rem}
.faits li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--or)}

/* Carte du compte en relief */
.heros-visuel{display:flex;justify-content:center}
.carte-id{width:min(400px,100%);border-radius:22px;padding:24px;color:var(--texte);
  background:linear-gradient(150deg,#FFFDF7 0%,#F6F1E2 100%);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(233,176,67,.25) inset}
.ci-tete{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--vert);font-size:.92rem}
.ci-org{font-family:"Fraunces",serif;font-size:1.45rem;color:var(--vert);margin-top:22px}
.ci-org span{font-family:"IBM Plex Sans",sans-serif;font-size:.8rem;color:var(--gris)}
.ci-ref{margin-top:18px;background:var(--vert);color:#fff;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.ci-ref .k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.ci-ref .v{font-family:ui-monospace,Menlo,monospace;font-size:1.5rem;font-weight:600;letter-spacing:.06em;color:var(--or)}
.ci-apps{display:flex;gap:10px;margin-top:20px}
.ci-apps img{border-radius:9px;box-shadow:0 6px 14px -8px rgba(15,61,54,.6);transition:transform .25s ease}
.carte-id.incline .ci-apps img{transform:translateZ(36px)}
.ci-apps img:nth-child(2){transition-delay:.03s}.ci-apps img:nth-child(3){transition-delay:.06s}
.ci-apps img:nth-child(4){transition-delay:.09s}.ci-apps img:nth-child(5){transition-delay:.12s}
.ci-pied{margin-top:20px;font-size:.84rem;color:var(--gris);display:flex;align-items:center;gap:.5rem}
.pastille-ok{width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* Sections */
.section{padding:88px 0}
.section.clair{background:#fff}
.section.sombre{background:var(--vert);color:#fff}
.tete-section{max-width:640px;margin-bottom:40px}
.tete-section h2{font-size:clamp(1.7rem,3.2vw,2.35rem);color:var(--vert);margin-top:12px;line-height:1.15}
.tete-section p{color:var(--gris);font-size:1.02rem;margin:14px 0 0;line-height:1.6}
.sombre .tete-section h2{color:#fff}

.grille-apps{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.grille-apps>*{grid-column:span 2}
.grille-apps>:nth-child(4){grid-column:2/span 2}
.carte-app{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--gris-clair);border-radius:18px;padding:22px;
  color:inherit;text-decoration:none}
.carte-app img{border-radius:12px}
.carte-app h3{font-size:1.2rem;color:var(--vert)}
.carte-app p{margin:0;color:var(--gris);font-size:.93rem;line-height:1.55}
.carte-app .voir{margin-top:auto;padding-top:6px;font-weight:600;color:var(--vert-2);font-size:.9rem}

.etapes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.etapes li{background:var(--creme);border:1px solid var(--gris-clair);border-radius:18px;padding:24px}
.etapes .num{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--vert);color:var(--or);
  font-family:"Fraunces",serif;font-size:1.25rem}
.etapes h3{font-size:1.15rem;color:var(--vert);margin-top:16px}
.etapes p{margin:10px 0 0;color:var(--gris);font-size:.93rem;line-height:1.55}

.grille-secu{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.carte-secu{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:22px}
.carte-secu h3{font-size:1.08rem;color:var(--or)}
.carte-secu p{margin:10px 0 0;color:rgba(250,248,242,.78);font-size:.9rem;line-height:1.55}

.appel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:linear-gradient(135deg,#0F3D36,#17564C);color:#fff;border-radius:24px;padding:44px}
.appel h2{font-size:1.7rem;color:#fff}
.appel p{margin:10px 0 0;color:rgba(250,248,242,.8);max-width:52ch;line-height:1.6}
.appel>*{position:relative}
.appel>.anneaux{position:absolute}

.pied{border-top:1px solid var(--gris-clair);background:#fff}
.pied-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;padding:26px 20px;font-size:.86rem;color:var(--gris)}
.pied a{color:var(--vert-2)}
.logo-pied{height:30px}
.lien-fonce{font-weight:600;text-decoration:none}

@media (max-width:980px){
  .heros-in{grid-template-columns:1fr;gap:48px}.grille-apps{grid-template-columns:repeat(2,1fr)}.grille-apps>*,.grille-apps>:nth-child(4){grid-column:auto}
  .grille-secu{grid-template-columns:repeat(2,1fr)}.liens{display:none}.acces{margin-left:auto}
}
@media (max-width:640px){
  .heros{padding:112px 0 72px}.grille-apps,.etapes,.grille-secu{grid-template-columns:1fr}
  .section{padding:64px 0}.appel{padding:30px}.lien-clair{display:none}.logo{height:30px}
  .heros .voile{background:rgba(8,37,32,.55)}
}

/* Compléments des applications (maquettes du héros, chiffres, liens de la suite) */
.maquette{width:min(460px,100%);border-radius:20px;overflow:hidden;color:var(--texte);background:#FFFDF7;
  border:1px solid rgba(255,255,255,.6);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.mq-tete{display:flex;justify-content:space-between;align-items:baseline;padding:14px 18px;background:var(--vert);color:#fff}
.mq-tete b{font-family:"Fraunces",serif;font-weight:600}
.mq-tete span{font-size:.74rem;color:rgba(255,255,255,.6)}
.mq-ligne{padding:12px 18px;border-bottom:1px solid #F0ECDF;font-size:.88rem;transition:transform .25s ease}
.maquette.incline .mq-ligne{transform:translateZ(22px)}
.mq-ligne:last-child{border-bottom:0}
.mq-l1{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.mq-pct{font-family:"Fraunces",serif;color:#C88A12}
.mq-barre{height:7px;border-radius:99px;background:#F0ECDF;margin-top:8px;overflow:hidden}
.mq-barre i{display:block;height:100%;border-radius:99px;background:var(--or);width:var(--w)}
.relief-actif .mq-barre i{width:0;transition:width 1.2s cubic-bezier(.2,.8,.2,1) .4s}
.relief-actif .vu .mq-barre i,.relief-actif .maquette.vu .mq-barre i{width:var(--w)}
.mq-mont{font-family:ui-monospace,Menlo,monospace;font-weight:600}
.mq-mont.plus{color:var(--ok)} .mq-mont.moins{color:#B23B2E}
.mq-pied{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#F6F1E2;font-weight:600}
.mq-pied .mq-mont{font-size:1.15rem;color:var(--vert)}

.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chiffre-carte{background:#fff;border:1px solid var(--gris-clair);border-radius:18px;padding:22px;text-align:center}
.chiffre-carte .v{font-family:"Fraunces",serif;font-size:2.4rem;color:var(--vert);line-height:1}
.chiffre-carte .k{margin-top:8px;color:var(--gris);font-size:.9rem}

.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.carte-f{background:#fff;border:1px solid var(--gris-clair);border-radius:18px;padding:22px}
.carte-f .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--vert);color:var(--or)}
.carte-f .ico svg{width:22px;height:22px}
.carte-f h3{font-size:1.12rem;color:var(--vert);margin-top:14px}
.carte-f p{margin:8px 0 0;color:var(--gris);font-size:.92rem;line-height:1.55}
.liens-suite{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lien-suite{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:20px;color:#fff;text-decoration:none}
.lien-suite img{border-radius:10px;flex:none}
.lien-suite h3{font-size:1.02rem;color:var(--or)}
.lien-suite p{margin:6px 0 0;color:rgba(250,248,242,.78);font-size:.88rem;line-height:1.5}
.petit-lien{color:rgba(250,248,242,.85);font-size:.88rem;margin-top:14px;display:inline-block}
@media (max-width:980px){.grille-3,.liens-suite{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grille-3,.liens-suite,.chiffres{grid-template-columns:1fr}}