/* ===== main.css ===== */
/* ============================================================
   Starting Block Digital — feuille de styles principale
   Source de vérité visuelle : maquette d'accueil.
   Tokens centralisés en :root, réutilisés par tous les blocs.
   Les valeurs de la maquette priment ; on override Kadence là
   où il impose largeur/couleurs/typo.
   ============================================================ */

/* --- Override de la contrainte de largeur Kadence (sections pleine largeur) --- */
.wp-site-blocks,
.content-area,
.site-content,
.entry-content,
.content-container{max-width:none !important;padding:0 !important;margin:0 !important;}
.entry-content > *{margin-block:0;}
body .content-container.sbd-full,
.single .entry-content,
.page .entry-content{width:100%;max-width:none;}
/* Neutralise le padding de contenu Kadence pour nos blocs pleine largeur */
.entry-content > .wp-block[class*="sbd-"],
.entry-content > [class*="sbd-block-"]{max-width:none;width:100%;}
/* Kadence ajoute parfois des marges verticales par défaut : on les remet à zéro dans nos sections */
[class*="sbd-block-"]{margin-block:0;}

/* ─── TOKENS ─────────────────────────────────────────── */
:root{
  --cream:#F8F4F1;
  --chalk:#FFFFFF;
  --sand:#EDE5DF;
  --sand-2:#D9CBC3;
  --line:#D8C8C2;
  --ink:#1C1812;
  --ink-2:#5A5040;
  --ink-3:#9C8E72;
  --amber:#9A595C;
  --amber-dk:#7E4749;
  --amber-lt:#E1BDB1;
  --amber-pale:#F7EBE9;
}

/* ─── RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{background:var(--cream);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit;}
ul{list-style:none;}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;}

/* ─── TYPOGRAPHY ─────────────────────────────────────── */
.wordmark{display:inline-flex;flex-direction:column;align-items:center;gap:0;line-height:1;text-decoration:none;}
.wordmark-logo{height:52px;width:auto;display:block;transition:filter .3s;fill:var(--logo-main,#FFFFFF);}
.nav .wordmark-logo{filter:drop-shadow(0 2px 12px rgba(0,0,0,.45));}
.nav.is-scrolled .wordmark-logo{filter:none;}
.footer .wordmark-logo{height:46px;}
/* Couleurs du logo SVG selon le contexte (main = lettres/icone, accent = signature) */
.nav{--logo-main:var(--chalk);--logo-accent:var(--amber-lt);}
.nav.is-scrolled{--logo-main:var(--ink);--logo-accent:var(--amber);}
.footer{--logo-main:var(--ink);--logo-accent:var(--amber);}
.wordmark-text{font-family:'Kaushan Script',cursive;font-size:1.75rem;color:var(--ink);line-height:1;white-space:nowrap;}
.wordmark-brush{display:block;width:100%;height:10px;margin-top:-2px;}
.wordmark-sub{font-family:'Manrope',sans-serif;font-size:.6rem;font-weight:400;letter-spacing:.06em;color:#888080;margin-top:3px;display:block;text-align:center;white-space:nowrap;}

.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.75rem;}

h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1.08;letter-spacing:-.02em;}
h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.5vw,2.6rem);line-height:1.18;letter-spacing:-.015em;}
h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;line-height:1.3;}
p{line-height:1.65;}
.lead{font-size:1.1rem;line-height:1.65;color:var(--ink-2);max-width:56ch;}

