/* =========================================================
   NOVOS — Proposition d'identité visuelle
   ========================================================= */

:root{
  /* Marque */
  --c-navy:    #16265C;
  --c-navy-2:  #0E1A40;
  --c-blue:    #2079E0;
  --c-purple:  #8B4CD8;
  --c-coral:   #EE6B5B;
  --c-green:   #4FAE2E;
  --c-yellow:  #F4C020;
  --c-teal:    #14B8B0;

  /* Interface */
  --bg:        #FFFFFF;
  --bg-tint:   #F6F8FC;
  --ink:       #16265C;
  --ink-soft:  #4A5578;
  --line:      #E3E8F2;

  --wrap:      1180px;
  --radius:    18px;

  --shadow-sm: 0 1px 2px rgba(22,38,92,.06), 0 4px 14px rgba(22,38,92,.05);
  --shadow-md: 0 2px 6px rgba(22,38,92,.06), 0 18px 40px rgba(22,38,92,.09);

  --ease: cubic-bezier(.22,.75,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Outfit","Century Gothic",Futura,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:300;
  font-size:clamp(16px,.55vw + 14.4px,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ max-width:100%; }
h1,h2,h3{ margin:0; line-height:1.15; font-weight:500; letter-spacing:-.015em; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:600; }
em{ font-style:italic; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--c-navy); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--c-blue); outline-offset:3px; border-radius:4px; }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 6px 24px rgba(22,38,92,.05);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--c-navy); }
.brand__mark{ width:32px; height:32px; flex:none; }
.brand__text{ font-weight:600; letter-spacing:.22em; font-size:1.02rem; }

.site-nav{ display:flex; gap:clamp(14px,2.2vw,30px); }
.site-nav a{
  position:relative;
  color:var(--ink-soft); text-decoration:none;
  font-size:.94rem; font-weight:400; padding:6px 0;
  transition:color .2s var(--ease);
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--c-blue); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
}
.site-nav a:hover{ color:var(--c-navy); }
.site-nav a:hover::after{ transform:scaleX(1); }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(56px,9vw,110px) 0 clamp(70px,10vw,120px);
  text-align:center;
}
.hero__glow{
  position:absolute; inset:auto 50% auto 50%;
  translate:-50% 0; top:-24%;
  width:min(1100px,140vw); aspect-ratio:1;
  background:
    radial-gradient(circle at 50% 46%, rgba(32,121,224,.13), transparent 52%),
    radial-gradient(circle at 70% 60%, rgba(139,76,216,.10), transparent 48%),
    radial-gradient(circle at 30% 62%, rgba(20,184,176,.10), transparent 48%);
  filter:blur(6px);
  pointer-events:none;
}
.hero__inner{ position:relative; }

.eyebrow{
  font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:500; margin-bottom:clamp(28px,5vw,44px);
}

/* Lockup ------------------------------------------------- */
.lockup{ display:flex; flex-direction:column; align-items:center; }
.lockup__mark{ width:clamp(168px,22vw,232px); height:auto; }
.lockup__word{
  margin-top:clamp(18px,2.6vw,30px);
  font-size:clamp(2.6rem,8vw,4.6rem);
  font-weight:500; letter-spacing:.26em; text-indent:.26em;
  color:var(--c-navy);
}
.lockup__rule{
  width:clamp(210px,32vw,430px); height:2px; background:var(--c-navy);
  margin:clamp(10px,1.4vw,16px) 0 clamp(10px,1.4vw,14px);
  transform-origin:center; animation:ruleIn 1s .35s var(--ease) both;
}
@keyframes ruleIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.lockup__baseline{
  margin:0;
  font-size:clamp(1rem,2.3vw,1.42rem);
  font-weight:300; letter-spacing:.1em; color:#2B3E7A;
}

.hero__lead{
  max-width:44ch; margin:clamp(34px,5vw,52px) auto 0;
  font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-soft);
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:100px; text-decoration:none;
  font-size:.95rem; font-weight:500; letter-spacing:.01em;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn--primary{ background:var(--c-navy); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(22,38,92,.24); }
.btn--ghost{ color:var(--c-navy); border:1px solid var(--line); background:rgba(255,255,255,.6); }
.btn--ghost:hover{ border-color:var(--c-navy); transform:translateY(-2px); }

