/* ============================================================
   DIGAL CONSULTING — charte graphique Août 2023
   Poppins · #191919 · #f4c01e · #ffdc55 · angles droits
   ============================================================ */
:root{
  --noir:#191919; --noir2:#282828; --gris:#808285;
  --gris-clair:#c8c8c8; --blanc:#fafafa; --blanc-pur:#ffffff;
  --jaune:#f4c01e; --jaune-encart:#ffdc55;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;background:var(--blanc);color:var(--noir);
  font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- langue : une seule affichée ---------- */
html[data-lang="fr"] .en{display:none!important}
html[data-lang="en"] .fr{display:none!important}

/* ---------- typographie ---------- */
h1,h2{font-weight:800;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-weight:600;font-size:1.15rem;line-height:1.3}
.j{color:var(--jaune)}
p{font-weight:400}
.grand-p{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--gris);max-width:640px}
.sombre .grand-p{color:var(--gris-clair)}

/* ---------- encart jaune (charte) ---------- */
.encart-tag{display:inline-block;background:var(--jaune-encart);color:var(--noir);
  font-weight:600;font-size:.8rem;padding:.5rem 1rem;text-transform:none;margin-bottom:1.6rem}
.encart-tag b{font-weight:700}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:100;background:var(--blanc-pur);border-bottom:1px solid #eee}
.sombre-nav nav{background:var(--noir);border-bottom:1px solid var(--noir2)}
.sombre-nav .menu a,.sombre-nav .deroulant>button{color:var(--blanc-pur)}
.sombre-nav .menu a:hover{color:var(--jaune)}
.nav-in{max-width:1240px;margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;gap:2rem}
.logo{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.logo .dc{font-family:Georgia,'Times New Roman',serif;font-size:1.9rem;line-height:1;color:var(--noir)}
.logo .dc span{color:var(--gris)}
.logo .mots{display:flex;flex-direction:column;line-height:1.05}
.logo .mots b{font-weight:600;font-size:1.05rem;letter-spacing:.35em}
.logo .mots small{font-weight:400;font-size:.55rem;letter-spacing:.42em;color:var(--gris)}
.menu{display:flex;align-items:center;gap:1.6rem;font-size:.92rem;font-weight:500}
.menu a:hover{color:var(--jaune)}
.menu .actif{border-bottom:2px solid var(--jaune)}
.deroulant{position:relative}
.deroulant>button{background:none;border:none;font:inherit;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.3rem}
.deroulant-liste{display:none;position:absolute;top:2.2rem;left:0;background:var(--noir);min-width:230px;padding:.5rem 0}
.deroulant.ouvert .deroulant-liste{display:block}
.deroulant-liste a{display:block;padding:.65rem 1.2rem;color:var(--blanc-pur);font-size:.88rem}
.deroulant-liste a:hover{background:var(--noir2);color:var(--jaune)}
.lang{display:flex;border:1px solid var(--noir)}
.sombre-nav .lang{border-color:var(--gris)}
.lang button{background:none;border:none;font:inherit;font-weight:600;font-size:.78rem;
  padding:.4rem .7rem;cursor:pointer;color:var(--noir)}
.sombre-nav .lang button{color:var(--blanc-pur)}
.lang button.actif{background:var(--jaune);color:var(--noir)}
.burger{display:none;background:none;border:none;cursor:pointer;width:30px;height:22px;position:relative}
.burger span{position:absolute;left:0;width:100%;height:2px;background:var(--noir);transition:.2s}
.sombre-nav .burger span{background:var(--blanc-pur)}
.burger span:nth-child(1){top:0}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:20px}

/* ---------- boutons : angles droits (charte) ---------- */
.btn{display:inline-block;font-weight:600;font-size:.95rem;padding:1rem 2.2rem;
  border:2px solid transparent;transition:.15s;cursor:pointer}
.btn-jaune{background:var(--jaune);color:var(--noir)}
.btn-jaune:hover{background:var(--noir);color:var(--blanc-pur)}
.sombre .btn-jaune:hover,.heros .btn-jaune:hover{background:var(--blanc-pur);color:var(--noir)}
.btn-noir{background:var(--noir);color:var(--blanc-pur)}
.btn-noir:hover{background:var(--jaune);color:var(--noir)}
.btn-ligne{border-color:var(--noir);color:var(--noir)}
.btn-ligne:hover{background:var(--noir);color:var(--blanc-pur)}
.btn-ligne-blanc{border-color:var(--blanc-pur);color:var(--blanc-pur)}
.btn-ligne-blanc:hover{background:var(--blanc-pur);color:var(--noir)}
.lien-j{font-weight:600;color:var(--noir);border-bottom:2px solid var(--jaune);padding-bottom:2px}
.lien-j:hover{color:var(--jaune)}

