/* Site vitrine CredApp. Jetons repris de credapp/lib/design/tokens et de docs-projet/credapp-tokens.json. */
@font-face{font-family:Prompt;font-weight:600;font-display:swap;src:url(polices/Prompt-SemiBold.woff2) format("woff2")}
@font-face{font-family:Prompt;font-weight:700;font-display:swap;src:url(polices/Prompt-Bold.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:400;font-display:swap;src:url(polices/Lato-Regular.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:700;font-display:swap;src:url(polices/Lato-Bold.woff2) format("woff2")}

:root{
  --rouge:#E81C24;--rouge-survol:#C1161D;--bordeaux:#8E1820;--bordeaux-survol:#74131A;--bordeaux-profond:#5A0F14;
  --rose:#FCECEE;--rose-bord:#FAD4D6;--rose-texte:#F5B6BA;
  --encre:#181818;--encre-appuyee:#302B2B;--encre-courante:#4C4646;--attenue:#756D6D;
  --page:#FAF7F7;--carte:#FFFFFF;--creuse:#F6F1F1;--sillon:#F0E9E9;--bordure:#E4DCDC;
  --vert:#2CAE76;--vert-fond:#EAF7F1;--vert-encre:#1E8A5B;
  --largeur:1160px;--gouttiere:20px;--rayon:18px;
  --ombre-tel:drop-shadow(0 30px 50px rgba(40,5,8,.32));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--encre-courante);font:400 17px/1.6 Lato,system-ui,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:Prompt,system-ui,sans-serif;color:var(--encre);line-height:1.15;letter-spacing:-.01em}
.conteneur{width:100%;max-width:var(--largeur);margin:0 auto;padding:0 var(--gouttiere)}
.surtitre{font:700 12px/1.3 Lato,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rouge)}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:6px}