.hero__scroll{
  position:absolute; left:50%; translate:-50% 0; bottom:22px;
  width:1px; height:46px; background:linear-gradient(var(--line),transparent);
}
.hero__scroll span{
  position:absolute; top:0; left:-1px; width:3px; height:14px; border-radius:3px;
  background:var(--c-blue); animation:scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(0); opacity:0; } 25%{opacity:1;} 100%{ transform:translateY(34px); opacity:0; } }

/* Animation du symbole ----------------------------------- */
.mark__links line{
  stroke-dasharray:62; stroke-dashoffset:62;
  animation:drawLink .7s var(--ease) forwards;
}
.mark__links line:nth-child(1){ animation-delay:.30s }
.mark__links line:nth-child(2){ animation-delay:.38s }
.mark__links line:nth-child(3){ animation-delay:.46s }
.mark__links line:nth-child(4){ animation-delay:.54s }
.mark__links line:nth-child(5){ animation-delay:.62s }
.mark__links line:nth-child(6){ animation-delay:.70s }
@keyframes drawLink{ to{ stroke-dashoffset:0; } }

.mark__nodes circle{ opacity:0; transform-box:fill-box; transform-origin:center; animation:popNode .5s var(--ease) forwards; }
.mark__nodes circle:nth-child(1){ animation-delay:.72s }
.mark__nodes circle:nth-child(2){ animation-delay:.80s }
.mark__nodes circle:nth-child(3){ animation-delay:.88s }
.mark__nodes circle:nth-child(4){ animation-delay:.96s }
.mark__nodes circle:nth-child(5){ animation-delay:1.04s }
.mark__nodes circle:nth-child(6){ animation-delay:1.12s }
@keyframes popNode{ from{ opacity:0; scale:.3; } to{ opacity:1; scale:1; } }

.mark__core{ animation:coreIn .8s var(--ease) both; transform-box:fill-box; transform-origin:center; }
@keyframes coreIn{ from{ opacity:0; scale:.75; } to{ opacity:1; scale:1; } }
.mark__n{ stroke-dasharray:210; stroke-dashoffset:210; animation:drawN .9s .3s var(--ease) forwards; }
@keyframes drawN{ to{ stroke-dashoffset:0; } }

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */
.section{ padding:clamp(64px,9vw,116px) 0; }
.section--tinted{ background:var(--bg-tint); border-block:1px solid var(--line); }

