/* Tangram : portfolio : feuille de style générale (refonte v2)
   Couleurs tirées du logo Tangram : indigo profond, violet, bleu-violet, lavande,
   et le triangle jaune comme accent. Fond crème conservé (pas de mode sombre). */
:root{
  --bg:#F4F3EE;
  --bg-card:#FFFDF8;
  --bg-dim:#E9E6DC;
  --fg:#2F2951;
  --fg-soft:#6A6485;
  --line:#E2DDD0;
  --violet:#6E2383;
  --violet-2:#6B3F90;
  --blue:#44499C;
  --periwinkle:#797BB9;
  --lavender:#9C9CCD;
  --lavender-soft:#E7E5F3;
  --yellow:#F6B700;
  --accent:var(--violet);
  --radius:20px;
  --radius-sm:12px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --shadow:0 1px 2px rgba(47,41,81,.06), 0 18px 40px -22px rgba(47,41,81,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(900px 520px at 92% -8%, rgba(156,156,205,.30), transparent 62%),
    radial-gradient(700px 420px at -6% 18%, rgba(246,183,0,.07), transparent 60%),
    var(--bg);
  background-repeat:no-repeat;
  color:var(--fg);
  font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%;}
::selection{background:var(--yellow); color:var(--fg);}
:focus-visible{outline:2px solid var(--violet); outline-offset:3px; border-radius:4px;}

/* ---------- en-tête ---------- */
header.bandeau{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  height:68px;
  background:rgba(244,243,238,.82);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(47,41,81,.07);
}
.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1.18rem; font-weight:800; letter-spacing:-.02em;
  color:var(--fg); text-decoration:none;
}
.brand-mark{display:block; width:30px; height:30px; flex:none; transition:transform .6s var(--ease);}
.brand:hover .brand-mark{transform:rotate(90deg);}
nav.liens{display:flex; align-items:center; gap:.25rem;}
nav.liens a{
  font-size:.9rem; font-weight:600;
  color:var(--fg-soft); text-decoration:none;
  padding:.5rem .9rem; border-radius:999px;
  transition:color .2s, background .2s;
  white-space:nowrap;
}
nav.liens a:hover{color:var(--fg); background:rgba(47,41,81,.06);}
nav.liens a.actif{color:var(--fg); background:var(--lavender-soft);}
nav.liens a[href="demo.html"]{
  margin-left:.4rem;
  background:var(--fg); color:#fff;
  padding-left:.85rem;
  display:inline-flex; align-items:center; gap:.5rem;
}
nav.liens a[href="demo.html"]::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--yellow);
  animation:pulse 2s infinite;
}
nav.liens a[href="demo.html"]:hover, nav.liens a[href="demo.html"].actif{background:var(--violet); color:#fff;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(246,183,0,.7);}
  70%{box-shadow:0 0 0 8px rgba(246,183,0,0);}
  100%{box-shadow:0 0 0 0 rgba(246,183,0,0);}
}
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:28px; height:22px; position:relative;
}
.nav-toggle span{position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--fg);}
.nav-toggle span:nth-child(1){top:3px;}
.nav-toggle span:nth-child(2){top:10px;}
.nav-toggle span:nth-child(3){top:17px;}

@media (max-width:760px){
  nav.liens{
    position:fixed; top:68px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:.25rem;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    padding:.75rem var(--gutter) 1.25rem;
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow:0 30px 40px -30px rgba(47,41,81,.4);
  }
  nav.liens.ouvert{opacity:1; visibility:visible; pointer-events:auto; transform:none;}
  nav.liens a{padding:.8rem 1rem; font-size:1rem;}
  nav.liens a[href="demo.html"]{margin:.4rem 0 0; justify-content:center;}
  .nav-toggle{display:block;}
}