/* ---------- sections ---------- */
section{padding:96px 0}
.sombre{background:var(--noir);color:var(--blanc-pur)}
.sombre h1,.sombre h2{color:var(--blanc-pur)}
.gris-fond{background:#f1f1f1}

/* ---------- héros ---------- */
.heros{background:var(--noir);color:var(--blanc-pur);padding:120px 0 110px}
.heros h1{max-width:820px;margin-bottom:1.6rem}
.heros.heros-large h1{max-width:1100px}
.heros.heros-serre{padding:72px 0 62px}
.heros .grand-p{margin-bottom:2.4rem}
.heros .actions{display:flex;gap:1rem;flex-wrap:wrap}
.note{font-size:.85rem;color:var(--gris);margin-top:1.2rem}

/* ---------- bandeau confiance ---------- */
.confiance{background:var(--noir);border-top:1px solid var(--noir2);padding:2rem 0}
.confiance .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.6rem;align-items:center;justify-content:center}
.confiance span{color:var(--gris);font-size:.8rem;letter-spacing:.22em;font-weight:500;text-transform:uppercase}

/* ---------- grilles / cartes ---------- */
.grille{display:grid;gap:2px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.carte{background:var(--blanc-pur);padding:2.4rem;border:1px solid #ececec}
.sombre .carte{background:var(--noir2);border-color:var(--noir2);color:var(--blanc-pur)}
.carte h3{margin-bottom:.8rem}
.carte p{font-size:.95rem;color:var(--gris)}
.sombre .carte p{color:var(--gris-clair)}
.carte .num{font-weight:800;font-size:.85rem;color:var(--jaune);display:block;margin-bottom:1rem;letter-spacing:.15em}

/* ---------- chiffres ---------- */
.chiffres{display:flex;justify-content:center;gap:2.5rem 4rem;flex-wrap:wrap;text-align:center}
.chiffre{flex:0 1 240px}
.chiffre .val{font-weight:800;font-size:clamp(2rem,4vw,3.2rem);color:var(--jaune);display:block;line-height:1}
.chiffre .lab{font-size:.85rem;color:var(--gris);display:block;margin-top:.6rem}
.sombre .chiffre .lab{color:var(--gris-clair)}

/* ---------- listes ---------- */
ul.simple{list-style:none}
ul.simple li{padding:.45rem 0 .45rem 1.6rem;position:relative;font-size:.95rem}
ul.simple li::before{content:"→";position:absolute;left:0;color:var(--jaune);font-weight:700}

/* ---------- avant / après ---------- */
.av-ap{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.av,.ap{padding:2.6rem}
.av{background:var(--noir2);color:var(--gris-clair)}
.ap{background:var(--jaune);color:var(--noir)}
.av h3{color:var(--blanc-pur);margin-bottom:1.2rem}
.ap h3{color:var(--noir);margin-bottom:1.2rem}
.av ul,.ap ul{list-style:none}
.av li,.ap li{padding:.4rem 0 .4rem 1.5rem;position:relative;font-size:.93rem}
.av li::before{content:"✕";position:absolute;left:0;font-weight:700;color:var(--gris)}
.ap li::before{content:"✓";position:absolute;left:0;font-weight:700}
.ap li{font-weight:500}

/* ---------- témoignages ---------- */
.temoin{background:var(--blanc-pur);border-left:4px solid var(--jaune);padding:2rem 2.4rem}
.temoin p{font-size:1rem}
.temoin footer{margin-top:1rem;font-weight:600;font-size:.85rem}
.temoin footer small{display:block;color:var(--gris);font-weight:400}

/* ---------- offres ---------- */
.offre{background:var(--blanc-pur);border:1px solid #ececec;padding:2.6rem;display:flex;flex-direction:column}
.offre.vedette{border:2px solid var(--jaune)}
.offre .prix{font-weight:800;font-size:1.6rem;margin:.6rem 0 1.2rem}
.offre ul{list-style:none;margin-bottom:1.8rem;flex:1}
.offre li{padding:.35rem 0 .35rem 1.5rem;position:relative;font-size:.9rem;color:var(--gris)}
.offre li::before{content:"✓";position:absolute;left:0;color:var(--jaune);font-weight:700}

/* ---------- étapes ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.etape{background:var(--blanc-pur);border:1px solid #ececec;padding:2.2rem}
.sombre .etape{background:var(--noir2);border-color:var(--noir2)}
.etape .num{font-weight:800;font-size:2rem;color:var(--jaune);display:block;margin-bottom:.8rem}
.etape p{font-size:.9rem;color:var(--gris)}
.sombre .etape p{color:var(--gris-clair)}

/* ---------- FAQ ---------- */
details{background:var(--blanc-pur);border:1px solid #ececec;margin-bottom:2px}
summary{cursor:pointer;font-weight:600;padding:1.3rem 1.6rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::after{content:"+";font-weight:700;color:var(--jaune);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"−"}
details p{padding:0 1.6rem 1.4rem;font-size:.95rem;color:var(--gris)}

/* ---------- cta final ---------- */
.cta-final{background:var(--jaune);color:var(--noir);text-align:center;padding:110px 0}
.cta-final h2{color:var(--noir);max-width:760px;margin:0 auto 1.4rem}
.cta-final p{max-width:560px;margin:0 auto 2.2rem;font-weight:500}
.cta-final .btn-noir:hover{background:var(--blanc-pur);color:var(--noir)}

/* ---------- pied ---------- */
footer.pied{background:var(--noir);color:var(--gris-clair);padding:70px 0 40px;font-size:.9rem}
.pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.pied h4{color:var(--blanc-pur);font-weight:600;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.pied a{display:block;padding:.25rem 0;color:var(--gris-clair)}
.pied a:hover{color:var(--jaune)}
.pied-bas{border-top:1px solid var(--noir2);padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--gris);font-size:.8rem}

/* ---------- animations ---------- */
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rev.vu{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .g4,.chiffres,.etapes{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .pied-grille{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  section{padding:64px 0}
  .heros{padding:80px 0}
  .g2,.av-ap{grid-template-columns:1fr}
  .menu{display:none;position:fixed;inset:76px 0 0 0;background:var(--noir);flex-direction:column;
    align-items:flex-start;padding:2rem 24px;gap:1.2rem;font-size:1.1rem;overflow:auto}
  .menu a{color:var(--blanc-pur)}
  .menu.ouvert{display:flex}
  .deroulant>button{color:var(--blanc-pur)}
  .deroulant-liste{position:static;background:none;padding:0 0 0 1rem}
  .burger{display:block}
}
@media (max-width:560px){.g4,.chiffres,.etapes{grid-template-columns:1fr}}

/* ---------- logos officiels ---------- */
.logo-img{height:44px;width:auto}
footer.pied .logo-img{height:38px}
@media (max-width:760px){.logo-img{height:36px}}

/* ---------- bandeau clients défilant ---------- */
.defile{background:var(--noir);border-top:1px solid var(--noir2);padding:1.6rem 0;overflow:hidden}
.defile-piste{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:defiler 40s linear infinite}
.defile:hover .defile-piste{animation-play-state:paused}
.defile a,.defile span{color:var(--gris);font-size:.8rem;letter-spacing:.22em;font-weight:500;text-transform:uppercase;white-space:nowrap}
.defile a:hover,.defile span:hover{color:var(--jaune)}
@keyframes defiler{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .defile-piste{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .defile-piste .copie{display:none}
}

/* ---------- photo fondatrice ---------- */
.photo-fondatrice{width:150px;height:150px;border-radius:50%;object-fit:cover;margin-bottom:1.4rem}

/* ---------- logos clients dans le bandeau ---------- */
.defile a,.defile span{display:flex;align-items:center}
.defile img{height:32px;width:auto;max-width:160px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.72;transition:filter .2s,opacity .2s}
.defile a:hover img,.defile span:hover img{filter:none;opacity:1}
@media (max-width:760px){.defile img{height:26px}}


/* ---------- diaporama photos subtil (héros) ---------- */
.heros{position:relative;overflow:hidden}
.heros .wrap{position:relative;z-index:2}
.heros-diapo{position:absolute;inset:0;z-index:0;pointer-events:none}
.heros-diapo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  opacity:0;transition:opacity 3s ease;filter:grayscale(1) contrast(1.02)}
.heros-diapo img.actif{opacity:.16}
.heros-diapo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(25,25,25,.55) 0%,rgba(25,25,25,.15) 55%,rgba(25,25,25,.45) 100%)}
@media (prefers-reduced-motion:reduce){.heros-diapo img{transition:none}}

/* ---------- slider de motifs africains (sections blanches) ---------- */
section:not(.heros):not(.sombre):not(.gris-fond):not(.cta-final){position:relative}
section:not(.heros):not(.sombre):not(.gris-fond):not(.cta-final)::before,
section:not(.heros):not(.sombre):not(.gris-fond):not(.cta-final)::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-repeat:repeat;background-size:160px 160px}
section:not(.heros):not(.sombre):not(.gris-fond):not(.cta-final)::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%20%3Cg%20fill='none'%20stroke='%23191919'%20stroke-width='2'%3E%20%3Cpath%20d='M0%2024h160'%20stroke-dasharray='16%2012'/%3E%20%3Cpath%20d='M0%2040h160'%20stroke-dasharray='6%2014'/%3E%20%3Cpath%20d='M0%2084l16-14%2016%2014%2016-14%2016%2014%2016-14%2016%2014%2016-14%2016%2014%2016-14%2016%2014'/%3E%20%3Cpath%20d='M0%20128h160'%20stroke-dasharray='16%2012'/%3E%20%3C/g%3E%20%3Cg%20fill='%23191919'%3E%20%3Crect%20x='16'%20y='102'%20width='7'%20height='7'%20transform='rotate(45%2019.5%20105.5)'/%3E%20%3Crect%20x='56'%20y='102'%20width='7'%20height='7'%20transform='rotate(45%2059.5%20105.5)'/%3E%20%3Crect%20x='96'%20y='102'%20width='7'%20height='7'%20transform='rotate(45%2099.5%20105.5)'/%3E%20%3Crect%20x='136'%20y='102'%20width='7'%20height='7'%20transform='rotate(45%20139.5%20105.5)'/%3E%20%3C/g%3E%20%3C/svg%3E");opacity:.07;
  animation:motif-derive 80s linear infinite,motif-fondu-a 30s ease-in-out infinite}
section:not(.heros):not(.sombre):not(.gris-fond):not(.cta-final)::after{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%20%3Cg%20fill='none'%20stroke='%23191919'%20stroke-width='2'%3E%20%3Cpath%20d='M8%2048%20L28%2016%20L48%2048%20Z'/%3E%20%3Cpath%20d='M88%2048%20L108%2016%20L128%2048%20Z'/%3E%20%3Cpath%20d='M48%20128%20L68%2096%20L88%20128%20Z'/%3E%20%3Cpath%20d='M128%20128%20L148%2096%20L168%20128%20Z'/%3E%20%3C/g%3E%20%3Cg%20fill='%23f4c01e'%3E%20%3Crect%20x='60'%20y='28'%20width='8'%20height='8'%20transform='rotate(45%2064%2032)'/%3E%20%3Crect%20x='140'%20y='28'%20width='8'%20height='8'%20transform='rotate(45%20144%2032)'/%3E%20%3Crect%20x='20'%20y='108'%20width='8'%20height='8'%20transform='rotate(45%2024%20112)'/%3E%20%3Crect%20x='100'%20y='108'%20width='8'%20height='8'%20transform='rotate(45%20104%20112)'/%3E%20%3C/g%3E%20%3Cg%20stroke='%23191919'%20stroke-width='2'%3E%20%3Cpath%20d='M0%2072h160'%20stroke-dasharray='4%2016'/%3E%20%3Cpath%20d='M0%20152h160'%20stroke-dasharray='4%2016'/%3E%20%3C/g%3E%20%3C/svg%3E");opacity:0;
  animation:motif-derive 80s linear infinite reverse,motif-fondu-b 30s ease-in-out infinite}
@keyframes motif-derive{from{background-position:0 0}to{background-position:320px 0}}
@keyframes motif-fondu-a{0%,42%{opacity:.07}50%,92%{opacity:0}100%{opacity:.07}}
@keyframes motif-fondu-b{0%,42%{opacity:0}50%,92%{opacity:.07}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  section:not(.heros):not(.sombre):not(.gris-fond):not(.cta-final)::before{animation:none;opacity:.05}
  section:not(.heros):not(.sombre):not(.gris-fond):not(.cta-final)::after{animation:none;opacity:0}
}

/* ---------- formulaires de qualification ---------- */
.form-zone{max-width:820px;margin:0 auto}
.q{margin-bottom:2.2rem}
.q-titre{font-weight:700;margin-bottom:1rem;display:flex;gap:.8rem;align-items:baseline;font-size:1.05rem}
.q-num{background:var(--jaune);color:var(--noir);font-weight:800;padding:.02rem .6rem;flex:none}
.choix{display:flex;flex-wrap:wrap;gap:.6rem}
.choix label{position:relative;border:1.5px solid #c8c8c8;padding:.6rem 1.1rem;cursor:pointer;
  font-size:.92rem;font-weight:500;transition:border-color .15s,background .15s,color .15s;background:var(--blanc-pur)}
.choix label:hover{border-color:var(--noir)}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix label:has(input:checked){background:var(--noir);border-color:var(--noir);color:var(--blanc-pur)}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.6rem}
.champs .large{grid-column:1/-1}
.champs input,.champs textarea{width:100%;border:1.5px solid #c8c8c8;padding:.85rem 1rem;font:inherit;background:var(--blanc-pur)}
.champs input:focus,.champs textarea:focus{outline:2px solid var(--jaune);border-color:var(--noir)}
.champs label{font-size:.85rem;font-weight:600;display:block;margin-bottom:.35rem}
.consentement{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--gris);margin-top:1.2rem}
.consentement input{margin-top:.2rem;accent-color:var(--noir)}
.merci{display:none;text-align:center;padding:3.5rem 1.5rem;background:var(--blanc-pur);border:1.5px solid var(--noir)}
.merci.visible{display:block}
.merci-coche{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  background:var(--jaune);color:var(--noir);font-size:1.8rem;font-weight:800;margin-bottom:1.4rem}
.merci h2{margin-bottom:1rem}
.merci p{max-width:520px;margin:0 auto 1rem;color:var(--gris)}
.merci .delai{color:var(--noir);font-weight:700}

/* ---------- agrandissements bandeau ---------- */
.defile img[src*="africanize"]{height:46px}
.defile img[src*="air-france"]{height:44px}
.defile img[src*="pi-africa"]{height:44px}
.defile img[src*="accel"]{height:44px}
.defile img[src*="negocongo"]{height:44px}
.defile img[src*="kabamba"]{height:46px}
.defile img[src*="cnes"]{height:48px}
.defile img[src*="paris-aeroport"]{height:48px}
.defile a:not(:has(img)),.defile span:not(:has(img)){font-size:1.25rem;font-weight:700;letter-spacing:.06em}
@media (max-width:760px){
  .defile img[src*="africanize"],.defile img[src*="air-france"],
  .defile img[src*="pi-africa"],.defile img[src*="accel"]{height:34px}
}

/* ---------- bouton d'appel dans le header ---------- */
.btn-nav{padding:.55rem 1.1rem;font-size:.82rem;white-space:nowrap;margin-left:auto;margin-right:1rem}
.nav-in .menu{margin-left:auto}
.nav-in .btn-nav{margin-left:1.6rem}
@media (max-width:1080px){.btn-nav{display:none}}

/* ---------- icônes réseaux (pied de page) ---------- */
.sociaux{display:flex;gap:1.4rem;margin-top:1.1rem;flex-wrap:wrap}
.sociaux a{display:inline-flex;align-items:center;gap:.5rem;color:var(--gris-clair);font-size:.85rem}
.sociaux svg{width:19px;height:19px;fill:currentColor;flex:none}
.sociaux a:hover{color:var(--jaune)}

/* ---------- icônes LinkedIn (header + inline) ---------- */
.lin-nav{display:inline-flex;align-items:center;margin-left:1rem;color:var(--blanc-pur)}
.lin-nav svg{width:20px;height:20px;fill:currentColor}
.lin-nav:hover{color:var(--jaune)}
.lin-inline{display:inline-flex;align-items:center;color:var(--noir)}
.lin-inline svg{width:19px;height:19px;fill:currentColor}
.lin-inline:hover{color:var(--jaune)}