/* Feuille partagee par les pages de contenu Voltea Acquisition.
   Les jetons sont repris de la page d'accueil pour que l'ensemble reste
   un seul et meme site. Les effets 3D du hero n'y sont pas : sur une page
   de lecture, ils coutent de la performance sans rien apporter. */

*{box-sizing:border-box;margin:0;padding:0}

:root{
  --papier:#FBF8F2; --releve:#F3EEE4; --creme:#FEFCF8;
  --encre:#12241B; --encre-2:#2C4237; --doux:#6B7F74; --texte:#33473C;
  --vert:#1FA463; --vert-vif:#35C67D; --vert-sombre:#14663F;
  --filet:rgba(18,36,27,.13); --filet-fin:rgba(18,36,27,.07);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --pose:0 1px 2px rgba(18,36,27,.04), 0 2px 6px rgba(18,36,27,.04),
         0 6px 14px rgba(18,36,27,.045);
  --souleve:0 2px 4px rgba(18,36,27,.05), 0 8px 18px rgba(18,36,27,.06),
            0 22px 44px rgba(18,36,27,.09);
  --lent:cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--papier); color:var(--texte); font-family:var(--sans);
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga","calt"; overflow-x:clip;
}
/* le grain rechauffe le fond et casse l'aspect aplat numerique */
body::before{
  content:""; position:fixed; inset:0; z-index:900; pointer-events:none;
  opacity:.038; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.lecture{max-width:760px;margin:0 auto;padding:0 32px}
a{color:inherit}
img{max-width:100%;height:auto}

/* ---------- acces clavier ---------- */
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);
  color:var(--creme);padding:12px 20px;z-index:1000}
.saut:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--vert-sombre);
  outline-offset:3px}

/* ---------- en-tete ---------- */
header{position:sticky;top:0;z-index:800;background:rgba(251,248,242,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s}
header.pose{border-bottom-color:var(--filet-fin);
  box-shadow:0 1px 20px rgba(18,36,27,.04)}
header .wrap{display:flex;align-items:center;gap:28px;height:76px}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none}
.marque img{height:30px;width:auto}
.marque b{font-weight:700;letter-spacing:.16em;font-size:13.5px;line-height:1;
  color:var(--encre)}
.marque i{display:block;font-style:normal;font-size:7.5px;letter-spacing:.38em;
  color:var(--doux);margin-top:3px}
/* Ces regles sont volontairement prefixees par header : le fil d'Ariane est lui
   aussi un <nav>, et un selecteur global le masquait sous 1000px de large. */
header nav{margin-left:auto;display:flex;gap:32px;align-items:center}
header nav a{text-decoration:none;font-size:14.5px;color:var(--doux);
  position:relative;padding-bottom:3px;transition:color .2s}
header nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;
  width:0;background:var(--encre);transition:width .3s var(--lent)}
header nav a:hover{color:var(--encre)}
header nav a:hover::after{width:100%}
@media(max-width:1000px){header nav a:not(.btn){display:none}}
@media(max-width:620px){
  .wrap,.lecture{padding:0 22px}
  header .wrap{gap:14px}
  header .btn{padding:12px 16px;font-size:13.5px;white-space:nowrap}
}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--encre);
  color:var(--creme);text-decoration:none;padding:15px 27px;font-weight:600;
  font-size:15px;border:1px solid var(--encre);min-height:48px;
  box-shadow:0 1px 2px rgba(18,36,27,.16),0 4px 10px rgba(18,36,27,.10);
  transition:transform .2s var(--lent),box-shadow .2s var(--lent),
             background .2s,color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--souleve);
  background:var(--encre-2);border-color:var(--encre-2)}
.btn.creux{background:transparent;color:var(--encre);border-color:var(--filet);
  box-shadow:none}
.btn.creux:hover{background:var(--releve);color:var(--encre)}

/* ---------- fil d'ariane ---------- */
.fil{font-size:13.5px;color:var(--doux);padding-top:26px}
.fil a{text-decoration:none;border-bottom:1px solid var(--filet-fin)}
.fil a:hover{color:var(--encre);border-bottom-color:var(--encre)}
.fil span{margin:0 8px;opacity:.5}

/* ---------- typographie de lecture ---------- */
.tete{padding:34px 0 46px}
.oeil{font-family:var(--sans);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--vert-sombre);font-weight:600;
  margin-bottom:18px}
h1{font-family:var(--serif);font-weight:300;color:var(--encre);
  font-size:clamp(2.1rem,1.1rem+3.4vw,3.5rem);line-height:1.08;
  letter-spacing:-.018em;text-wrap:balance}