/* ─── LAYOUT ─────────────────────────────────────────── */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem);}
.section{padding-block:clamp(4rem,8vw,7rem);}
.section--flush-top{padding-top:0;}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;padding:.82rem 1.6rem;border-radius:100px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .2s ease,color .2s ease;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--ink);color:var(--cream);}
.btn--primary:hover{background:#2e2920;box-shadow:0 6px 20px -8px rgba(28,24,18,.45);}
.btn--amber{background:linear-gradient(135deg,#FFFFFF 0%,#E1BDB1 100%);color:var(--ink);border:1px solid #D9ADAE;}
.btn--amber:hover{background:linear-gradient(135deg,#FFFFFF 0%,#D8AC9E 100%);box-shadow:0 8px 22px -10px rgba(60,30,25,.35);border-color:#CF9E8F;}
.btn--outline{border:1.5px solid #D9ADAE;color:var(--ink);}
.btn--outline:hover{border-color:#9A595C;background:rgba(154,89,92,.06);}
.btn--ghost{border:1.5px solid rgba(245,240,227,.35);color:var(--chalk);}
.btn--ghost:hover{border-color:rgba(245,240,227,.7);background:rgba(245,240,227,.08);}
.btn--light{background:var(--chalk);color:var(--ink);}
.btn--light:hover{background:var(--cream);box-shadow:0 8px 24px -10px rgba(0,0,0,.5);}
.btn svg{flex:0 0 auto;transition:transform .15s ease;}
.btn:hover svg{transform:translateX(3px);}

/* ─── NAV (overlay transparent → solide au scroll) ──── */
html{scroll-padding-top:90px;}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .3s,backdrop-filter .3s,border-color .3s;}
.nav.is-scrolled{background:rgba(245,240,227,.94);backdrop-filter:blur(8px);border-color:var(--line);}
.nav .container{max-width:1660px;}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.75rem;padding-block:1.05rem;}
.nav-links{display:flex;align-items:center;gap:1.4rem;}
.nav-link{font-size:.9rem;font-weight:600;color:rgba(248,244,241,.92);transition:color .15s;white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.4);}
.nav-link:hover{color:#fff;}
.nav.is-scrolled .nav-link{color:var(--ink-2);text-shadow:none;}
.nav.is-scrolled .nav-link:hover{color:var(--ink);}
.nav .wordmark-text{color:var(--chalk);transition:color .3s;text-shadow:0 1px 14px rgba(0,0,0,.4);}
.nav .wordmark-sub{color:rgba(248,244,241,.72);transition:color .3s;}
.nav.is-scrolled .wordmark-text{color:var(--ink);text-shadow:none;}
.nav.is-scrolled .wordmark-sub{color:#888080;}
.nav-actions{display:flex;align-items:center;gap:.7rem;}
.nav-actions .btn--outline{border-color:rgba(248,244,241,.5);color:var(--chalk);}
.nav-actions .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.12);}
.nav.is-scrolled .nav-actions .btn--outline{border-color:var(--sand-2);color:var(--ink);}
.nav.is-scrolled .nav-actions .btn--outline:hover{border-color:#9A595C;background:rgba(154,89,92,.06);}
.nav-actions .btn--amber{white-space:nowrap;flex-shrink:0;}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:28px;cursor:pointer;}
.nav-toggle span{display:block;height:2.5px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s,background .3s;}
.nav.is-scrolled .nav-toggle span{background:#C4937E;}
.nav-toggle span:nth-child(2){width:80%;}
.nav-toggle span:nth-child(3){width:60%;}
.mobile-menu{display:none;flex-direction:column;gap:1.4rem;padding:1.5rem clamp(1.25rem,4vw,3rem) 2rem;border-top:1px solid rgba(255,255,255,.15);background:rgba(28,24,18,.92);backdrop-filter:blur(8px);}
.nav.is-scrolled .mobile-menu{background:rgba(245,240,227,.98);border-top-color:var(--line);}
.mobile-menu.is-open{display:flex;}
.mobile-menu .nav-link{font-size:1rem;color:rgba(248,244,241,.92);text-shadow:none;}
.nav.is-scrolled .mobile-menu .nav-link{color:var(--ink-2);}

/* ─── HERO (image plein écran) ───────────────────────── */
.hero-full{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-full-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;z-index:0;}
.hero-full::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(178deg,rgba(28,24,18,.58) 0%,rgba(28,24,18,.12) 32%,rgba(28,24,18,.34) 62%,rgba(28,24,18,.9) 100%);}
.hero-full-inner{position:relative;z-index:2;width:100%;margin:auto;}
.hero-full .eyebrow{color:var(--amber-lt);}
.hero-full h1{color:var(--chalk);max-width:19ch;text-shadow:0 2px 34px rgba(0,0,0,.4);}
.hero-full h1 em{font-style:normal;color:var(--amber-lt);}
.hero-full .lead{color:#F0E9DE;max-width:60ch;margin-top:1.5rem;font-size:clamp(1rem,1.4vw,1.2rem);}
.hero-full .hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem;}
.hero-google{margin-top:1.7rem;display:inline-flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.94);border-radius:12px;padding:.65rem 1rem;border:1px solid rgba(255,255,255,.4);}
.hero-scroll{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.45rem;color:rgba(248,244,241,.75);font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;}
.hero-scroll svg{animation:heroBob 1.9s ease-in-out infinite;}
@keyframes heroBob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@media(max-width:900px){.hero-full{min-height:90vh;}.hero-full h1{max-width:100%;}.hero-scroll{display:none;}}
@media(max-width:760px){
  .hero-full{min-height:auto;display:block;padding-top:6.5rem;padding-bottom:2.6rem;}
  .hero-full-inner{margin:0;}
  .hero-full h1{font-size:clamp(2.05rem,7.8vw,3rem);}
  .hero-full .lead{font-size:1rem;margin-top:1.1rem;}
  .hero-full .hero-actions{flex-direction:column;align-items:stretch;gap:.7rem;margin-top:1.8rem;}
  .hero-full .hero-actions .btn{width:100%;justify-content:center;}
}

/* ─── SPLIT (image moitié / contenu moitié) ──────────── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:clamp(480px,62vh,660px);}
.split-media{position:relative;overflow:hidden;min-height:340px;}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;}
.split-content{display:flex;flex-direction:column;justify-content:center;padding:clamp(2.5rem,6vw,5.5rem);}
.split--cream{background:var(--cream);}
.split--chalk{background:var(--chalk);}
.split--sand{background:var(--sand);}
.split--dark{background:var(--ink);}
.split--dark .split-content h2{color:var(--chalk);}
.split--dark .split-content p{color:#CBC2AC;}
.split--reverse .split-media{grid-column:2;grid-row:1;}
.split--reverse .split-content{grid-column:1;grid-row:1;}
.split-content .lead{margin-top:1rem;}
.split-points{display:flex;flex-direction:column;gap:.75rem;margin-top:1.7rem;}
.split-point{display:flex;align-items:flex-start;gap:.7rem;font-size:.92rem;font-weight:600;color:var(--ink-2);line-height:1.45;}
.split--dark .split-point{color:#EDE6D0;}
.split-point-dot{width:24px;height:24px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;}
.split-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.8rem;}
@media(max-width:820px){
  .split{grid-template-columns:1fr;min-height:0;}
  .split-media{min-height:300px;height:58vw;max-height:420px;grid-column:1 !important;grid-row:1 !important;}
  .split-content{grid-column:1 !important;grid-row:2 !important;}
}

/* ─── TRUST BAR ──────────────────────────────────────── */
.trust-bar{background:var(--ink);padding-block:1.4rem;}
.trust-bar .container{max-width:1600px;}
.trust-inner{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:nowrap;}
.trust-item{display:flex;align-items:center;gap:.65rem;color:var(--amber-lt);}
.trust-icon{width:28px;height:28px;background:rgba(154,89,92,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--amber-lt);flex:0 0 auto;}
.trust-label{font-size:.82rem;font-weight:600;color:#EDE6D0;white-space:nowrap;}
.trust-div{width:1px;height:28px;background:rgba(255,255,255,.1);flex:0 0 auto;}

/* ─── POURQUOI ───────────────────────────────────────── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:2.5rem;}
.why-card{background:var(--chalk);border:1px solid var(--sand-2);border-radius:20px;padding:1.75rem;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.why-card:hover{box-shadow:0 12px 30px -14px rgba(28,24,18,.18);transform:translateY(-2px);}
.why-icon{position:absolute;top:13px;right:13px;width:auto;height:auto;background:none;border:none;border-radius:0;color:var(--amber);opacity:.15;transform:rotate(-8deg);pointer-events:none;z-index:0;}
.why-icon svg{width:74px;height:74px;}
.why-body{position:relative;z-index:1;}
.why-body h3{margin-bottom:.35rem;}
.why-body p{font-size:.9rem;color:var(--ink-2);line-height:1.55;}
.why-statement{margin-top:2.5rem;background:var(--ink);border-radius:22px;padding:2.2rem 2.5rem;display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;}
.why-statement p{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:600;color:var(--chalk);line-height:1.5;}
.why-statement em{font-style:normal;color:var(--amber-lt);}

/* ─── SOLUTIONS ─────────────────────────────────────── */
.solutions{background:var(--cream);}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;align-items:stretch;}
.sol-card{background:var(--chalk);border:1px solid var(--line);border-radius:22px;padding:2.2rem;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.sol-card:hover{box-shadow:0 16px 36px -18px rgba(28,24,18,.2);transform:translateY(-3px);}
.sol-card--featured{background:var(--ink);border-color:var(--ink);color:var(--chalk);}
.sol-num{font-family:'JetBrains Mono',monospace;font-size:.68rem;font-weight:600;letter-spacing:.1em;color:var(--ink-3);margin-bottom:1.4rem;}
.sol-card--featured .sol-num{color:var(--amber-lt);}
.sol-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .7rem;border-radius:20px;background:var(--sand);color:var(--ink-2);margin-bottom:1.1rem;align-self:flex-start;}
.sol-card--featured .sol-tag{background:rgba(245,240,227,.12);color:var(--amber-lt);}
.sol-card h3{font-size:1.35rem;margin-bottom:.8rem;}
.sol-card--featured h3{color:var(--chalk);}
.sol-card p{font-size:.9rem;color:var(--ink-2);line-height:1.6;}
.sol-card--featured p{color:#CBC2AC;}
.sol-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;color:var(--amber);margin-top:1.6rem;}
.sol-card--featured .sol-link{color:var(--amber-lt);}
.sol-link svg{transition:transform .15s;}
.sol-card:hover .sol-link svg{transform:translateX(4px);}
.sol-corner{position:absolute;bottom:-18px;right:-18px;width:90px;height:90px;border-radius:50%;background:var(--sand);opacity:.5;}
.sol-card--featured .sol-corner{background:rgba(154,89,92,.15);}
.offer-feat{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1;}
.offer-feat li{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;line-height:1.45;}
.offer-feat li svg{flex:0 0 auto;margin-top:2px;}

/* ─── MÉTHODE ────────────────────────────────────────── */
.method{background:var(--cream);position:relative;overflow:hidden;}
.method .container{position:relative;z-index:1;}
.method-parallax{position:absolute;top:3%;right:1%;width:clamp(200px,22vw,340px);z-index:0;opacity:.4;pointer-events:none;will-change:transform;}
.method-parallax svg{width:100%;height:auto;display:block;}
@media(max-width:760px){.method-parallax{opacity:.26;right:-12%;width:60vw;}}
.method-intro{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-bottom:3.5rem;}
.method-claims{display:flex;flex-direction:column;gap:.85rem;margin-top:1.8rem;}
.method-claim{display:flex;align-items:flex-start;gap:.75rem;font-size:.95rem;font-weight:600;}
.method-claim-dot{width:22px;height:22px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;}

.method-nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1rem;}
.method-nodes-row2{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.m-card{background:var(--chalk);border:1px solid var(--line);border-radius:18px;padding:1.4rem 1.3rem;cursor:default;position:relative;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .15s;}
.m-card:hover{box-shadow:0 10px 28px -14px rgba(28,24,18,.2);border-color:var(--amber-lt);transform:translateY(-2px);}
.m-card.is-active{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-pale);}
.m-card--ia{background:var(--ink);border-color:var(--ink);color:var(--chalk);}
.m-card--ia:hover{border-color:var(--amber);}
.m-letter{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.2rem;line-height:1;color:var(--amber);}
.m-card--ia .m-letter{color:var(--amber-lt);}
.m-name{font-size:.78rem;font-weight:700;color:var(--ink-2);margin-top:.3rem;}
.m-card--ia .m-name{color:#CBC2AC;}
.m-card-desc{font-size:.76rem;line-height:1.5;color:var(--ink-3);margin-top:.55rem;}
.m-card--ia .m-card-desc{color:#9C9379;}
.m-connector{display:flex;align-items:center;justify-content:center;grid-column:span 4;padding:.25rem 0;}
.m-connector-line{height:1px;flex:1;background:var(--line);}
.m-connector-plus{font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:600;color:var(--amber);margin:0 .75rem;}

/* ─── DIFFERENTIATOR ─────────────────────────────────── */
.diff{position:relative;background-color:var(--ink);background-image:linear-gradient(rgba(20,17,12,.82),rgba(20,17,12,.88)),var(--diff-bg, linear-gradient(120deg,#2a231d,#1C1812));background-size:cover;background-position:center;background-attachment:fixed;padding-block:clamp(4rem,8vw,7rem);}
@media(max-width:820px){.diff{background-attachment:scroll;}}
.diff-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.diff-headline{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(2rem,3.5vw,3rem);line-height:1.2;color:var(--chalk);}
.diff-headline em{font-style:normal;color:var(--amber-lt);}
.diff-right p{font-size:1rem;color:#CBC2AC;line-height:1.7;margin-bottom:1.2rem;}
.diff-right p strong{color:var(--chalk);font-weight:700;}
.diff-pills{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;}
.diff-pill{font-size:.8rem;font-weight:600;padding:.4rem .9rem;border-radius:20px;border:1px solid rgba(245,240,227,.2);color:#EDE6D0;}

/* ─── POUR QUI ────────────────────────────────────────── */
.forwhom{background:var(--chalk);}
.forwhom-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.5rem;}
.fw-card{background:var(--cream);border:1px solid var(--sand-2);border-radius:18px;padding:1.6rem 1.4rem;text-align:center;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.fw-card:hover{box-shadow:0 10px 28px -14px rgba(28,24,18,.15);transform:translateY(-2px);}
.fw-icon{position:absolute;right:-.5rem;bottom:-.7rem;transform:rotate(-14deg);width:auto;height:auto;margin:0;background:none;border:none;border-radius:0;color:var(--amber);opacity:.16;pointer-events:none;z-index:0;}
.fw-icon svg{width:104px;height:104px;}
.fw-card h3{font-size:1rem;margin-bottom:.4rem;position:relative;z-index:1;}
.fw-card p{font-size:.83rem;color:var(--ink-2);line-height:1.5;position:relative;z-index:1;}

/* ─── AMBITION ───────────────────────────────────────── */
.ambition{background:var(--cream);}
.ambition-quote{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.5vw,1.75rem);line-height:1.5;color:var(--ink);border-left:3px solid var(--amber);padding-left:1.5rem;margin-top:1.6rem;}
.ambition-sub{color:var(--ink-2);font-size:.95rem;line-height:1.7;margin-top:1.5rem;}

/* ─── CTA FINAL ──────────────────────────────────────── */
.cta-final{background:var(--amber);padding-block:clamp(3.5rem,6vw,5.5rem);position:relative;overflow:hidden;}
.cta-final::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,rgba(255,255,255,.12),transparent 65%);}
.cta-final-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;}
.cta-final h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.4rem);color:var(--ink);line-height:1.25;}
.cta-final p{font-size:1rem;color:rgba(28,24,18,.7);margin-top:.7rem;max-width:52ch;}
.cta-final-actions{display:flex;flex-direction:column;gap:.8rem;min-width:220px;}

/* ─── FOOTER ─────────────────────────────────────────── */
.footer{background:var(--cream);padding-block:3rem 2.2rem;border-top:1px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line);}
.footer-brand .wordmark{color:var(--ink);}
.footer-brand .wordmark-sub{color:var(--ink-3);}
.footer-desc{font-size:.85rem;color:var(--ink-2);line-height:1.65;margin-top:.9rem;max-width:36ch;}
.footer-col-title{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem;}
.footer-links{display:flex;flex-direction:column;gap:.65rem;}
.footer-links a{font-size:.88rem;color:var(--ink-2);transition:color .15s;}
.footer-links a:hover{color:var(--ink);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;flex-wrap:wrap;gap:.75rem;}
.footer-bottom p{font-size:.78rem;color:var(--ink-3);}
.footer-bottom a{color:var(--ink-2);transition:color .15s;}
.footer-bottom a:hover{color:var(--ink);}

/* ─── RESPONSIVE ─────────────────────────────────────── */
/* Nav responsive par paliers */
@media (max-width:1420px){
  .nav-actions .btn--amber{display:none;}   /* le tel dans la barre seulement si assez de place */
}
@media (max-width:1250px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-actions .btn--outline{display:none;}
}
@media (max-width:900px){
  .why-grid{grid-template-columns:1fr;}
  .sol-grid{grid-template-columns:1fr;}
  .method-intro{grid-template-columns:1fr;}
  .method-nodes{grid-template-columns:repeat(2,1fr);}
  .method-nodes-row2{grid-template-columns:repeat(2,1fr);}
  .m-connector{grid-column:span 2;}
  .diff-inner{grid-template-columns:1fr;}
  .forwhom-grid{grid-template-columns:repeat(2,1fr);}
  .cta-final-inner{grid-template-columns:1fr;text-align:center;}
  .cta-final-actions{flex-direction:row;justify-content:center;}
  .footer-grid{grid-template-columns:1fr;}
  .why-statement{grid-template-columns:1fr;}
  .trust-inner{justify-content:center;flex-wrap:wrap;}
  .trust-div{display:none;}
}
@media (max-width:520px){
  .forwhom-grid{grid-template-columns:1fr;}
  .method-nodes{grid-template-columns:1fr 1fr;}
  .why-statement{padding:1.5rem;}
  .cta-final-actions{flex-direction:column;width:100%;}
  .cta-final-actions .btn{justify-content:center;}
}

/* ─── ANIMATIONS ─────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.is-visible{opacity:1;transform:none;}
  .reveal-delay-1{transition-delay:.1s;}
  .reveal-delay-2{transition-delay:.2s;}
  .reveal-delay-3{transition-delay:.3s;}
}

/* ─── DOULEURS ───────────────────────────────────────── */
.pain{background:var(--chalk);}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
.pain-card{background:var(--cream);border:1px solid var(--sand-2);border-radius:20px;padding:1.6rem;display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s;}
.pain-card:hover{box-shadow:0 10px 28px -14px rgba(28,24,18,.15);transform:translateY(-2px);}
.pain-card--cta{background:var(--ink);border-color:var(--ink);}
.pain-icon{position:absolute;top:13px;right:13px;width:auto;height:auto;background:none;border:none;border-radius:0;color:var(--amber);opacity:.15;transform:rotate(-8deg);pointer-events:none;z-index:0;}
.pain-icon svg{width:72px;height:72px;}
.pain-quote,.pain-who{position:relative;z-index:1;}
@media(min-width:901px){.why-body,.pain-quote{width:90%;}}
.pain-quote{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.45;font-style:italic;flex:1;}
.pain-who{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;}
@media(max-width:900px){.pain-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.pain-grid{grid-template-columns:1fr;}}

.pain-ia-banner{display:flex;align-items:flex-start;gap:.85rem;background:var(--ink);border-radius:16px;padding:1.1rem 1.4rem;margin-bottom:.5rem;}
.pain-ia-icon{width:34px;height:34px;border-radius:50%;background:rgba(154,89,92,.4);display:flex;align-items:center;justify-content:center;color:var(--amber-lt);flex:0 0 auto;}
.pain-ia-banner p{font-size:.88rem;color:#CBC2AC;line-height:1.6;}
.pain-ia-banner strong{color:var(--chalk);}

/* ─── JAM.IA ─────────────────────────────────────────── */
.jamia{background:var(--ink);padding-block:clamp(4rem,8vw,7rem);position:relative;overflow:hidden;}
.jamia::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(154,89,92,.35),transparent 70%);top:-200px;right:-160px;pointer-events:none;}
.jamia::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(154,89,92,.2),transparent 70%);bottom:-150px;left:-100px;pointer-events:none;}
.jamia-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.jamia-badge{display:inline-flex;align-items:center;gap:.55rem;background:rgba(154,89,92,.3);border:1px solid rgba(225,189,177,.3);border-radius:100px;padding:.35rem .9rem .35rem .55rem;margin-bottom:1.5rem;}
.jamia-badge-dot{width:28px;height:28px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--chalk);}
.jamia-badge-label{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-lt);}
.jamia-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(3.2rem,7vw,5.5rem);color:var(--chalk);line-height:1;letter-spacing:-.03em;}
.jamia-name span{color:var(--amber);}
.jamia-tagline{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.1rem;color:#E1BDB1;margin-top:1rem;line-height:1.4;}
.jamia-desc{font-size:.95rem;color:#A89880;line-height:1.7;margin-top:1.2rem;max-width:44ch;}
.jamia-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;}
.jamia-right{display:flex;flex-direction:column;gap:.85rem;}
.jamia-window{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:1.5rem;backdrop-filter:blur(4px);}
.jamia-window-header{display:flex;align-items:center;gap:.65rem;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.08);}
.jamia-avatar{width:36px;height:36px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.75rem;color:var(--chalk);flex:0 0 auto;}
.jamia-window-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--chalk);}
.jamia-window-status{font-size:.75rem;color:#8C9879;display:flex;align-items:center;gap:.3rem;}
.jamia-window-status::before{content:'';width:7px;height:7px;border-radius:50%;background:#4CAF50;display:inline-block;}
.jamia-msg{display:flex;gap:.7rem;align-items:flex-start;}
.jamia-msg--user{flex-direction:row-reverse;}
.jamia-bubble{font-size:.85rem;line-height:1.55;padding:.75rem 1rem;border-radius:16px;max-width:82%;}
.jamia-bubble--ai{background:rgba(255,255,255,.08);color:#EDE6D0;border-bottom-left-radius:4px;}
.jamia-bubble--user{background:var(--amber);color:var(--chalk);border-bottom-right-radius:4px;}
.jamia-input-row{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:.5rem .5rem .5rem 1.1rem;margin-top:1.2rem;}
.jamia-input-row input{flex:1;background:none;border:none;outline:none;font-family:'Manrope',sans-serif;font-size:.85rem;color:#EDE6D0;}
.jamia-input-row input::placeholder{color:#5C5040;}
.jamia-send-btn{width:34px;height:34px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--chalk);flex:0 0 auto;cursor:pointer;transition:background .15s;}
.jamia-send-btn:hover{background:var(--amber-dk);}
.jamia-chips{display:flex;flex-wrap:wrap;gap:.55rem;}
.jamia-chip{font-size:.78rem;font-weight:600;padding:.45rem .9rem;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C8BCA8;cursor:pointer;transition:border-color .15s,color .15s;}
.jamia-chip:hover{border-color:var(--amber);color:var(--amber-lt);}
@media(max-width:900px){.jamia-inner{grid-template-columns:1fr;gap:3rem;}.jamia-name{font-size:clamp(2.8rem,10vw,4rem);}}

/* ─── TÉMOIGNAGES ─────────────────────────────────────── */
.testi{background:var(--cream);}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;}
.testi-card{background:var(--chalk);border:1px solid var(--sand-2);border-radius:22px;padding:2rem;display:flex;flex-direction:column;gap:1.2rem;transition:box-shadow .2s,transform .2s;}
.testi-card:hover{box-shadow:0 14px 32px -16px rgba(28,24,18,.18);transform:translateY(-3px);}
.testi-stars{display:flex;gap:3px;color:#F9AB00;font-size:1rem;}
.testi-quote{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.55;flex:1;font-style:italic;}
.testi-quote::before{content:'"';font-size:2rem;color:var(--amber);line-height:0;vertical-align:-.5rem;margin-right:.15rem;font-style:normal;}
.testi-footer{display:flex;align-items:center;gap:.85rem;padding-top:1rem;border-top:1px solid var(--sand-2);}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--amber-pale);border:2px solid var(--amber-lt);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.95rem;color:var(--amber);flex:0 0 auto;}
.testi-name{font-weight:700;font-size:.9rem;line-height:1.3;}
.testi-role{font-size:.78rem;color:var(--ink-3);}
.testi-source{font-family:'JetBrains Mono',monospace;font-size:.65rem;color:var(--ink-3);letter-spacing:.06em;margin-left:auto;align-self:flex-start;}
.testi-google{display:flex;align-items:center;gap:.5rem;margin-top:2rem;justify-content:center;}
.testi-google-badge{display:inline-flex;align-items:center;gap:.6rem;background:white;border:1px solid var(--sand-2);border-radius:100px;padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* ─── CAS CLIENTS ─────────────────────────────────────── */
.cases{background:var(--sand);}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem;align-items:stretch;}
.case-card{background:var(--chalk);border:1px solid var(--line);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.case-card:hover{box-shadow:0 14px 32px -16px rgba(28,24,18,.18);transform:translateY(-3px);}
.case-top{background:var(--ink);padding:1.6rem;position:relative;overflow:hidden;}
.case-top::after{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(154,89,92,.25);bottom:-50px;right:-30px;}
.case-persona{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-lt);margin-bottom:.6rem;}
.case-situation{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:var(--chalk);line-height:1.4;position:relative;z-index:1;}
.case-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;gap:1rem;}
.case-problem{font-size:.88rem;color:var(--ink-2);line-height:1.65;border-left:3px solid var(--amber-lt);padding-left:.85rem;}
.case-label{font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-top:.3rem;}
.case-result{font-size:.9rem;font-weight:700;color:var(--ink);line-height:1.4;}
.case-result::before{content:'→ ';color:var(--amber);}
.case-quote{font-size:.84rem;color:var(--ink-2);font-style:italic;line-height:1.55;padding:.85rem;background:var(--cream);border-radius:12px;margin-top:auto;}
@media(max-width:900px){.cases-grid{grid-template-columns:1fr;}}

/* ─── HISTOIRE ─────────────────────────────────────────── */
.story{background:var(--chalk);}
.story-split{display:grid;grid-template-columns:1fr 1fr;align-items:start;}
.story-media{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--sand);}
.story-media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.story-content{padding:clamp(3rem,5.5vw,6rem);max-width:760px;}
.story-credentials{display:flex;flex-direction:column;gap:.65rem;margin:1.6rem 0 2rem;padding:1.4rem 1.5rem;background:var(--cream);border:1px solid var(--sand-2);border-radius:16px;}
.story-cred{display:flex;align-items:flex-start;gap:.7rem;font-size:.85rem;}
.story-cred-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:0 0 auto;margin-top:.35rem;}
.story-cred{display:flex;align-items:flex-start;gap:.7rem;font-size:.85rem;}
.story-cred-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:0 0 auto;margin-top:.35rem;}
.story-intro{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem;color:var(--ink);line-height:1.5;margin-bottom:1.5rem;}
.story-para{font-size:.95rem;color:var(--ink-2);line-height:1.75;margin-bottom:1.1rem;}
.story-para strong{color:var(--ink);font-weight:700;}
.story-highlight{background:var(--cream);border:1px solid var(--sand-2);border-radius:16px;padding:1.4rem 1.5rem;margin:1.5rem 0;}
.story-highlight p{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;color:var(--ink);line-height:1.5;font-style:italic;}
.story-highlight p::before{content:'"';font-size:2rem;color:var(--amber);line-height:0;vertical-align:-.5rem;margin-right:.1rem;}
.story-timeline{display:flex;flex-direction:column;gap:.5rem;margin-top:1.8rem;}
.story-tl-item{display:flex;gap:1rem;align-items:flex-start;}
.story-tl-year{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:600;color:var(--amber);white-space:nowrap;width:60px;flex:0 0 auto;padding-top:.15rem;}
.story-tl-text{font-size:.88rem;color:var(--ink-2);line-height:1.5;padding-bottom:.5rem;border-bottom:1px solid var(--sand-2);}
.story-tl-item:last-child .story-tl-text{border-bottom:none;}
@media(max-width:900px){
  .story-split{grid-template-columns:1fr;}
  .story-media{position:relative;top:auto;height:auto;aspect-ratio:4/3;max-height:440px;}
  .story-content{max-width:none;padding:2.4rem clamp(1.2rem,5vw,2.5rem);}
}

