/* =========================================================
Digiformax — design system "Blueprint"
Charge en plus de styles.css (qui reste utilise par la page
detail portfolio). Les regles ci-dessous pilotent le nav, le
footer et la page d'accueil.
========================================================= */
:root{
--bp-bg:#0b1d33;
--bp-surface:#102846;
--bp-surface-2:#163258;
--bp-ink:#eef2f7;
--bp-muted:#8ba0b8;
--bp-muted-2:#5e7489;
--bp-gold:#d9a94f;
--bp-line:#2c4e71;
--bp-line-strong:#3d6a8a;
--bp-ok:#6fcf97;
--bp-font-display:'Archivo','Arial Black',sans-serif;
--bp-font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
--bp-font-body:'IBM Plex Sans','Segoe UI',sans-serif;
}
.bp-page{ background:var(--bp-bg); color:var(--bp-ink); font-family:var(--bp-font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
.bp-page a{ color:inherit; }
.bp-page img, .bp-page svg{ max-width:100%; display:block; }
.bp-wrap{ max-width:1180px; margin:0 auto; padding-inline:24px; }
@media (min-width:900px){ .bp-wrap{ padding-inline:48px; } }
.bp-page .grid-bg{
position:relative;
background-image:
linear-gradient(var(--bp-line) 1px, transparent 1px),
linear-gradient(90deg, var(--bp-line) 1px, transparent 1px);
background-size:40px 40px;
background-position:center top;
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 85%, transparent);
mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.15) 85%, transparent);
opacity:0.5;
}
.bp-eyebrow{
font-family:var(--bp-font-mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
color:var(--bp-gold); display:flex; align-items:center; gap:0.6em;
}
.bp-eyebrow::before{ content:''; width:1.4em; height:1px; background:var(--bp-gold); display:inline-block; }
.bp-page h1, .bp-page h2, .bp-page h3{ font-family:var(--bp-font-display); font-weight:900; line-height:1.02; margin:0; text-wrap:balance; }
/* ---- nav ---- */
header.bp-site{
border-bottom:1px solid var(--bp-line); position:sticky; top:0;
background:rgba(11,29,51,0.9); backdrop-filter:blur(10px); z-index:30;
}
.bp-nav-row{ display:flex; align-items:center; justify-content:space-between; padding-block:18px; gap:1rem; }
.bp-logo{ font-family:var(--bp-font-mono); font-weight:600; font-size:1.05rem; letter-spacing:0.02em; text-decoration:none; }
.bp-logo span{ color:var(--bp-gold); }
.bp-logo img{ height:28px; width:auto; }
nav.bp-links{
display:none; gap:1.6rem; font-family:var(--bp-font-mono); font-size:0.78rem; letter-spacing:0.03em;
text-transform:uppercase; color:var(--bp-muted); align-items:center;
}
nav.bp-links a{ text-decoration:none; transition:color .15s; }
nav.bp-links a:hover{ color:var(--bp-ink); }
@media (min-width:1040px){ nav.bp-links{ display:flex; } }
.bp-nav-actions{ display:flex; align-items:center; gap:0.9rem; }
.bp-btn{
font-family:var(--bp-font-mono); font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
display:inline-flex; align-items:center; gap:0.5em; padding:0.75em 1.3em; border:1px solid var(--bp-gold);
color:var(--bp-bg); background:var(--bp-gold); font-weight:600;
transition:transform .15s ease, box-shadow .15s ease; cursor:pointer;
}
.bp-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(217,169,79,0.25); }
.bp-btn.bp-ghost{ background:transparent; color:var(--bp-ink); border-color:var(--bp-line-strong); }
.bp-btn.bp-ghost:hover{ border-color:var(--bp-gold); color:var(--bp-gold); box-shadow:none; }
/* Bouton WhatsApp : vert de marque conserve (reconnaissance immediate),
angles francs comme le reste de l'identite. */
.bp-btn-whatsapp{
display:inline-flex; align-items:center; justify-content:center;
width:2.6rem; height:2.6rem; flex:none; background:#25d366; color:#fff;
border:1px solid #25d366; font-size:1.2rem; text-decoration:none;
transition:transform .15s ease, box-shadow .15s ease;
}
.bp-btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(37,211,102,0.3); color:#fff; }
/* mobile nav toggle, reutilise Bootstrap collapse (deja charge) */
.bp-nav-toggle{
display:inline-flex; background:none; border:1px solid var(--bp-line-strong); color:var(--bp-ink);
padding:0.5em 0.7em; font-size:1rem; cursor:pointer;
}
@media (min-width:1040px){ .bp-nav-toggle{ display:none; } }
.bp-mobile-menu{ border-top:1px solid var(--bp-line); }
.bp-mobile-menu .bp-wrap{ display:flex; flex-direction:column; gap:1.1rem; padding-block:1.4rem; }
.bp-mobile-menu a{
font-family:var(--bp-font-mono); font-size:0.85rem; letter-spacing:0.03em; text-transform:uppercase;
color:var(--bp-muted); text-decoration:none;
}
.bp-mobile-menu a:hover{ color:var(--bp-ink); }
@media (min-width:1040px){ .bp-mobile-menu{ display:none !important; } }
/* ---- hero ---- */
.bp-hero{ position:relative; padding-block:72px 96px; overflow:hidden; }
.bp-hero .grid-bg{ position:absolute; inset:0; z-index:0; }
.bp-hero-inner{ position:relative; z-index:1; display:grid; gap:48px; }
@media (min-width:980px){ .bp-hero-inner{ grid-template-columns:1.2fr 0.9fr; align-items:end; gap:64px; } }
.bp-hero h1{ font-size:clamp(2.3rem, 6.4vw, 4.6rem); text-transform:uppercase; letter-spacing:-0.01em; margin-block:1rem 1.4rem; }
.bp-hero h1 em{ font-style:normal; color:var(--bp-gold); }
.bp-hero p.bp-lede{ font-size:1.15rem; color:var(--bp-muted); max-width:46ch; margin:0 0 2rem; }
.bp-hero .bp-cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.5rem; }
.bp-coord{ font-family:var(--bp-font-mono); font-size:0.72rem; color:var(--bp-muted-2); letter-spacing:0.05em; }
.bp-spec-panel{ background:var(--bp-surface); border:1px solid var(--bp-line-strong); font-family:var(--bp-font-mono); font-size:0.85rem; }
.bp-spec-head{
display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1.1rem; border-bottom:1px solid var(--bp-line);
color:var(--bp-muted); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
}
.bp-spec-dot{ width:8px; height:8px; border-radius:50%; background:var(--bp-ok); box-shadow:0 0 0 3px rgba(111,207,151,0.18); display:inline-block; }
.bp-spec-body{ padding:1.1rem; }
.bp-spec-row{ display:flex; justify-content:space-between; gap:1rem; padding:0.55rem 0; border-bottom:1px dashed var(--bp-line); color:var(--bp-muted); }
.bp-spec-row:last-child{ border-bottom:none; }
.bp-spec-row b{ color:var(--bp-ink); font-weight:500; }
.bp-cursor{
display:inline-block; width:0.55em; height:1.1em; background:var(--bp-gold);
animation:bp-blink 1.1s step-end infinite; vertical-align:text-bottom; margin-left:2px;
}
@keyframes bp-blink{ 50%{ opacity:0; } }
/* ---- section shell ---- */
/* styles.css (toujours charge, utilise par la page detail portfolio)
definit un fond clair sur #about/#team/#faq pour l'ancien design :
on le reaffirme explicitement ici pour rester en theme sombre. */
.bp-page section,
#about, #process, #work, #team, #partners, #faq, section#contact{
background-color: var(--bp-bg);
}
.bp-page section{ padding-block:88px; border-top:1px solid var(--bp-line); }
.bp-section-head{ display:flex; flex-direction:column; gap:0.9rem; margin-bottom:3rem; max-width:62ch; }
.bp-section-head h2{ font-size:clamp(1.8rem, 3.6vw, 2.7rem); text-transform:uppercase; }
.bp-section-head p.bp-desc{ font-family:var(--bp-font-body); font-weight:400; color:var(--bp-muted); font-size:1.02rem; text-transform:none; margin:0; }
/* ---- about: 2 audiences ---- */
.bp-about-grid{ display:grid; gap:1px; background:var(--bp-line); border:1px solid var(--bp-line); }
@media (min-width:860px){ .bp-about-grid{ grid-template-columns:1fr 1fr; } }
.bp-about-col{ background:var(--bp-bg); padding:2.2rem; }
.bp-about-col h3{ font-family:var(--bp-font-body); font-weight:700; font-size:1.3rem; text-transform:none; margin-bottom:0.4rem; }
.bp-about-col > p{ color:var(--bp-muted); margin:0 0 1.6rem; font-size:0.95rem; }
.bp-about-col ul{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:0.9rem; }
.bp-about-col li{ display:flex; gap:0.7rem; font-size:0.93rem; color:var(--bp-ink); }
.bp-about-col li::before{ content:'▸'; color:var(--bp-gold); flex-shrink:0; }
/* ---- process pipeline (6 etapes) ---- */
.bp-pipeline{ display:grid; gap:0; grid-template-columns:repeat(2,1fr); border:1px solid var(--bp-line); }
@media (min-width:760px){ .bp-pipeline{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1040px){ .bp-pipeline{ grid-template-columns:repeat(6,1fr); } }
.bp-pipe-step{ padding:1.6rem 1.3rem; border-right:1px solid var(--bp-line); border-bottom:1px solid var(--bp-line); position:relative; }
.bp-pipe-step:nth-child(2n){ border-right:none; }
@media (min-width:760px){ .bp-pipe-step:nth-child(2n){ border-right:1px solid var(--bp-line); } .bp-pipe-step:nth-child(3n){ border-right:none; } }
@media (min-width:1040px){ .bp-pipe-step{ border-bottom:none; } .bp-pipe-step:nth-child(3n){ border-right:1px solid var(--bp-line); } .bp-pipe-step:last-child{ border-right:none; } }
.bp-pipe-step .bp-tag{ font-family:var(--bp-font-mono); font-size:0.72rem; color:var(--bp-muted-2); }
.bp-pipe-step h4{ font-family:var(--bp-font-body); font-weight:600; font-size:0.98rem; margin:0.5rem 0 0.4rem; }
.bp-pipe-step p{ font-size:0.85rem; color:var(--bp-muted); margin:0; }
/* ---- portfolio ---- */
.bp-work-grid{ display:grid; gap:1px; background:var(--bp-line); border:1px solid var(--bp-line); }
@media (min-width:760px){ .bp-work-grid{ grid-template-columns:repeat(3,1fr); } }
.bp-work-card{
background:var(--bp-surface); padding:2rem 1.6rem; min-height:220px; display:flex; flex-direction:column;
justify-content:space-between; transition:background .15s ease; text-decoration:none; color:inherit;
}
.bp-work-card:hover{ background:var(--bp-surface-2); }
.bp-work-card .bp-tag{ font-family:var(--bp-font-mono); font-size:0.72rem; color:var(--bp-gold); letter-spacing:0.06em; text-transform:uppercase; }
.bp-work-card h3{ font-family:var(--bp-font-body); font-weight:700; font-size:1.4rem; margin:0.8rem 0 0.4rem; text-transform:none; }
.bp-work-card p{ color:var(--bp-muted); font-size:0.9rem; margin:0; }
/* ---- team ---- */
.bp-team-grid{ display:grid; gap:1.5rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .bp-team-grid{ grid-template-columns:repeat(3,1fr); } }
.bp-avatar{
width:100%; aspect-ratio:1; border:1px solid var(--bp-line-strong); background:var(--bp-surface);
display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:1rem;
font-family:var(--bp-font-display); font-weight:900; font-size:2rem; color:var(--bp-gold);
}
.bp-avatar img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .2s ease; }
.bp-team-card:hover .bp-avatar img{ filter:grayscale(0); }
.bp-team-card h4{ font-family:var(--bp-font-body); font-weight:700; font-size:1.05rem; margin:0 0 0.2rem; }
.bp-team-card p{ font-family:var(--bp-font-mono); font-size:0.76rem; color:var(--bp-muted); margin:0; text-transform:uppercase; letter-spacing:0.04em; }
/* ---- partners ---- */
.bp-partners-row{ display:flex; flex-wrap:wrap; gap:1px; background:var(--bp-line); border:1px solid var(--bp-line); }
.bp-partner-cell{
flex:1 1 220px; background:var(--bp-bg); padding:2rem; display:flex; align-items:center; justify-content:center; min-height:140px;
}
.bp-partner-cell a, .bp-partner-cell > img{
background:#fff; padding:1rem 1.4rem; display:flex; align-items:center; justify-content:center;
}
.bp-partner-cell img{ max-height:48px; width:auto; max-width:150px; filter:grayscale(1); transition:filter .2s ease; }
.bp-partner-cell:hover img{ filter:none; }
/* ---- faq (reutilise accordion Bootstrap deja charge) ---- */
.bp-faq{ max-width:820px; }
.bp-faq .accordion-item{ background:transparent; border:none; border-bottom:1px solid var(--bp-line); border-radius:0; }
.bp-faq .accordion-button{
background:transparent; color:var(--bp-ink); font-weight:600; font-size:1.02rem; padding:1.4rem 0;
font-family:var(--bp-font-body); box-shadow:none;
}
.bp-faq .accordion-button::after{
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ba0b8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-image:var(--bs-accordion-btn-icon);
}
.bp-faq .accordion-button:not(.collapsed)::after{
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9a94f'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-image:var(--bs-accordion-btn-active-icon);
}
.bp-faq .accordion-button:not(.collapsed){ background:transparent; color:var(--bp-gold); box-shadow:none; }
.bp-faq .accordion-body{ padding:0 0 1.6rem; color:var(--bp-muted); max-width:65ch; }
/* ---- contact ---- */
.bp-contact-grid{ display:grid; gap:1.5rem; }
@media (min-width:900px){ .bp-contact-grid{ grid-template-columns:0.8fr 1.2fr; gap:1px; background:var(--bp-line); border:1px solid var(--bp-line); } }
.bp-contact-info, .bp-contact-form-panel{ background:var(--bp-bg); padding:2.2rem; }
@media (min-width:900px){ .bp-contact-info, .bp-contact-form-panel{ padding:2.6rem; } }
.bp-contact-info .bp-spec-row{ padding:0.8rem 0; }
.bp-contact-info .bp-spec-row span{ font-family:var(--bp-font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; }
.bp-field{ margin-bottom:1.2rem; }
.bp-field label{ display:block; font-family:var(--bp-font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--bp-muted); margin-bottom:0.5rem; }
.bp-field input, .bp-field textarea, .bp-field select{
width:100%; background:var(--bp-surface); border:1px solid var(--bp-line-strong); color:var(--bp-ink);
padding:0.8em 1em; font-family:var(--bp-font-body); font-size:0.95rem; border-radius:0;
}
.bp-field input:focus, .bp-field textarea:focus, .bp-field select:focus{ outline:none; border-color:var(--bp-gold); }
.bp-field textarea{ min-height:120px; resize:vertical; }
.bp-field select{
appearance:none; -webkit-appearance:none; padding-right:2.4em; cursor:pointer;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238ba0b8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
background-repeat:no-repeat; background-position:right 1em center; background-size:0.8em;
}
.bp-field select option{ background:var(--bp-surface); color:var(--bp-ink); }
.bp-field-row{ display:grid; gap:1.2rem; }
@media (min-width:600px){ .bp-field-row{ grid-template-columns:1fr 1fr; } }
.bp-alert{ font-family:var(--bp-font-mono); font-size:0.82rem; padding:0.9rem 1.1rem; margin-bottom:1.2rem; border:1px solid; }
.bp-alert-success{ border-color:var(--bp-ok); color:var(--bp-ok); }
.bp-alert-error{ border-color:#e2795c; color:#e2795c; }
/* ---- footer ---- */
footer.bp-site{ border-top:1px solid var(--bp-line); padding-block:48px; background:var(--bp-bg); }
.bp-foot-row{
display:flex; flex-wrap:wrap; gap:1.2rem 1.6rem; align-items:center; justify-content:space-between;
font-family:var(--bp-font-mono); font-size:0.78rem; color:var(--bp-muted-2);
}
.bp-foot-row a{ text-decoration:none; }
.bp-foot-row a:hover{ color:var(--bp-gold); }
.bp-foot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.bp-foot-social{ display:flex; gap:0.9rem; }
.bp-foot-social a{
width:2rem; height:2rem; border:1px solid var(--bp-line-strong); display:flex; align-items:center; justify-content:center;
color:var(--bp-muted); transition:color .15s ease, border-color .15s ease;
}
.bp-foot-social a:hover{ color:var(--bp-gold); border-color:var(--bp-gold); }
/* ---- modale "Demarrer un projet" (Bootstrap, reskin) ---- */
/* Le