.chapeau{font-size:clamp(1.06rem,1rem+.4vw,1.3rem);color:var(--encre-2);
  margin-top:22px;line-height:1.6;text-wrap:pretty}
article{padding-bottom:20px}
article h2{font-family:var(--serif);font-weight:400;color:var(--encre);
  font-size:clamp(1.5rem,1.15rem+1.3vw,2.1rem);line-height:1.2;
  letter-spacing:-.012em;margin:54px 0 18px;text-wrap:balance}
article h3{font-family:var(--sans);font-weight:600;color:var(--encre);
  font-size:1.13rem;margin:32px 0 12px}
article p{margin-bottom:16px;text-wrap:pretty}
article ul,article ol{margin:0 0 20px 22px}
article li{margin-bottom:9px;padding-left:4px}
article strong{color:var(--encre);font-weight:600}
article a{color:var(--vert-sombre);text-decoration:none;
  border-bottom:1px solid rgba(20,102,63,.32);transition:border-color .2s}
article a:hover{border-bottom-color:var(--vert-sombre)}

/* ---------- encarts ---------- */
.encart{background:var(--creme);border:1px solid var(--filet-fin);
  border-left:3px solid var(--vert);padding:24px 26px;margin:30px 0;
  box-shadow:var(--pose)}
.encart p:last-child{margin-bottom:0}
.encart h3{margin-top:0}

/* ---------- tableau ---------- */
.tableau{overflow-x:auto;margin:28px 0;box-shadow:var(--pose);
  background:var(--creme);border:1px solid var(--filet-fin)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--filet-fin);
  vertical-align:top}
th{background:var(--releve);color:var(--encre);font-weight:600;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase}
tr:last-child td{border-bottom:none}

/* ---------- questions ---------- */
.qr{border-top:1px solid var(--filet-fin);padding:20px 0}
.qr summary{cursor:pointer;font-weight:600;color:var(--encre);font-size:1.02rem;
  list-style:none;display:flex;gap:14px;align-items:flex-start}
.qr summary::-webkit-details-marker{display:none}
.qr summary::before{content:"+";color:var(--vert-sombre);font-weight:400;
  font-size:1.3rem;line-height:1.2}
.qr[open] summary::before{content:"–"}
.qr p{margin-top:12px;padding-left:28px}

/* ---------- appel a l'action ---------- */
.appel{background:var(--encre);color:var(--creme);margin-top:64px;
  padding:64px 0}
.appel h2{font-family:var(--serif);font-weight:300;color:var(--creme);
  font-size:clamp(1.6rem,1.2rem+1.6vw,2.4rem);line-height:1.15;margin:0 0 16px}
.appel p{color:rgba(254,252,248,.78);max-width:56ch;margin-bottom:28px}
.appel .btn{background:var(--vert);border-color:var(--vert);color:#04150C}
.appel .btn:hover{background:var(--vert-vif);border-color:var(--vert-vif)}
.appel .tel{margin-left:22px;color:rgba(254,252,248,.78);text-decoration:none;
  font-size:15px;border-bottom:1px solid rgba(254,252,248,.28)}
.appel .tel:hover{color:var(--creme)}

/* ---------- pages liees ---------- */
.liees{padding:56px 0 8px}
.liees h2{font-family:var(--serif);font-weight:400;color:var(--encre);
  font-size:1.5rem;margin-bottom:22px}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:16px}
.carte{display:block;text-decoration:none;background:var(--creme);
  border:1px solid var(--filet-fin);padding:22px;box-shadow:var(--pose);
  transition:transform .2s var(--lent),box-shadow .2s var(--lent)}
.carte:hover{transform:translateY(-3px);box-shadow:var(--souleve)}
.carte b{display:block;color:var(--encre);font-weight:600;margin-bottom:7px;
  font-size:1rem}
.carte span{color:var(--doux);font-size:14.5px;line-height:1.55}

/* ---------- pied ---------- */
footer{background:var(--releve);border-top:1px solid var(--filet-fin);
  margin-top:0;padding:54px 0 30px;font-size:14.5px;color:var(--doux)}
footer .cols{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:34px}
footer h4{font-family:var(--sans);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--encre);margin-bottom:14px;font-weight:600}
footer a{text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:var(--encre);border-bottom-color:var(--filet)}
footer .bas{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  border-top:1px solid var(--filet-fin);margin-top:36px;padding-top:20px;
  font-size:13px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}