/* ─── CONTACT ─────────────────────────────────────────── */
.contact{background:var(--ink);padding-block:clamp(4rem,8vw,7rem);}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;}
.contact-left h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.8rem,3vw,2.6rem);color:var(--chalk);line-height:1.25;}
.contact-left p{font-size:.95rem;color:#A89880;line-height:1.7;margin-top:1rem;}
.contact-promise{display:flex;flex-direction:column;gap:.85rem;margin-top:2rem;}
.contact-promise-item{display:flex;align-items:center;gap:.75rem;color:#EDE6D0;font-size:.9rem;font-weight:600;}
.contact-promise-icon{width:32px;height:32px;border-radius:50%;background:rgba(154,89,92,.3);border:1px solid rgba(225,189,177,.2);display:flex;align-items:center;justify-content:center;color:var(--amber-lt);flex:0 0 auto;}
.contact-right{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:2.2rem;}
.contact-form-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;color:var(--chalk);margin-bottom:1.5rem;}
.form-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem;}
.form-label{font-size:.8rem;font-weight:600;color:#A89880;letter-spacing:.04em;}
.form-input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.75rem 1rem;color:var(--chalk);font-family:'Manrope',sans-serif;font-size:.9rem;outline:none;transition:border-color .15s;}
.form-input::placeholder{color:#5C5040;}
.form-input:focus{border-color:var(--amber);}
.form-select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.75rem 1rem;color:var(--chalk);font-family:'Manrope',sans-serif;font-size:.9rem;outline:none;appearance:none;cursor:pointer;}
.form-select option{background:#1C1812;color:var(--chalk);}
.form-btn{width:100%;padding:1rem;border-radius:12px;background:linear-gradient(135deg,#FFFFFF 0%,#E1BDB1 100%);color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;border:1px solid #D9ADAE;transition:.15s;margin-top:.5rem;display:flex;align-items:center;justify-content:center;gap:.6rem;}
.form-btn:hover{background:linear-gradient(135deg,#FFFFFF 0%,#D8AC9E 100%);border-color:#CF9E8F;}
.form-note{font-size:.75rem;color:#5C5040;text-align:center;margin-top:.75rem;line-height:1.5;}
@media(max-width:900px){.contact-inner{grid-template-columns:1fr;gap:2.5rem;}}

/* ─── PAGE RH (teaser), thème clair ────────────────── */
.rh-teaser{background:var(--rh-bg, linear-gradient(120deg,var(--sand),var(--amber-lt)));background-size:cover;background-position:center;padding-block:clamp(3.5rem,7vw,6rem);position:relative;overflow:hidden;}
.rh-teaser::before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,var(--sand) 0%,rgba(237,229,223,.96) 34%,rgba(237,229,223,.72) 60%,rgba(237,229,223,.4) 100%);}
.rh-teaser-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center;}
.rh-badge{display:inline-flex;align-items:center;gap:.55rem;background:var(--amber-pale);border:1px solid var(--amber-lt);border-radius:100px;padding:.3rem .9rem .3rem .5rem;margin-bottom:1.2rem;}
.rh-badge-icon{width:24px;height:24px;border-radius:50%;background:var(--amber);display:flex;align-items:center;justify-content:center;color:var(--chalk);}
.rh-badge-text{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);}
.rh-coming{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);display:inline-block;border:1px solid var(--amber-lt);border-radius:100px;padding:.25rem .7rem;margin-bottom:1rem;}
.rh-teaser h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.8rem,3vw,2.8rem);color:var(--ink);line-height:1.25;}
.rh-teaser p{font-size:.95rem;color:var(--ink-2);line-height:1.7;margin-top:.9rem;max-width:50ch;}
.rh-points{display:flex;flex-direction:column;gap:.75rem;margin-top:1.8rem;}
.rh-point{display:flex;align-items:center;gap:.75rem;font-size:.9rem;font-weight:600;color:var(--ink);}
.rh-point-dot{width:28px;height:28px;border-radius:50%;background:var(--amber-pale);border:1px solid var(--amber-lt);display:flex;align-items:center;justify-content:center;color:var(--amber);flex:0 0 auto;}
.rh-right{background:var(--chalk);border:1px solid var(--sand-2);border-radius:22px;padding:2rem;box-shadow:0 14px 34px -20px rgba(28,24,18,.25);}
.rh-right-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:1.2rem;}
.rh-right-items{display:flex;flex-direction:column;gap:.65rem;}
.rh-right-item{display:flex;align-items:flex-start;gap:.65rem;font-size:.85rem;color:var(--ink-2);line-height:1.5;}
.rh-right-item-num{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;color:var(--amber);background:var(--amber-pale);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:1px;}
.rh-notify{display:flex;gap:.65rem;margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--sand-2);}
.rh-notify input{flex:1;background:var(--cream);border:1px solid var(--sand-2);border-radius:10px;padding:.65rem .9rem;color:var(--ink);font-family:'Manrope',sans-serif;font-size:.85rem;outline:none;}
.rh-notify input::placeholder{color:var(--ink-3);}
.rh-notify input:focus{border-color:var(--amber);}
.rh-notify button{padding:.65rem 1.1rem;background:linear-gradient(135deg,#FFFFFF 0%,#E1BDB1 100%);color:var(--ink);border:1px solid #D9ADAE;border-radius:10px;font-family:'Manrope',sans-serif;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap;transition:background .15s;}
.rh-notify button:hover{background:linear-gradient(135deg,#FFFFFF 0%,#D8AC9E 100%);border-color:#CF9E8F;}
@media(max-width:900px){.rh-teaser-inner{grid-template-columns:1fr;gap:2.5rem;}}

/* ─── COMMENT ÇA MARCHE ──────────────────────────────── */
.how{background:var(--chalk);}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--sand-2);border-radius:22px;overflow:hidden;}
.how-step{padding:2rem;position:relative;}
.how-step:not(:last-child){border-right:1px solid var(--sand-2);}
.how-step-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:2.5rem;color:var(--amber-pale);line-height:1;margin-bottom:1rem;}
.how-step-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .7rem;border-radius:20px;background:var(--sand);color:var(--amber);border:1px solid var(--amber-lt);margin-bottom:.9rem;}
.how-step h3{font-size:1.1rem;margin-bottom:.7rem;}
.how-step p{font-size:.88rem;color:var(--ink-2);line-height:1.65;}
.how-step-detail{margin-top:1rem;display:flex;flex-direction:column;gap:.55rem;}
.how-step-detail li{display:flex;align-items:flex-start;gap:.6rem;font-size:.84rem;color:var(--ink-2);line-height:1.45;}
.how-step-detail li::before{content:'→';color:var(--amber);font-weight:700;flex:0 0 auto;}
.how-step--featured{background:var(--ink);}
.how-step--featured .how-step-num{color:rgba(154,89,92,.3);}
.how-step--featured h3{color:var(--chalk);}
.how-step--featured p{color:#A89880;}
.how-step--featured .how-step-detail li{color:#CBC2AC;}
.how-step--featured .how-step-tag{background:rgba(154,89,92,.25);color:var(--amber-lt);border-color:rgba(225,189,177,.2);}
.how-promise{margin-top:2rem;background:var(--cream);border:1px solid var(--sand-2);border-radius:18px;padding:1.5rem 2rem;display:flex;align-items:flex-start;gap:1rem;}
.how-promise-icon{width:40px;height:40px;border-radius:50%;background:var(--amber-pale);border:1px solid var(--amber-lt);display:flex;align-items:center;justify-content:center;color:var(--amber);flex:0 0 auto;}
.how-promise p{font-size:.92rem;line-height:1.65;color:var(--ink-2);}
.how-promise strong{color:var(--ink);}
@media(max-width:900px){.how-grid{grid-template-columns:1fr;border-radius:18px;}.how-step:not(:last-child){border-right:none;border-bottom:1px solid var(--sand-2);}}

/* ─── FINANCEMENT ────────────────────────────────────── */
.funding{background:var(--ink);padding-block:2.8rem;}
.funding-inner{display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center;}
.funding-left h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.3rem,2.5vw,1.9rem);color:var(--chalk);line-height:1.3;}
.funding-left p{font-size:.9rem;color:rgba(255,255,255,.9);margin-top:.6rem;line-height:1.6;max-width:54ch;}
.funding-logos{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.2rem;}
.funding-logo{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:.4rem .9rem;border-radius:100px;background:rgba(255,255,255,.15);color:var(--chalk);border:1px solid rgba(255,255,255,.4);}
.funding-right{display:flex;flex-direction:column;gap:.8rem;min-width:220px;}
@media(max-width:780px){.funding-inner{grid-template-columns:1fr;}.funding-right{flex-direction:row;flex-wrap:wrap;}}