/* ---------- structure ---------- */
main{
  max-width:1240px;
  margin:0 auto;
  padding:0 var(--gutter) clamp(4rem,8vw,7rem);
  position:relative;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--violet);
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:0; height:0;
  border-left:9px solid var(--yellow);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.btn, .btn-primary{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:inherit; font-size:.92rem; font-weight:700;
  text-decoration:none; cursor:pointer;
  padding:.8rem 1.35rem;
  border-radius:999px;
  border:1.5px solid rgba(47,41,81,.18);
  background:transparent; color:var(--fg);
  transition:transform .2s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover{border-color:var(--fg); transform:translateY(-2px);}
.btn-primary{background:var(--fg); border-color:var(--fg); color:#fff;}
.btn-primary:hover{background:var(--violet); border-color:var(--violet); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(110,35,131,.7);}
.btn-yellow{background:var(--yellow); border-color:var(--yellow); color:var(--fg);}
.btn-yellow:hover{background:#ffc928; border-color:#ffc928; color:var(--fg);}

/* apparition au défilement */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0s);}
.reveal.vu{opacity:1; transform:none;}

/* ---------- tangram vivant ---------- */
.tg{display:block; width:100%; height:auto; overflow:visible;}
.tg g{transition:transform 1.15s cubic-bezier(.65,0,.2,1); transition-delay:var(--dl,0s);}
.tg polygon{stroke:var(--bg); stroke-width:3.5; stroke-linejoin:round; transition:filter .3s;}
.tg-stage{position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;}
.tg-stage:hover polygon{filter:brightness(1.06);}
.tg-caption{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  margin-top:.25rem;
  font-size:.8rem; font-weight:600; color:var(--fg-soft);
}
.tg-caption b{color:var(--fg); font-weight:800; min-width:5.5em; text-align:right;}
.tg-caption span{opacity:.75;}

/* ---------- accueil ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center; gap:clamp(1.5rem,4vw,4rem);
  padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem);
}
.hero h1{
  font-size:clamp(2.3rem,5.6vw,4.4rem);
  font-weight:800; line-height:1.02; letter-spacing:-.035em;
  margin:0 0 1.4rem;
  text-wrap:balance;
}
.hero h1 em{font-style:normal; color:var(--violet); position:relative; white-space:nowrap;}
.hero .lede{
  font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.6;
  color:var(--fg-soft); max-width:46ch; margin:0 0 2rem;
  text-wrap:pretty;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem;}
.hero-art{max-width:440px; width:100%; justify-self:center;}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .hero-art{max-width:300px; order:-1; justify-self:start; margin-left:-.5rem;}
}

.section-head{
  display:flex; align-items:end; justify-content:space-between; gap:1rem;
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
  padding-top:.5rem;
}
.section-head h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-.025em; margin:0;}
.section-head .count{font-size:.85rem; font-weight:600; color:var(--fg-soft);}

.grille{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.5rem,3.5vw,3rem) clamp(1.25rem,3vw,2.5rem);
}
@media (max-width:680px){ .grille{grid-template-columns:1fr;} }
.carte{display:block;}
.carte-lien{display:block; text-decoration:none; color:inherit;}
.carte-site{
  display:inline-flex; align-items:center; gap:.35rem; margin:.7rem 0 0 .25rem;
  font-size:.82rem; font-weight:700; color:var(--violet); text-decoration:none;
  background:var(--lavender-soft); border-radius:999px; padding:.35rem .8rem;
  transition:background .2s, color .2s, transform .2s var(--ease);
}
.carte-site:hover{background:var(--violet); color:#fff; transform:translateY(-1px);}
.carte .photo{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius);
  background:var(--bg-dim);
  box-shadow:var(--shadow);
}
.carte .photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
.carte-lien:hover .photo img{transform:scale(1.045);}
.carte .tag{
  position:absolute; left:.9rem; top:.9rem;
  font-size:.7rem; font-weight:700; letter-spacing:.04em;
  color:var(--fg); background:rgba(255,253,248,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:.38rem .75rem; border-radius:999px;
}
.carte .fleche{
  position:absolute; right:.9rem; bottom:.9rem;
  width:46px; height:46px; border-radius:50%;
  background:var(--yellow); color:var(--fg);
  display:grid; place-items:center;
  font-size:1.15rem; font-weight:700;
  transform:translateY(14px) rotate(-45deg); opacity:0;
  transition:transform .45s var(--ease), opacity .3s;
}
.carte-lien:hover .fleche, .carte-lien:focus-visible .fleche{transform:rotate(-45deg); opacity:1;}
.carte .legende{padding:1.05rem .25rem 0;}
.carte .nom{font-size:1.3rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .25rem;}
.carte .sous{font-size:.93rem; line-height:1.5; color:var(--fg-soft); margin:0;}

/* bandeau d'appel */
.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:clamp(4rem,8vw,7rem);
  padding:clamp(2.25rem,5vw,4rem);
  border-radius:calc(var(--radius) + 8px);
  background:linear-gradient(120deg, #2F2951 0%, #44306E 55%, #6E2383 100%);
  color:#fff;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center;
}
.cta-band::before, .cta-band::after{content:""; position:absolute; z-index:-1;}
.cta-band::before{right:-60px; top:-60px; width:260px; height:260px; background:rgba(156,156,205,.22); clip-path:polygon(0 0,100% 0,100% 100%);}
.cta-band::after{right:150px; bottom:-40px; width:150px; height:150px; background:rgba(246,183,0,.9); clip-path:polygon(0 100%,50% 50%,100% 100%); }
.cta-band h2{font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:800; letter-spacing:-.025em; line-height:1.12; margin:0 0 .7rem; text-wrap:balance;}
.cta-band p{margin:0; color:#D9D5EC; max-width:52ch; line-height:1.6;}
.cta-band .eyebrow{color:var(--yellow);}
.cta-actions{display:flex; flex-wrap:wrap; gap:.7rem;}
.cta-band .btn{color:#fff; border-color:rgba(255,255,255,.35);}
.cta-band .btn:hover{border-color:#fff;}
.cta-band .btn-yellow{color:var(--fg); border-color:var(--yellow);}
@media (max-width:760px){ .cta-band{grid-template-columns:1fr;} .cta-band::after{right:20px;} }

/* ---------- pied de page ---------- */
footer{
  background:var(--fg); color:#B9B4D2;
  padding:2rem var(--gutter);
  font-size:.85rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem 1.75rem;
}
footer span:first-child{color:#fff; font-weight:800; font-size:1rem; letter-spacing:-.01em; margin-right:auto; display:inline-flex; align-items:center; gap:.6rem;}
footer span:first-child::before{
  content:""; width:0; height:0;
  border-left:11px solid var(--yellow); border-top:7px solid transparent; border-bottom:7px solid transparent;
}
footer a{color:#B9B4D2; text-decoration:none; transition:color .2s;}
footer a:hover{color:#fff;}

/* ===================================================================
   Pages secondaires
   =================================================================== */
.page-head{
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:clamp(2.5rem,6vw,5rem) 0 clamp(1.5rem,3vw,2.5rem);
}
.page-head-text{min-width:0;}
.page-head:not(:has(.page-head-text)){display:block;}
.page-head h1{
  font-size:clamp(2rem,4.6vw,3.4rem);
  font-weight:800; line-height:1.05; letter-spacing:-.03em;
  margin:0 0 1rem; max-width:20ch; text-wrap:balance;
}
.page-head .lede{max-width:58ch; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.65; color:var(--fg-soft); margin:0; text-wrap:pretty;}
.motif-deco{display:none;}
.motif-live{flex:none; width:clamp(120px,15vw,190px);}
@media (max-width:760px){ .motif-live{display:none;} }
.updated-badge{display:none;}

/* ---------- fiche réalisation ---------- */
.show-hero{padding:clamp(2rem,5vw,4rem) 0 clamp(2rem,4vw,3rem);}
.show-hero .wrap, .show-body .wrap{max-width:none; margin:0;}
.show-hero-grid{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
@media (max-width:760px){ .show-hero-grid{grid-template-columns:1fr;} }
.show-cover{position:relative; display:block; aspect-ratio:4/3; background:var(--bg-dim); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.show-cover img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease);}
a.show-cover:hover img{transform:scale(1.04);}
.show-cover-cta{
  position:absolute; right:1rem; bottom:1rem;
  font-size:.88rem; font-weight:800; color:var(--fg); background:var(--yellow);
  padding:.6rem 1.1rem; border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease);
}
a.show-cover:hover .show-cover-cta{transform:translateY(-3px);}
.show-crumb{font-size:.82rem; font-weight:600; color:var(--fg-soft); margin:0 0 1rem;}
.show-crumb a{color:var(--fg-soft); text-decoration:none; border-bottom:1px solid var(--line);}
.show-crumb a:hover{color:var(--violet); border-color:var(--violet);}
.show-crumb span{margin:0 .3rem; opacity:.5;}
.show-tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color:var(--violet); background:var(--lavender-soft);
  padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem;
}
.show-title{font-size:clamp(2rem,4.6vw,3.3rem); font-weight:800; line-height:1.04; letter-spacing:-.03em; margin:0 0 .6rem;}
.show-subtitle{font-size:1.1rem; color:var(--fg-soft); margin:0 0 1.1rem; line-height:1.5;}
.show-excerpt{font-size:1rem; line-height:1.65; margin:0 0 1.4rem;}
.show-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:0;
  margin:0 0 1.5rem; border-top:1px solid var(--line);
}
.show-facts div{padding:.75rem .75rem .75rem 0; border-bottom:1px solid var(--line);}
.show-facts dt{font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--lavender); margin-bottom:.2rem;}
.show-facts dd{margin:0; font-size:.95rem; font-weight:700; overflow-wrap:anywhere;}
@media (max-width:560px){ .show-facts{grid-template-columns:1fr 1fr;} .show-facts div:has(a){grid-column:1 / -1;} }
.show-facts a, .item-blocks a, .show-excerpt a{color:var(--violet); text-decoration:underline; text-decoration-color:rgba(110,35,131,.35); text-underline-offset:3px;}
.show-facts a:hover, .item-blocks a:hover, .show-excerpt a:hover{text-decoration-color:var(--violet);}
.show-actions{display:flex; flex-wrap:wrap; gap:.6rem;}

.visit-card{
  max-width:820px; margin:2.5rem auto 0;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:.2rem 1.5rem;
  padding:1.5rem 1.75rem; text-decoration:none; color:var(--fg);
  background:var(--bg-card); border:1.5px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s, transform .25s var(--ease), box-shadow .25s;
}
.visit-card:hover{border-color:var(--violet); transform:translateY(-3px); box-shadow:var(--shadow);}
.visit-label{font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#12784A; display:flex; align-items:center; gap:.5rem;}
.visit-label::before{content:""; width:8px; height:8px; border-radius:50%; background:#2FB872; box-shadow:0 0 0 4px rgba(47,184,114,.2);}
.visit-host{grid-column:1; font-size:clamp(1.3rem,3vw,1.9rem); font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere;}
.visit-go{grid-column:2; grid-row:1 / span 2; font-size:.92rem; font-weight:800; color:#fff; background:var(--fg); padding:.8rem 1.35rem; border-radius:999px; white-space:nowrap; transition:background .2s;}
.visit-card:hover .visit-go{background:var(--violet);}
@media (max-width:560px){ .visit-card{grid-template-columns:1fr;} .visit-go{grid-column:1; grid-row:auto; justify-self:start; margin-top:.8rem;} }

.show-body{padding:clamp(1rem,3vw,2rem) 0 0;}
.item-blocks{max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:1.75rem;}
.item-blocks p{font-size:1.05rem; line-height:1.75; margin:0;}
.block-image{margin:0;}
.block-image img{width:100%; border-radius:var(--radius); display:block; box-shadow:var(--shadow);}
.block-image figcaption{font-size:.8rem; color:var(--fg-soft); margin-top:.6rem; text-align:center;}
.block-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem;}
.block-gallery img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-sm);}
.block-video{aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--bg-dim);}
.block-video iframe{width:100%; height:100%; border:0; display:block;}
.show-body .wrap > p{max-width:820px; margin-left:auto; margin-right:auto;}

.item-pager{
  max-width:820px; margin:3rem auto 0; padding-top:2rem;
  border-top:1px solid var(--line);
  display:flex; gap:1rem;
}
.item-pager-link{
  flex:1; min-width:0; text-decoration:none;
  padding:1.1rem 1.25rem;
  background:var(--bg-card);
  border:1px solid var(--line); border-radius:var(--radius-sm);
  transition:border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.item-pager-link:hover{border-color:var(--violet); transform:translateY(-3px); box-shadow:var(--shadow);}
.item-pager-next{text-align:right;}
.item-pager-label{display:block; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--violet); margin-bottom:.3rem;}
.item-pager-title{display:block; font-size:1.05rem; font-weight:800; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
@media (max-width:560px){ .item-pager{flex-direction:column;} .item-pager-next{text-align:left;} }

/* ---------- coulisses ---------- */
.features-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2rem);
  padding-top:clamp(1rem,2vw,1.5rem);
}
@media (max-width:760px){ .features-grid{grid-template-columns:1fr;} }
.feature{
  background:var(--bg-card);
  border:1px solid rgba(47,41,81,.07);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s;
}
.feature:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.feature-body{padding:1.4rem 1.5rem 1.5rem; display:flex; flex-direction:column; flex:1;}
.feature-num{font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--lavender); margin-bottom:.4rem;}
.feature h3{font-size:1.2rem; font-weight:800; letter-spacing:-.015em; margin:0 0 .5rem;}
.feature p{font-size:.95rem; line-height:1.6; color:var(--fg-soft); margin:0;}
.feature-try{
  margin-top:auto; padding-top:1rem; align-self:flex-start;
  font-size:.85rem; font-weight:700; color:var(--violet); text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
}
.feature-try span{transition:transform .25s var(--ease);}
.feature-try:hover span{transform:translateX(4px);}
.feature-media{aspect-ratio:16/10; background:var(--bg-dim); overflow:hidden;}
.feature-media img, .feature-media video{width:100%; height:100%; object-fit:cover; display:block;}
.scene-hint{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-size:.82rem; font-weight:600; color:var(--fg-soft);
  margin:0 0 .25rem;
}
.scene-hint i{font-style:normal; display:inline-flex; align-items:center; gap:.4rem; background:var(--bg-card); border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem;}
.scene-hint i::before{content:""; width:7px; height:7px; border-radius:50%; background:#2FB872;}

/* sections complémentaires de la page Coulisses */
.bo-section{margin-top:clamp(4rem,8vw,6.5rem);}
.bo-section-head{max-width:62ch; margin-bottom:clamp(1.5rem,3vw,2.25rem);}
.bo-section-head h2{font-size:clamp(1.6rem,3.4vw,2.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.1; margin:0 0 .6rem; text-wrap:balance;}
.bo-section-head p{font-size:1.05rem; line-height:1.6; color:var(--fg-soft); margin:0;}
.bo-items{display:grid; gap:clamp(1rem,2vw,1.5rem); margin:0; padding:0; list-style:none;}
.bo-items h3{font-size:1.08rem; font-weight:800; letter-spacing:-.01em; margin:0 0 .4rem;}
.bo-items p{font-size:.95rem; line-height:1.6; color:var(--fg-soft); margin:0;}
.bo-note{font-size:.8rem; color:var(--fg-soft); margin:1.1rem 0 0; max-width:80ch; line-height:1.5;}

.bo-not .bo-items, .bo-stats .bo-items{grid-template-columns:repeat(4,minmax(0,1fr));}
.bo-own .bo-items{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:980px){ .bo-not .bo-items, .bo-stats .bo-items{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:680px){ .bo-not .bo-items, .bo-stats .bo-items, .bo-own .bo-items{grid-template-columns:1fr;} }
.point{background:var(--bg-card); border:1px solid rgba(47,41,81,.07); border-radius:var(--radius); padding:1.4rem 1.4rem 1.5rem;}
.point i{display:block; width:38px; height:38px; border-radius:50%; margin-bottom:1rem; position:relative; background:var(--lavender-soft);}
.bo-not .point i::before{content:""; position:absolute; left:8px; right:8px; top:50%; height:3px; margin-top:-1.5px; border-radius:3px; background:var(--violet); transform:rotate(-45deg);}
.bo-not .point i{box-shadow:inset 0 0 0 3px var(--violet); background:transparent;}
.bo-own .point{background:var(--lavender-soft); border-color:transparent;}
.bo-own .point i{background:var(--yellow);}
.bo-own .point i::before{content:""; position:absolute; left:13px; top:9px; width:8px; height:15px; border:solid var(--fg); border-width:0 3px 3px 0; transform:rotate(45deg);}

.stat{background:var(--fg); color:#fff; border-radius:var(--radius); padding:1.5rem 1.4rem 1.6rem; position:relative; overflow:hidden;}
.stat::after{content:""; position:absolute; right:-24px; bottom:-24px; width:90px; height:90px; background:rgba(156,156,205,.18); clip-path:polygon(100% 0,100% 100%,0 100%);}
.stat b{display:block; font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--yellow); margin-bottom:.7rem; white-space:nowrap;}
.stat h3{color:#fff;}
.stat p{color:#C9C5E0;}

.bo-steps .bo-items{grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; counter-reset:none;}
.step{position:relative; padding:0 1.25rem 0 0;}
.step::before{content:""; position:absolute; left:44px; right:0; top:21px; height:2px; background:var(--line);}
.step:last-child::before{display:none;}
.step-num{position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--fg); color:#fff; font-weight:800; font-size:.95rem; margin-bottom:1rem; padding:0 .4rem; white-space:nowrap;}
.step:last-child .step-num{background:var(--yellow); color:var(--fg);}
@media (max-width:900px){
  .bo-steps .bo-items{grid-template-columns:1fr;}
  .step{padding:0 0 1.6rem 62px; min-height:44px;}
  .step::before{left:21px; right:auto; top:44px; bottom:0; width:2px; height:auto;}
  .step-num{position:absolute; left:0; top:0; margin:0;}
}

.bo-faq .bo-items{gap:.6rem; max-width:860px;}
.faq-item{background:var(--bg-card); border:1px solid rgba(47,41,81,.09); border-radius:var(--radius-sm); transition:border-color .2s;}
.faq-item[open], .faq-item:hover{border-color:var(--lavender);}
.faq-item summary{list-style:none; cursor:pointer; padding:1.05rem 3.2rem 1.05rem 1.25rem; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:1.1rem; top:50%; width:28px; height:28px; margin-top:-14px; border-radius:50%; background:var(--lavender-soft); color:var(--violet); display:grid; place-items:center; font-size:1.2rem; font-weight:700; transition:transform .25s var(--ease), background .2s;}
.faq-item[open] summary::after{transform:rotate(45deg); background:var(--yellow); color:var(--fg);}
.faq-item p{padding:0 1.25rem 1.2rem; max-width:70ch;}

/* ---------- à propos ---------- */
.about-wrap{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(2rem,4vw,3.5rem); align-items:start;}
.about-wrap:has(.about-image[style*="none"]){grid-template-columns:1fr;}
@media (max-width:760px){ .about-wrap{grid-template-columns:1fr;} }
.about-image{aspect-ratio:4/5; background:var(--bg-dim); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.about-image img{width:100%; height:100%; object-fit:cover; display:block;}
.about-text{max-width:68ch;}
.about-text p{font-size:1.1rem; line-height:1.75; margin:0 0 1.25rem;}
.about-text p:first-child{font-size:clamp(1.2rem,2vw,1.45rem); line-height:1.55; font-weight:600; letter-spacing:-.01em;}
.about-text p:last-child{margin-bottom:0;}
.about-aside{margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--line);}
.about-aside p{font-size:.88rem; color:var(--fg-soft); margin:0;}
.about-aside a{color:var(--violet); font-weight:700; text-decoration:none;}
.about-aside a:hover{text-decoration:underline;}

/* ---------- contact ---------- */
.contact-wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,4vw,3.5rem); align-items:start;}
@media (max-width:760px){ .contact-wrap{grid-template-columns:1fr;} }
.contact-info p{font-size:1.15rem; line-height:1.6; font-weight:600; margin:0 0 1.5rem; text-wrap:pretty;}
.contact-info .contact-field{display:block; font-size:.98rem; color:var(--fg-soft); margin-bottom:.5rem; text-decoration:none;}
.contact-info a.contact-field{color:var(--violet); font-weight:700; font-size:1.05rem;}
.contact-info a.contact-field:hover{text-decoration:underline;}
.contact-form{
  display:flex; flex-direction:column; gap:1rem;
  background:var(--bg-card); border:1px solid rgba(47,41,81,.07);
  border-radius:var(--radius); padding:clamp(1.25rem,3vw,2rem);
  box-shadow:var(--shadow);
}
.contact-form label{font-size:.82rem; font-weight:700; display:block; margin-bottom:.35rem;}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; font-family:inherit; font-size:1rem;
  padding:.75rem .9rem;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; color:var(--fg);
  transition:border-color .2s, box-shadow .2s;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 4px rgba(110,35,131,.12);}
.contact-form textarea{min-height:140px; resize:vertical;}
.contact-form button{
  align-self:flex-start; font-family:inherit; font-size:.95rem; font-weight:700;
  padding:.85rem 1.6rem; background:var(--fg); color:#fff;
  border:none; border-radius:999px; cursor:pointer;
  transition:background .2s, transform .2s var(--ease);
}
.contact-form button:hover{background:var(--violet); transform:translateY(-2px);}
.form-status{font-size:.88rem; color:var(--fg-soft); min-height:1.2em; margin:0;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* ---------- mentions légales / confidentialité ---------- */
.legal-body{max-width:72ch; padding:0 0 1rem;}
.legal-body h2{font-size:1.15rem; font-weight:800; margin:2.25rem 0 .6rem;}
.legal-body h2:first-of-type{margin-top:0;}
.legal-body p, .legal-body li{font-size:.97rem; line-height:1.7; color:var(--fg-soft);}
.legal-body p{margin:0 0 .9rem;}
.legal-body ul{margin:0 0 .9rem; padding-left:1.2rem;}
.legal-body li{margin-bottom:.3rem;}
.legal-body a{color:var(--violet);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .tg g{transition:none;}
  nav.liens a[href="demo.html"]::before{animation:none;}
}