/* Boutons */
.bouton{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;border-radius:26px;font:600 15px/1 Prompt,sans-serif;letter-spacing:.02em;text-decoration:none;transition:background .15s,transform .15s}
.bouton:active{transform:translateY(1px)}
.bouton.principal{background:var(--bordeaux);color:#fff}
.bouton.principal:hover{background:var(--bordeaux-survol)}
.bouton.clair{background:#fff;color:var(--bordeaux)}
.bouton.clair:hover{background:var(--rose)}
.bouton.contour{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.bouton.contour:hover{background:rgba(255,255,255,.1)}
.bouton svg{width:22px;height:22px;flex:none}
.bouton .deux-lignes{display:flex;flex-direction:column;gap:3px;text-align:left}
.bouton .deux-lignes small{font:400 11px/1 Lato,sans-serif;letter-spacing:.04em;opacity:.8}

/* En-tête */
.entete{position:sticky;top:0;z-index:50;background:rgba(250,247,247,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.entete.defile{border-bottom-color:var(--bordure)}
.entete .conteneur{display:flex;align-items:center;gap:28px;height:68px}
.entete .marque img{width:132px}
.entete nav{display:flex;gap:26px;margin-left:auto}
.entete nav a{font:600 14px Prompt,sans-serif;color:var(--encre-appuyee);text-decoration:none}
.entete nav a:hover{color:var(--bordeaux)}
.entete .bouton{min-height:42px;padding:0 18px;font-size:14px}
@media (max-width:860px){.entete nav{display:none}.entete .bouton{margin-left:auto}}

/* Accroche */
.accroche{position:relative;background:var(--bordeaux);color:#fff;overflow:hidden;padding:72px 0 140px;clip-path:polygon(0 0,100% 0,100% calc(100% - 90px),0 100%)}
.accroche .filets{position:absolute;left:-60px;bottom:150px;width:520px;height:110px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 4px,transparent 4px 20px);transform:rotate(6deg);pointer-events:none}
/* Grand écran : les filets partent du bord gauche et sont coupés par le biais de l'accroche. */
@media (min-width:901px){.accroche .filets{bottom:40px;width:calc(100vw + 120px);transform:rotate(5deg);transform-origin:0 50%}}
.accroche .conteneur{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.accroche .surtitre{color:var(--rose-texte)}
.accroche h1{color:#fff;font-size:clamp(38px,5.6vw,64px);margin:14px 0 20px}
.accroche .chapeau{font-size:clamp(17px,1.6vw,20px);color:rgba(255,255,255,.86);max-width:30em}
.accroche .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.accroche .rassurance{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-size:14px;color:rgba(255,255,255,.8);list-style:none}
.accroche .rassurance li{display:flex;align-items:center;gap:8px}
.accroche .rassurance svg{width:18px;height:18px;color:var(--rose-texte)}
.telephones{position:relative;height:560px}
.telephones img{position:absolute;width:268px;filter:var(--ombre-tel)}
.telephones .avant{left:50%;top:0;margin-left:-230px;transform:rotate(-6deg);z-index:2}
.telephones .arriere{left:50%;top:60px;margin-left:-30px;transform:rotate(8deg)}
@media (max-width:900px){
  .accroche{padding:44px 0 110px;clip-path:polygon(0 0,100% 0,100% calc(100% - 50px),0 100%)}
  .accroche .conteneur{grid-template-columns:1fr}
  .telephones{height:440px;margin-top:10px}
  .telephones img{width:210px}
  .telephones .avant{margin-left:-170px}
  .telephones .arriere{margin-left:-10px;top:44px}
}

/* Piliers */
.piliers{margin-top:-40px;position:relative;z-index:3}
.piliers ul{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none}
.piliers li{background:var(--carte);border:1px solid var(--sillon);border-radius:var(--rayon);padding:24px;box-shadow:0 10px 30px rgba(90,15,20,.06)}
.piliers strong{display:block;font:700 22px/1.2 Prompt,sans-serif;color:var(--bordeaux);margin-bottom:6px}
.piliers p{font-size:15px}
@media (max-width:760px){.piliers ul{grid-template-columns:1fr}}

/* Sections */
.section{padding:96px 0}
.section .entete-section{max-width:640px;margin-bottom:48px}
.section h2{font-size:clamp(30px,3.6vw,42px);margin-top:10px}
.section .entete-section p{margin-top:14px;font-size:18px}
@media (max-width:760px){.section{padding:68px 0}}

/* Étapes */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;list-style:none;counter-reset:etape}
.etapes li{counter-increment:etape;display:flex;flex-direction:column}
.etapes .visuel{background:var(--rose);border-radius:var(--rayon);padding:28px 22px 0;overflow:hidden;height:360px}
.etapes .visuel img{width:80%;margin:0 auto;filter:drop-shadow(0 14px 22px rgba(40,5,8,.18))}
.etapes h3{font-size:19px;margin:20px 0 8px;display:flex;align-items:baseline;gap:10px}
.etapes h3::before{content:counter(etape);flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bordeaux);color:#fff;font-size:14px}
.etapes p{font-size:15.5px}
@media (max-width:1000px){.etapes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){
  .etapes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(-1 * var(--gouttiere));padding:0 var(--gouttiere) 8px;scroll-padding-left:var(--gouttiere);scrollbar-width:none}
  .etapes::-webkit-scrollbar{display:none}
  .etapes li{flex:0 0 78%;scroll-snap-align:start}
  .etapes .visuel{height:330px}
}

/* Engagements */
.engagements{background:var(--carte);border-top:1px solid var(--sillon);border-bottom:1px solid var(--sillon)}
.engagements .grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none}
.engagements li{border:1px solid var(--bordure);border-radius:var(--rayon);padding:26px;background:var(--page)}
.engagements .icone{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--rose);color:var(--bordeaux);margin-bottom:16px}
.engagements .icone svg{width:22px;height:22px}
.engagements h3{font-size:18px;margin-bottom:6px}
.engagements p{font-size:15.5px}
.engagements a{color:var(--bordeaux);font-weight:700}
@media (max-width:900px){.engagements .grille{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.engagements .grille{grid-template-columns:1fr}}

/* Entreprises */
.entreprises .bloc{position:relative;overflow:hidden;background:var(--bordeaux-profond);color:rgba(255,255,255,.86);border-radius:28px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.entreprises .bloc::after{content:"";position:absolute;right:-80px;top:-60px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(232,28,36,.45),transparent 70%);pointer-events:none}
.entreprises h2{color:#fff}
.entreprises .surtitre{color:var(--rose-texte)}
.entreprises ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.entreprises li{display:flex;gap:10px;align-items:flex-start}
.entreprises li svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--rose-texte)}
.entreprises .contact{position:relative;z-index:1;display:grid;gap:12px;justify-items:start}
.entreprises .contact p{font-size:15px}
@media (max-width:860px){.entreprises .bloc{grid-template-columns:1fr;padding:36px 24px;border-radius:22px}}

/* Questions */
.questions .liste{max-width:780px;display:grid;gap:12px}
.questions details{background:var(--carte);border:1px solid var(--bordure);border-radius:14px;padding:0 22px}
.questions summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:600 17px/1.35 Prompt,sans-serif;color:var(--encre)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--bordeaux);border-bottom:2px solid var(--bordeaux);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.questions details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.questions details p{padding:0 0 20px;font-size:16px}
.questions a{color:var(--bordeaux);font-weight:700}

/* Appel final */
.appel{text-align:center;padding:0 0 96px}
.appel .bloc{background:var(--rose);border-radius:28px;padding:56px 24px}
.appel h2{font-size:clamp(28px,3.4vw,40px)}
.appel p{margin:12px auto 28px;max-width:34em}

/* Pied de page */
.pied{background:var(--encre);color:rgba(255,255,255,.7);padding:56px 0 36px;font-size:14.5px}
.pied .colonnes{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.pied .logo-pied{display:inline-block;background:#fff;border-radius:12px;padding:10px 14px;margin-bottom:16px}
.pied .logo-pied img{width:120px}
.pied h3{color:#fff;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.pied ul{list-style:none;display:grid;gap:8px}
.pied a{text-decoration:none}
.pied a:hover{color:#fff;text-decoration:underline}
.pied .bas{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:22px;font-size:13px;color:rgba(255,255,255,.5)}
@media (max-width:760px){.pied .colonnes{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}