.chapter{
  display:inline-block; margin-bottom:14px;
  font-size:.76rem; font-weight:600; letter-spacing:.24em;
  color:var(--c-blue);
}
.chapter--light{ color:#7FB6FF; }

.section__title{ font-size:clamp(1.85rem,4vw,2.85rem); }

.section__head{ max-width:62ch; margin-bottom:clamp(38px,5vw,60px); }
.section__intro{ margin-top:16px; color:var(--ink-soft); font-size:1.08rem; max-width:56ch; }

.section__grid{
  display:grid; gap:clamp(28px,5vw,64px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.section__body .lead{
  font-size:clamp(1.2rem,2.2vw,1.55rem); font-weight:400; color:var(--c-navy);
  line-height:1.4; margin-bottom:.7em;
}
.section__body p{ color:var(--ink-soft); max-width:56ch; }
.section__body strong{ color:var(--c-navy); }

.pills{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:30px 0 0; padding:0; }
.pills li{
  padding:7px 16px; border-radius:100px; font-size:.88rem; font-weight:500;
  color:var(--pill); border:1px solid color-mix(in srgb, var(--pill) 32%, transparent);
  background:color-mix(in srgb, var(--pill) 8%, transparent);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.pills li:hover{ transform:translateY(-2px); background:color-mix(in srgb, var(--pill) 16%, transparent); }

/* ---------------------------------------------------------
   Concept
   --------------------------------------------------------- */
.concept{
  display:grid; gap:clamp(40px,6vw,70px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.concept__visual{ position:sticky; top:108px; }

.diagram{ padding:0 clamp(46px,7vw,78px); }
.diagram__stage{ position:relative; }
.diagram__stage svg{ display:block; width:100%; height:auto; overflow:visible; }

.diagram__nodes circle{ transform-box:fill-box; transform-origin:center; }

/* Le tracé du diagramme ne démarre qu'à l'entrée dans le viewport */
.js .diagram .mark__links line{ animation-play-state:paused; }
.js .diagram .diagram__nodes circle{ opacity:0; }
.diagram.is-live .mark__links line{ animation-play-state:running; }
.diagram.is-live .diagram__nodes circle{ animation:popNode .5s var(--ease) forwards; }
.diagram.is-live .diagram__nodes circle:nth-child(1){ animation-delay:.42s }
.diagram.is-live .diagram__nodes circle:nth-child(2){ animation-delay:.50s }
.diagram.is-live .diagram__nodes circle:nth-child(3){ animation-delay:.58s }
.diagram.is-live .diagram__nodes circle:nth-child(4){ animation-delay:.66s }
.diagram.is-live .diagram__nodes circle:nth-child(5){ animation-delay:.74s }
.diagram.is-live .diagram__nodes circle:nth-child(6){ animation-delay:.82s }

.tag{
  position:absolute; white-space:nowrap;
  font-size:clamp(.68rem,1.1vw,.8rem); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tag);
  background:#fff; border:1px solid color-mix(in srgb, var(--tag) 30%, transparent);
  padding:4px 11px; border-radius:100px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tag--n  { left:50%;   top:13.75%;  transform:translate(-50%,-190%); }
.tag--ne { left:81.4%; top:31.87%;  transform:translate(24%,-150%); }
.tag--se { left:81.4%; top:68.12%;  transform:translate(24%,50%); }
.tag--s  { left:50%;   top:86.25%;  transform:translate(-50%,90%); }
.tag--sw { left:18.6%; top:68.12%;  transform:translate(-124%,50%); }
.tag--nw { left:18.6%; top:31.87%;  transform:translate(-124%,-150%); }

.diagram.is-live .tag{ animation:tagIn .5s var(--ease) both; }
.diagram.is-live .tag--n { animation-delay:.55s }
.diagram.is-live .tag--ne{ animation-delay:.63s }
.diagram.is-live .tag--se{ animation-delay:.71s }
.diagram.is-live .tag--s { animation-delay:.79s }
.diagram.is-live .tag--sw{ animation-delay:.87s }
.diagram.is-live .tag--nw{ animation-delay:.95s }
@keyframes tagIn{ from{ opacity:0; } to{ opacity:1; } }

.diagram__caption{
  margin-top:26px; text-align:center; font-size:.92rem; color:var(--ink-soft);
}

.concept__block{ padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--line); }
.concept__block h3{
  display:flex; align-items:center; gap:11px;
  font-size:1.16rem; font-weight:600; margin-bottom:10px;
}
.concept__block p{ color:var(--ink-soft); }
.concept__block strong{ color:var(--c-navy); }

.dot{ width:11px; height:11px; border-radius:50%; flex:none; border:3px solid var(--dot); }
.dot--multi{
  border:none;
  background:conic-gradient(var(--c-blue) 0 16.6%, var(--c-purple) 0 33.3%, var(--c-coral) 0 50%,
                            var(--c-green) 0 66.6%, var(--c-yellow) 0 83.3%, var(--c-teal) 0);
}

.quote{
  margin:0; padding:26px 28px; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--c-blue);
  box-shadow:var(--shadow-sm);
}
.quote p{ font-size:1.1rem; color:var(--c-navy); }
.quote footer{ margin-top:12px; font-size:.94rem; color:var(--ink-soft); }
.quote em{ color:var(--c-blue); font-weight:400; }

/* ---------------------------------------------------------
   Cartes « ce que communique »
   --------------------------------------------------------- */
.cards{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}
.card{
  position:relative; overflow:hidden;
  padding:30px 28px 32px; border-radius:var(--radius);
  background:#fff; border:1px solid var(--line);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }

.card__icon{
  width:46px; height:46px; border-radius:13px; margin-bottom:18px;
  display:grid; place-items:center;
  color:var(--accent);
  background:color-mix(in srgb, var(--accent) 11%, transparent);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.card:hover .card__icon{ background:color-mix(in srgb, var(--accent) 18%, transparent); transform:scale(1.06) rotate(-3deg); }
.card__icon svg{ width:24px; height:24px; }

.card h3{ font-size:1.1rem; font-weight:600; margin-bottom:9px; }
.card p{ color:var(--ink-soft); font-size:.97rem; }

/* ---------------------------------------------------------
   Palette
   --------------------------------------------------------- */
.swatches{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  margin-bottom:clamp(38px,5vw,58px);
}
.swatch{ margin:0; }
.swatch__chip{
  height:88px; border-radius:14px; background:var(--sw);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05), 0 8px 20px color-mix(in srgb, var(--sw) 28%, transparent);
  transition:transform .3s var(--ease);
}
.swatch:hover .swatch__chip{ transform:translateY(-4px); }
.swatch figcaption{ display:flex; flex-direction:column; margin-top:11px; line-height:1.4; }
.swatch b{ font-weight:500; font-size:.95rem; }
.swatch span{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.04em; font-variant-numeric:tabular-nums; }

.usages{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.usage__box{
  display:grid; place-items:center; padding:34px 24px; border-radius:var(--radius);
  border:1px solid var(--line); background:#fff; min-height:210px;
}
.usage--dark .usage__box{ background:var(--c-navy); border-color:var(--c-navy); }
.usage img{ width:100%; max-width:168px; height:auto; }
.usage--mark img{ max-width:112px; }
.usage p{ margin:12px 0 0; font-size:.88rem; color:var(--ink-soft); text-align:center; }

/* ---------------------------------------------------------
   Vision
   --------------------------------------------------------- */
.vision{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(160deg,var(--c-navy) 0%, var(--c-navy-2) 100%);
  color:#fff;
}
.vision__glow{
  position:absolute; inset:auto 50% -40% 50%; translate:-50% 0;
  width:min(900px,120vw); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(circle, rgba(32,121,224,.32), transparent 60%);
  filter:blur(12px);
}
.vision__inner{ position:relative; max-width:820px; }
.vision__title{ font-size:clamp(1.8rem,3.8vw,2.7rem); margin-bottom:clamp(24px,3.4vw,34px); }
.vision__text{ font-size:clamp(1.05rem,1.9vw,1.28rem); color:rgba(255,255,255,.72); font-weight:300; }
.vision__text--strong{ color:#fff; font-size:clamp(1.15rem,2.3vw,1.5rem); max-width:26em; margin-inline:auto; }
.vision__text--strong em{ color:#7FB6FF; font-style:normal; font-weight:500; }
.vision__baseline{
  margin-top:clamp(34px,4.5vw,48px); padding-top:clamp(26px,3.4vw,34px);
  border-top:1px solid rgba(255,255,255,.16);
  font-size:clamp(1.1rem,2.4vw,1.5rem); letter-spacing:.12em; font-weight:300;
  color:rgba(255,255,255,.9);
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{ background:var(--c-navy-2); color:rgba(255,255,255,.62); padding:26px 0; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center; font-size:.87rem; }
.footer-inner p{ margin:0; }
.footer-note{ color:rgba(255,255,255,.4); }

/* ---------------------------------------------------------
   Reveal au scroll
   --------------------------------------------------------- */
.js .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:960px){
  .section__grid,
  .concept{ grid-template-columns:1fr; }
  .concept__visual{ position:static; }
  .site-nav{ display:none; }
  .header-inner{ justify-content:center; }
}

@media (max-width:560px){
  .diagram{ padding:0 clamp(38px,13vw,60px); }
  .tag{ padding:3px 8px; letter-spacing:.03em; }
  .tag--ne,.tag--se{ transform:translate(10%,-140%); }
  .tag--se{ transform:translate(10%,40%); }
  .tag--sw{ transform:translate(-110%,40%); }
  .tag--nw{ transform:translate(-110%,-140%); }
  .lockup__word{ letter-spacing:.18em; text-indent:.18em; }
  .footer-inner{ justify-content:center; text-align:center; }
}

/* ---------------------------------------------------------
   Accessibilité — mouvement réduit
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-delay:0ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .mark__links line{ stroke-dashoffset:0; }
  .mark__nodes circle{ opacity:1; }
  .mark__n{ stroke-dashoffset:0; }
}

/* ---------------------------------------------------------
   Impression
   --------------------------------------------------------- */
@media print{
  .site-header,.hero__actions,.hero__scroll{ display:none; }
  .reveal{ opacity:1; transform:none; }
  .section{ padding:24px 0; break-inside:avoid; }
  .vision{ background:#fff; color:var(--c-navy); }
  .vision__text,.vision__text--strong,.vision__baseline{ color:var(--c-navy); }
}