/* ═══ FONDS SOMBRES : titres en degrade texte (blanc -> #E1BDB1) ═══ */
.hero-full h1,
.split--dark .split-content h2,
.diff-headline,
.contact-left h2,
.funding-left h2,
.jamia-name{
  background:linear-gradient(100deg,#FFFFFF 0%,#E1BDB1 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-full h1 em,
.diff-headline em,
.jamia-name span{color:inherit;-webkit-text-fill-color:transparent;}
.h1-script{
  font-family:'Kaushan Script',cursive;font-weight:400;
  font-size:1.18em;letter-spacing:0;line-height:1;
  color:#E1BDB1;-webkit-text-fill-color:#E1BDB1;
  display:inline-block;transform:rotate(-3deg);padding:0 .06em;
}
/* --- Lien de menu mis en avant (JAM.IA) --- */
.nav-link.is-jamia{font-weight:700;color:var(--amber);}
.nav.is-scrolled .nav-link.is-jamia{color:var(--amber);}

/* ===== overrides.css ===== */
/* ============================================================
   Correctifs post-déploiement — Starting Block Digital
   Chargé APRÈS main.css.
   ============================================================ */

/* 1. Neutralise le body{padding/gap} résiduel hérité de la maquette. */
body{padding:0 !important; gap:0 !important;}

/* 2. Boutons : Kadence force le texte en bleu au survol (a:hover).
      On rétablit la couleur d'origine de chaque variante. */
.btn--amber:hover,.btn--amber:focus,.btn--amber:active,
.btn--outline:hover,.btn--outline:focus,.btn--outline:active,
.btn--light:hover,.btn--light:focus,.btn--light:active{color:var(--ink) !important;}
.btn--primary:hover,.btn--primary:focus,.btn--primary:active{color:var(--cream) !important;}

/* Exception : le bouton outline de la barre de navigation.
   Tant que la nav n'a pas defile, elle est transparente et se detache sur le
   hero sombre : main.css garde donc volontairement le texte en --chalk au survol
   et ne le passe en --ink que sous .nav.is-scrolled. La regle ci-dessus, trop
   large, ecrasait cette distinction et rendait le libelle illisible. */
.nav:not(.is-scrolled) .nav-actions .btn--outline:hover,
.nav:not(.is-scrolled) .nav-actions .btn--outline:focus,
.nav:not(.is-scrolled) .nav-actions .btn--outline:active{color:var(--chalk) !important;}
.btn--ghost:hover,.btn--ghost:focus,.btn--ghost:active{color:var(--chalk) !important;}

/* Bouton burger (menu mobile) : Kadence applique a tout <button> sa base
   padding:.4em 1em + font-size:1.125rem. Avec box-sizing:border-box, ce
   padding horizontal (2em ~ 36px) depasse la largeur 28px du bouton : la zone
   de contenu tombe a 0, les 3 barres se retrouvent a width:0, donc le burger
   est invisible. On remet le padding a 0 : les barres reprennent leur largeur.
   Sur :focus/:active, cette meme base collait aussi un fond bleu
   (--global-palette2) + une ombre au tap : on force transparent.
   .nav-toggle:active pese 0,0,2,0, au-dessus du button:active de Kadence
   (0,0,1,1) : pas besoin de !important. */
.nav-toggle{padding:0;}
.nav-toggle:hover,.nav-toggle:focus,.nav-toggle:active{background:transparent;box-shadow:none;}

/* 3. Liens nav / footer : plus de bleu Kadence au survol. */
.nav-link:hover,.nav-link:focus{color:var(--amber) !important;}
.footer a:hover,.footer a:focus{color:var(--amber) !important;}

/* 4. Widgets d'avis Trustindex (héro et section témoignages).
      Le widget apporte son propre style : on ne gère ici que le placement.
      .hero-trustindex remplace l'ancienne boite .hero-google,
      .testi-trustindex remplace la grille de fausses cartes. */
.hero-trustindex{margin-top:2rem; max-width:460px;}
.testi-trustindex{margin-top:2.5rem;}
.hero-trustindex .ti-widget,
.testi-trustindex .ti-widget{margin:0 !important;}

/* 5. Ombres portées au survol : les transitions de main.css existent mais sont
      très courtes (.15s sur les boutons, .2s sur les cartes). Sur des ombres
      larges et diffuses, l'apparition paraît instantanée.
      On allonge la seule box-shadow et on lui donne une courbe sortante ;
      les transform (soulèvement des cartes) gardent leur durée d'origine,
      sinon le survol devient mou. */
:root{
	--shadow-t:box-shadow .4s cubic-bezier(.22,.61,.36,1);
}
.btn{transition:transform .15s ease,var(--shadow-t),background .15s ease,border-color .2s ease,color .2s ease;}
/* L'enfoncement au clic doit rester immédiat. */
.btn:active{transition:transform .05s ease;}
.why-card,
.sol-card,
.pain-card,
.fw-card,
.testi-card,
.case-card{transition:var(--shadow-t),transform .2s;}
.m-card{transition:var(--shadow-t),border-color .2s,transform .15s;}

/* 6. Mention commune du bloc Solutions.
      Reprise à l'identique des styles qui étaient en ligne dans le render,
      déplacés ici pour que le texte devienne un attribut éditable. */
.sol-note{
	margin-top:1.8rem;
	background:var(--cream);
	border:1px solid var(--sand-2);
	border-radius:16px;
	padding:1.2rem 1.6rem;
	display:flex;
	align-items:flex-start;
	gap:.9rem;
}
.sol-note svg{flex:0 0 auto; margin-top:1px;}
.sol-note p{font-size:.88rem; color:var(--ink-2); line-height:1.65;}
.sol-note strong{color:var(--ink);}

/* ============================================================
   7. Formulaire de contact (section sombre)

   Kadence stylise les champs via input[type="text"] (spécificité 0,1,1),
   plus fort que le .form-input de la maquette (0,1,0) : les champs se
   retrouvent avec un fond blanc et un texte sombre au milieu d'une section
   sur fond --ink.
   On cible donc les champs par leur TYPE, scopés à la section contact. Cela
   couvre le formulaire de démonstration comme celui généré par l'extension
   via le shortcode du bloc, sans dépendre de ses classes.

   ATTENTION : ici on n'utilise QUE background-color, jamais le raccourci
   background. Le raccourci réinitialise toutes les sous-propriétés, dont
   background-image et background-position : la flèche du menu déroulant,
   qui est une image de fond, sauterait au moindre focus.
   ============================================================ */
.sbd-block-contact .contact-right input[type="text"],
.sbd-block-contact .contact-right input[type="email"],
.sbd-block-contact .contact-right input[type="tel"],
.sbd-block-contact .contact-right input[type="url"],
.sbd-block-contact .contact-right input[type="number"],
.sbd-block-contact .contact-right textarea,
.sbd-block-contact .contact-right select{
	width:100%;
	background-color:rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.12);
	border-radius:10px;
	padding:.75rem 1rem;
	color:var(--chalk);
	font-family:'Manrope',sans-serif;
	font-size:.9rem;
	line-height:1.4;
	outline:none;
	box-shadow:none;
	transition:border-color .15s ease,background-color .15s ease;
}
.sbd-block-contact .contact-right textarea{min-height:120px;resize:vertical;}

.sbd-block-contact .contact-right input:focus,
.sbd-block-contact .contact-right textarea:focus,
.sbd-block-contact .contact-right select:focus{
	border-color:var(--amber);
	background-color:rgba(255,255,255,.1);
}

/* Le #5C5040 de la maquette était pensé pour un fond clair. Sur le fond sombre
   rétabli, il devient illisible : on remonte au gris chaud des textes tertiaires. */
.sbd-block-contact .contact-right ::placeholder{color:var(--ink-3);opacity:1;}

/* Menu déroulant natif : color-scheme indique au navigateur de dessiner la
   liste en sombre (texte clair, surbrillance adaptée). Les couleurs d'option
   ne suffisent pas seules, le rendu du popup étant gouverné par l'OS. */
.sbd-block-contact .contact-right select{
	color-scheme:dark;
	appearance:none;
	-webkit-appearance:none;
	cursor:pointer;
	padding-right:2.5rem;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E1BDB1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 1rem center;
}
/* Chevron retourné à l'ouverture. Un select natif n'expose pas son état ouvert :
   le focus en est le meilleur indicateur disponible en CSS pur. */
.sbd-block-contact .contact-right select:focus{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E1BDB1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18,15 12,9 6,15'/%3E%3C/svg%3E");
}
.sbd-block-contact .contact-right select option{
	background-color:#241F18 !important;
	color:#EDE6D0 !important;
}

/* ── Spécifique à l'extension de formulaire ──────────────────────────────
   Chaque champ est enveloppé dans un span inline : il doit passer en bloc pour
   que le champ occupe la largeur. L'autop ajoute aussi des p autour des lignes. */
.sbd-block-contact .wpcf7-form-control-wrap{display:block;}
.sbd-block-contact .wpcf7 p{margin:0;}
.sbd-block-contact .form-submit{margin-top:.5rem;}

/* Bouton d'envoi : input[type="submit"], donc même conflit de spécificité que
   les champs. On rejoue le style .form-btn de la maquette, flèche comprise
   (un input ne peut pas contenir de SVG, elle passe en image de fond). */
.sbd-block-contact .contact-right input[type="submit"]{
	width:100%;
	padding:1rem 2.4rem;
	border:1px solid #D9ADAE;
	border-radius:12px;
	color:var(--ink);
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	font-size:1rem;
	line-height:1.2;
	cursor:pointer;
	box-shadow:none;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231C1812' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,5 20,12 13,19'/%3E%3C/svg%3E") no-repeat right 1.1rem center,
		linear-gradient(135deg,#FFFFFF 0%,#E1BDB1 100%);
	transition:background .25s ease,border-color .25s ease;
}
.sbd-block-contact .contact-right input[type="submit"]:hover,
.sbd-block-contact .contact-right input[type="submit"]:focus{
	border-color:#CF9E8F;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231C1812' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,5 20,12 13,19'/%3E%3C/svg%3E") no-repeat right 1.1rem center,
		linear-gradient(135deg,#FFFFFF 0%,#D8AC9E 100%);
}

/* Kadence repasse le texte du bouton en blanc au survol, illisible sur le
   dégradé clair. Même correctif que la section 2. */
.sbd-block-contact .form-btn:hover,
.sbd-block-contact .form-btn:focus,
.sbd-block-contact .contact-right input[type="submit"]:hover,
.sbd-block-contact .contact-right input[type="submit"]:focus,
.sbd-block-contact .contact-right button[type="submit"]:hover,
.sbd-block-contact .contact-right button[type="submit"]:focus{color:var(--ink) !important;}

/* Bouton désactivé du formulaire de démonstration (aucun shortcode saisi). */
.sbd-block-contact .form-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* Messages de validation et d'envoi, sur fond sombre. */
.sbd-block-contact .wpcf7-not-valid-tip{
	color:#E9A0A0;
	font-size:.75rem;
	margin-top:.35rem;
}
.sbd-block-contact .contact-right .wpcf7-not-valid{border-color:#C46B6B;}
.sbd-block-contact .wpcf7-response-output{
	margin:1rem 0 0;
	padding:.75rem 1rem;
	border:1px solid rgba(255,255,255,.2);
	border-radius:10px;
	font-size:.82rem;
	line-height:1.5;
	color:#EDE6D0;
}
.sbd-block-contact form.sent .wpcf7-response-output{border-color:#4CAF50;color:#CDE8D2;}
.sbd-block-contact form.invalid .wpcf7-response-output,
.sbd-block-contact form.unaccepted .wpcf7-response-output,
.sbd-block-contact form.failed .wpcf7-response-output{border-color:#C46B6B;color:#F0CFCF;}
.sbd-block-contact .wpcf7-spinner{background-color:var(--amber-lt);}

/* ============================================================
   8. Inversion des colonnes des blocs a deux colonnes.

   .split--reverse existe deja dans main.css. Le bloc ambition reutilisant
   les classes .split, il en herite sans rien ajouter ici.
   Restent story et jamia, qui ont leur propre grille.

   Le repli mobile doit forcer la colonne 1 : sans ca, une inversion pensee
   pour le bureau ferait passer le texte avant l'image sur telephone.
   ============================================================ */
.story-split--reverse .story-media{grid-column:2;grid-row:1;}
.story-split--reverse .story-content{grid-column:1;grid-row:1;}
.jamia-inner--reverse .jamia-left{grid-column:2;grid-row:1;}
.jamia-inner--reverse .jamia-right{grid-column:1;grid-row:1;}

@media(max-width:900px){
	.story-split--reverse .story-media{grid-column:1 !important;grid-row:1 !important;}
	.story-split--reverse .story-content{grid-column:1 !important;grid-row:2 !important;}
	.jamia-inner--reverse .jamia-left{grid-column:1 !important;grid-row:1 !important;}
	.jamia-inner--reverse .jamia-right{grid-column:1 !important;grid-row:2 !important;}
}

/* ============================================================
   9. Liens de la barre de navigation.

   La classe .is-current est deja posee par sbd_nav_menu() depuis le debut,
   elle n'avait simplement jamais ete mise en forme.

   Le rose change de nuance selon l'etat de la nav : --amber-lt (#E1BDB1)
   tant qu'elle est transparente au-dessus du hero sombre, --amber (#9A595C)
   une fois le fond creme en place. Le meme rose sur les deux fonds serait
   illisible sur l'un des deux.
   ============================================================ */

/* Nav transparente : rose clair */
.nav:not(.is-scrolled) .nav-link:hover,
.nav:not(.is-scrolled) .nav-link:focus-visible,
.nav:not(.is-scrolled) .nav-link.is-current{color:var(--amber-lt);}

/* Nav defilee, fond creme : rose fonce */
.nav.is-scrolled .nav-link:hover,
.nav.is-scrolled .nav-link:focus-visible,
.nav.is-scrolled .nav-link.is-current{color:var(--amber);}

/* JAM.IA : lien ordinaire.
   main.css (l.561-562) lui donnait une couleur et une graisse propres pour le
   mettre en avant. Mais dans une barre de navigation le rose signifie deja
   "vous etes ici" : deux liens roses cote a cote laissaient croire qu'on etait
   sur deux pages a la fois. Une couleur ne peut pas porter deux informations.
   On neutralise ici plutot que dans main.css, qui reste le miroir de la maquette.
   La classe is-jamia continue d'etre posee : rien a recoder si l'on revient dessus. */
.nav-link.is-jamia{font-weight:600;color:rgba(248,244,241,.92);}
.nav.is-scrolled .nav-link.is-jamia{color:var(--ink-2);}

/* Survol et page courante : exactement le comportement commun. Declare
   explicitement, car a specificite egale c'est l'ordre qui tranche. */
.nav:not(.is-scrolled) .nav-link.is-jamia:hover,
.nav:not(.is-scrolled) .nav-link.is-jamia:focus-visible,
.nav:not(.is-scrolled) .nav-link.is-jamia.is-current{color:var(--amber-lt);}
.nav.is-scrolled .nav-link.is-jamia:hover,
.nav.is-scrolled .nav-link.is-jamia:focus-visible,
.nav.is-scrolled .nav-link.is-jamia.is-current{color:var(--amber);}

/* Menu mobile : meme logique, son panneau suit l'etat de la nav */
.nav:not(.is-scrolled) .mobile-menu .nav-link:hover,
.nav:not(.is-scrolled) .mobile-menu .nav-link.is-current{color:var(--amber-lt);}
.nav.is-scrolled .mobile-menu .nav-link:hover,
.nav.is-scrolled .mobile-menu .nav-link.is-current{color:var(--amber);}

/* ============================================================
   10. Page courante : un second signal, en plus de la couleur.

   Le lien JAM.IA est rose en permanence (c'est un nom de produit) et la
   page courante l'est aussi : deux liens roses cote a cote donnent
   l'impression d'etre sur deux pages a la fois. La couleur ne peut pas
   porter deux informations differentes, on ajoute donc un soulignement
   qui, lui, ne designe que la position.

   Barre en currentColor : elle suit automatiquement la nuance de rose
   choisie par la section 9 selon l'etat de la nav.
   Reservee au menu de bureau : dans le menu mobile, empile a la verticale,
   la couleur seule suffit.
   ============================================================ */

.nav-links .nav-link.is-current{position:relative;}
.nav-links .nav-link.is-current::after{
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:-7px;
	height:2px;
	border-radius:2px;
	background:currentColor;
}

/* ============================================================
   11. Liens des cartes d'abonnement.

   Meme cause que la section 2 : Kadence force a:hover en bleu. Les boutons,
   la nav et le pied de page etaient traites, .sol-link avait ete oublie.
   C'est le dernier lien colore du site qui n'etait pas protege.

   La maquette ne definit aucun survol pour ce lien : on en donne un dans la
   palette (--amber-dk) plutot que de le laisser sans reponse au pointeur.
   La fleche avance comme celle des boutons, pour un comportement homogene.
   ============================================================ */

.sol-link:hover,
.sol-link:focus{color:var(--amber-dk) !important;}

/* Carte sombre (variante mise en avant) : le rose fonce y serait illisible. */
.sol-card--featured .sol-link:hover,
.sol-card--featured .sol-link:focus{color:var(--chalk) !important;}

.sol-link svg{transition:transform .15s ease;}
.sol-link:hover svg{transform:translateX(3px);}

/* ============================================================
   12. Footer centre sur mobile.

   Sous 900px, .footer-grid passe deja en une seule colonne (main.css). On
   centre alors tout son contenu. text-align:center sur la grille suffit pour
   le logo (inline-flex), les titres de colonne et la description ; mais les
   listes de liens sont en flex-direction:column, donc c'est align-items qui
   les centre, pas text-align. La description recentre sa max-width via margin
   auto, et la barre du bas passe de space-between a center (avec ses deux
   liens legaux autorises a passer a la ligne si l'ecran est etroit).
   ============================================================ */
@media(max-width:900px){
	.footer-grid{text-align:center;}
	.footer-desc{margin-inline:auto;}
	.footer-links{align-items:center;}
	.footer-bottom{justify-content:center;text-align:center;}
	.footer-bottom > div{flex-wrap:wrap;justify-content:center;}
}

/* \u2500\u2500\u2500 ACCESSIBILITE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   Contenu reserve aux lecteurs d'ecran. On ne peut pas utiliser
   display:none ni visibility:hidden, qui le retireraient aussi de
   l'arbre d'accessibilite : le libelle deviendrait invisible pour
   les technologies d'assistance, ce qui est l'inverse du but.
   Le focus rend l'element visible (utile pour un lien d'evitement).
   -------------------------------------------------- */
.screen-reader-text{
	position:absolute !important;
	width:1px;height:1px;
	padding:0;margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	clip-path:inset(50%);
	white-space:nowrap;
	border:0;
}
.screen-reader-text:focus{
	background:var(--chalk);
	color:var(--ink);
	clip:auto !important;
	clip-path:none;
	width:auto;height:auto;
	padding:.7rem 1.2rem;
	border-radius:100px;
	z-index:100000;
	font-size:.9rem;
	text-decoration:none;
}


/* Spinner CF7 : injecte en JS apres le bouton, inline-block 24px en
   visibility:hidden, donc toujours dans le flux. Le bouton etant en
   flex width:100%, le spinner tombait sur une ligne a lui et creait un
   vide sous le bouton. On le superpose au bouton. */
.sbd-block-contact .form-submit p{position:relative;}
.sbd-block-contact .wpcf7-spinner{
	position:absolute;
	right:1.25rem;
	top:50%;
	transform:translateY(-50%);
	margin:0;
}

/* ===== footer-legal.css ===== */
/* ============================================================
   13. Barre légale du pied de page.

   Elle passait de deux à quatre liens : l'ancien style en ligne
   (display:flex avec un gap fixe) ne prévoyait aucun retour à la
   ligne et faisait deborder la barre sur les écrans intermédiaires.
   ============================================================ */
.footer-legal{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.6rem 1.5rem;
}
.footer-legal a{
	font-size:.78rem;
	color:var(--ink-2);
	transition:color .15s;
}
.footer-legal a:hover,
.footer-legal a:focus{color:var(--amber) !important;}

/* Le lien de retrait du consentement n'est pas une page : on le distingue
   discretement des mentions legales par une puce, sans en faire un bouton. */
.footer-legal .sbd-consent-open{cursor:pointer;}
@media(min-width:901px){
	.footer-legal .sbd-consent-open::before{
		content:'';
		display:inline-block;
		width:3px;height:3px;
		border-radius:50%;
		background:var(--sand-2);
		vertical-align:middle;
		margin-right:1.5rem;
	}
}
@media(max-width:900px){
	.footer-legal{justify-content:center;}
}

/* ===== responsive-fixes.css ===== */
/* ============================================================
   Correctifs responsive — Starting Block Digital
   Chargé APRÈS overrides.css.

   Ne contient que des corrections de débordement horizontal.
   Chaque règle documente la cause, pas seulement l'effet.
   ============================================================ */

/* ------------------------------------------------------------
   1. Trust bar — débordement entre 901px et 1150px.

   main.css (l.178) pose .trust-inner{flex-wrap:nowrap} avec
   .trust-label{white-space:nowrap}, et ne repasse en wrap qu'à 900px.
   Les 4 libellés + 3 séparateurs + les gaps ne tiennent plus sur une seule
   ligne dès ~1150px : la barre élargit la zone défilable du document.
   body{overflow-x:hidden} masque le symptôme sans corriger la cause, d'où
   la bande blanche à droite des sections pleine largeur (elles font 100%
   du viewport, pas 100% de la largeur débordée).

   On avance le repli à 1160px avec exactement les mêmes règles qu'à 900px :
   aucun changement de rendu en dessous de 900px, où main.css reprend la main.
   ------------------------------------------------------------ */
@media (max-width:1160px){
	.trust-inner{justify-content:center;flex-wrap:wrap;}
	.trust-div{display:none;}
}

/* ------------------------------------------------------------
   2. Trust bar — écrans étroits.

   Une fois les items empilés, le plus long (« Méthode SC5P+IA, structurée
   & actionnable ») reste en white-space:nowrap : sous ~400px il dépasse à
   lui seul la largeur disponible, et l'écart grandit à mesure que l'écran
   rétrécit — signature d'un nowrap, pas d'une grille.
   On l'autorise à passer à la ligne ; l'icône se cale alors en haut plutôt
   qu'au centre d'un bloc devenu multi-lignes.
   ------------------------------------------------------------ */
@media (max-width:560px){
	.trust-label{white-space:normal;}
	.trust-item{align-items:flex-start;}
	.trust-icon{margin-top:.1rem;}
}

/* ============================================================
   Debordement horizontal du bloc contact en mobile
   ============================================================
   Constate le 9 septembre 2026 : la page defilait vers la droite sur
   telephone, et le formulaire apparaissait decale, colle a droite.

   Enchainement : .contact-inner passe en une colonne sous 900px, et un
   1fr vaut minmax(auto, 1fr) : la piste ne peut pas descendre sous la
   largeur minimale de son contenu. Or le widget Turnstile de Cloudflare
   fait 300px fixes. Le calcul tombe juste :

     300 (Turnstile) + 70,4 (padding 2,2rem) + 2 (bordure) = 372,4 px

   soit la largeur mesuree, dans une colonne qui n'en fait que 350.

   Deux corrections complementaires :
   - minmax(0, 1fr) autorise la piste a descendre sous la largeur minimale
     de son contenu, ce qui est le comportement attendu ici ;
   - le padding de la carte passe de 2,2rem a 1,4rem, pour laisser la
     place au widget sans le comprimer.

   Mesure apres correctif, marges gauche/droite du formulaire :
     360px : 56/4  -> 43/43, debordement 32px -> 0
     390px : 56/34 -> 43/43, debordement  2px -> 0
     412px : 56/56 -> 43/43
   ============================================================ */
@media (max-width:900px){
  .contact-inner{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  .contact-right{padding:1.4rem;}
  /* Filet de securite : si un widget tiers redevient plus large que la
     carte, il defile dans son coin au lieu d'elargir toute la page. */
  .cf-turnstile{max-width:100%;overflow-x:auto;}
}

/* ============================================================
   Images de fond en WebP
   ============================================================
   Deux blocs posent leur fond dans un attribut style, en propriete
   personnalisee. La conversion WebP du site ne traite que les balises
   <img> et <picture> : ces deux images restaient en JPEG.

   Releve du 9 septembre 2026 sur une trace reseau en 4G lente :
     sbd-formation.jpg   236 075 o  ->  WebP 119 652 o  (-50 %)
     sbd-conviction.jpg  212 901 o  ->  WebP 115 774 o  (-46 %)
   soit 213 Ko evitables sur 449 telecharges.

   inc/webp-css-bg.php ajoute une propriete -webp a cote de chaque fond,
   uniquement si le fichier existe sur le disque. La regle ci-dessous
   bascule dessus.

   Le test porte sur image-set() avec type(), faute de test direct du
   format : tout navigateur qui comprend cette syntaxe lit le WebP.
   Les plus anciens gardent simplement le JPEG, sans rien casser.

   Le second var() reprend la variable JPEG en repli, au cas ou une image
   n'aurait pas de version convertie.
   ============================================================ */
@supports (background-image: image-set(url("i.webp") type("image/webp"))) {
  .rh-teaser{background-image:var(--rh-bg-webp, var(--rh-bg));}
  .diff{background-image:linear-gradient(rgba(20,17,12,.82),rgba(20,17,12,.88)),var(--diff-bg-webp, var(--diff-bg));}
}

/* ===== a11y.css ===== */
/* ============================================================
   Correctifs d'accessibilité — Starting Block Digital
   Chargé APRÈS responsive-fixes.css, donc en dernier.

   Chaque règle documente la cause et le rapport de contraste mesuré,
   pour qu'une future retouche de palette sache ce qu'elle doit tenir.
   Référence : WCAG 2.1 critère 1.4.3 (4.5:1 pour le texte courant)
   et WCAG 2.2 critère 2.5.8 (zones cibles de 24x24 px minimum).
   ============================================================ */

/* ------------------------------------------------------------
   1. Jeton --ink-3 : texte tertiaire.

   La maquette pose --ink-3:#9C8E72. Sur le fond crème du site (#F8F4F1)
   ce couple ne donne que 2,9:1, très en dessous des 4,5:1 exigés.
   Le rapport Lighthouse le signale sur le pied de page, mais la cause
   n'est pas locale : le même jeton échoue partout où il sert de texte,
   d'où une correction sur le jeton lui-même plutôt que sur le footer.

   #786D58 est le même ton, assombri d'environ 23 %. Il conserve la
   hiérarchie avec --ink-2 (#5A5040), qui reste nettement plus foncé.

   Contrastes obtenus :
     sur --cream  (#F8F4F1) : 4,65:1  (pied de page, .pain-who)
     sur --chalk  (#FFFFFF) : 5,09:1  (.sol-num, .testi-role, .m-card-desc)

   ATTENTION : ce jeton ne doit plus servir de couleur de texte sur fond
   sombre. Les deux usages concernés sont neutralisés au point 2.
   ------------------------------------------------------------ */
:root{
	--ink-3:#786D58;
}

/* ------------------------------------------------------------
   2. Fonds sombres : le tertiaire assombri deviendrait illisible.

   Sur le fond du bloc Contact (--ink #1C1812, champs à 7 % de blanc),
   #786D58 ne donne que 2,9:1. On y remonte au gris chaud clair déjà
   utilisé par .contact-left p et .jamia-desc : 5,2:1.

   .form-note était déjà non conforme avant cette correction : la maquette
   lui donnait #5C5040, soit 2,2:1 sur ce même fond. C'est la mention RGPD
   sous le formulaire, elle doit être lisible.
   ------------------------------------------------------------ */
.sbd-block-contact .contact-right ::placeholder{color:#A89880;opacity:1;}
.sbd-block-contact .form-note{color:#A89880;}

/* La fenêtre de conversation du bloc JAM.IA est une illustration : son champ
   de saisie n'est pas un vrai formulaire, mais son texte reste lu par les
   outils d'audit. Même remontée de contraste, même valeur. */
.jamia-input-row input::placeholder{color:#A89880;opacity:1;}

/* ===== media.css ===== */
/* ============================================================
   Médias — compatibilité avec la conversion WebP en balises <picture>
   Chargé APRÈS a11y.css, donc en dernier.

   COMPORTEMENT CONSTATÉ DE L'EXTENSION (WPMasterToolkit)
   Elle enveloppe chaque image et DÉPLACE la classe de l'<img> sur le
   <picture>, tout en dupliquant loading / fetchpriority / decoding :

     <picture class="hero-page-img" loading="eager" ...>
       <source type="image/webp" srcset="...jpg.webp">
       <img loading="eager" src="...jpg" alt="...">
     </picture>

   L'<img> interne n'a donc plus de classe. Quand l'image d'origine n'en
   portait pas, le <picture> n'en porte pas non plus.

   D'où DEUX SITUATIONS OPPOSÉES, qui appellent deux traitements.

   ------------------------------------------------------------
   1. Images sans classe : le <picture> doit s'effacer.

   Le thème les dimensionne par sélecteur descendant : .split-media img,
   .blog-card-media img, .story-media img, .article-body img. Ces règles
   continuent de viser l'<img> interne, mais le <picture> s'intercale : il
   est inline et de hauteur auto, donc les height:100% ne se résolvent plus
   et l'image reprend sa hauteur intrinsèque. Le recadrage 16/10 des cartes
   du blog et la colonne 100vh du bloc Notre histoire cassent.

   display:contents supprime la boîte du <picture> : l'<img> redevient
   enfant direct de son conteneur et tout se comporte comme avant.
   ------------------------------------------------------------ */
picture{ display:contents; }

/* ------------------------------------------------------------
   2. Images à classe : c'est le <picture> qui porte les règles.

   Trois images du thème sont stylisées par une classe posée directement
   sur la balise : les en-têtes .hero-full-img, .hero-page-img et
   .blog-hero-img. Toutes trois sont en position:absolute; inset:0;
   object-fit:cover pour couvrir leur section.

   Cette classe se retrouvant sur le <picture>, c'est lui qui doit rester
   une boîte positionnée : display:contents l'effacerait, et l'image
   retomberait dans le flux — elle deviendrait un élément flex à côté du
   texte, puisque ces sections sont en display:flex.

   On les exclut donc de la règle ci-dessus.
   ------------------------------------------------------------ */
picture.hero-full-img,
picture.hero-page-img,
picture.blog-hero-img{ display:block; }

/* L'<img> interne n'a plus de classe : il doit remplir le cadre posé par le
   <picture> et reprendre son cadrage. object-fit et object-position ne sont
   pas des propriétés héritées, d'où le mot-clé inherit : il récupère ainsi
   le « cover » et le point de recadrage (center 30%, center 32%) propres à
   chaque en-tête, sans les réécrire ici. */
picture.hero-full-img > img,
picture.hero-page-img > img,
picture.blog-hero-img > img{
	display:block;
	width:100%;
	height:100%;
	object-fit:inherit;
	object-position:inherit;
}

/* ------------------------------------------------------------
   3. Repli navigateurs sans display:contents.

   Le <picture> reste alors une boîte : on lui donne au moins le
   comportement bloc, ce qui évite l'espace de baseline sous les images.
   Les hauteurs en pourcentage n'y seront pas correctes, mais le support
   de display:contents est généralisé depuis 2020.
   ------------------------------------------------------------ */
@supports not (display:contents){
	picture{ display:block; }
}

/* ============================================================
   CE QUE CETTE APPROCHE NE COUVRE PAS
   Les images de fond CSS ne passent par aucun <img> et ne sont donc pas
   converties : le bloc Espace RH (--rh-bg), le bloc Différenciateur
   (--diff-bg) et les images de repli de sbd_img() continuent de servir le
   fichier d'origine.

   SI L'EXTENSION CHANGE DE COMPORTEMENT
   Le partage ci-dessus repose sur un point précis : la classe est sur le
   <picture>, pas sur l'<img>. Si une mise à jour la laissait sur l'<img>,
   la règle 1 suffirait seule et les règles 2 deviendraient inutiles (sans
   pour autant nuire : elles ne matcheraient plus). Vérifier le HTML généré
   après toute mise à jour de l'extension.
   ============================================================ */