@font-face{font-family:'Fraunces'; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/fraunces-latin-full-normal.woff2) format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  :root{
    --bleu:#309CB4; --vert:#C6DEAD; --jaune:#F0EA5A;
    --roi:#3C6CC0; --ciel:#AEBEDE; --vert-arc:#9FC689; --peche:#F3B293;
    --encre:#23485E; --blanc:#FFFFFF;
    --encre-80:#3d6076; --encre-60:#5b7c90; --encre-40:#8ba3b2;
    --brume:#f4f8fa; --brume-2:#e8f1f4; --trait:#dbe6eb;
    --rayon:18px; --rayon-s:12px;
    --ombre:0 1px 2px rgba(35,72,94,.06), 0 8px 24px -12px rgba(35,72,94,.18);
    --ombre-f:0 2px 4px rgba(35,72,94,.08), 0 18px 44px -16px rgba(35,72,94,.28);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{margin:0; background:var(--blanc); color:var(--encre); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
  h1,h2,h3,h4{font-family:Fraunces,Georgia,"Times New Roman",serif; font-weight:700; line-height:1.15; letter-spacing:-.015em; margin:0; text-wrap:balance}
  p{margin:0 0 1em; text-wrap:pretty}
  a{color:var(--bleu); text-decoration:none}
  a:focus-visible,button:focus-visible{outline:3px solid var(--roi); outline-offset:3px; border-radius:6px}
  img,svg{max-width:100%}
  .wrap{width:min(1120px,100% - 40px); margin-inline:auto}
  .section{padding:clamp(52px,7vw,76px) 0}
  .section--brume{background:var(--brume)}
  .surtitre{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bleu); margin:0 0 14px}
  h2{font-size:clamp(28px,4.4vw,40px); margin-bottom:16px}
  h3{font-size:19px}
  .chapeau{font-size:clamp(17px,2.2vw,19px); color:var(--encre-80); max-width:62ch; margin-bottom:0}
  .tete{max-width:720px; margin-bottom:44px}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:14px 26px; border-radius:999px; font-weight:600; font-size:16px; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s; font-family:inherit; text-align:center; line-height:1.2}
  .btn:active{transform:translateY(1px)}
  .btn--plein{background:var(--bleu); color:#fff; box-shadow:0 10px 22px -12px rgba(48,156,180,.9)}
  .btn--plein:hover{background:#2a8ba1; color:#fff}
  .btn--ligne{background:#fff; color:var(--encre); border-color:var(--trait)}
  .btn--ligne:hover{border-color:var(--bleu); color:var(--bleu)}
  .btn--encre{background:var(--encre); color:#fff}
  .btn--encre:hover{background:#1a3849; color:#fff}
  .btn--jaune{background:var(--jaune); color:var(--encre)}
  .btn--jaune:hover{background:#fff; color:var(--encre)}
  .btn--fantome{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
  .btn--fantome:hover{border-color:#fff; color:#fff}
  .btn--lg{padding:16px 30px; font-size:17px}
  /* Barre */
  .barre{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--trait)}
  .barre__in{display:flex; align-items:center; gap:16px; height:66px}
  .marque{display:flex; align-items:center; gap:11px; color:var(--encre); font-weight:700; font-size:17.5px; letter-spacing:-.01em}
  .marque img{width:36px; height:36px; flex:none}
  .nav{margin-left:auto; display:flex; align-items:center; gap:6px}
  .nav a{padding:8px 13px; border-radius:999px; color:var(--encre-80); font-weight:500; font-size:15px}
  .nav a:hover{background:var(--brume-2); color:var(--encre)}
  .nav a.on{background:var(--brume-2); color:var(--encre); font-weight:600}
  .nav .btn{padding:10px 20px; font-size:15px; color:#fff; margin-left:6px}
  .burger{display:none; margin-left:auto; width:44px; height:44px; border:0; background:transparent; color:var(--encre); cursor:pointer; align-items:center; justify-content:center}
  @media(max-width:860px){
    .nav{display:none; position:absolute; left:0; right:0; top:66px; background:#fff; border-bottom:1px solid var(--trait); flex-direction:column; align-items:stretch; padding:12px 20px 18px; gap:4px; box-shadow:var(--ombre-f)}
    .nav.ouvert{display:flex}
    .nav a{padding:12px 14px; font-size:16px}
    .nav .btn{margin:8px 0 0; color:#fff}
    .burger{display:flex}
  }
  /* Hero */
  .hero{position:relative; padding:clamp(40px,6vw,64px) 0 clamp(44px,6vw,72px); overflow:hidden}
  .hero::before{content:""; position:absolute; inset:-220px 0 auto 0; height:640px; z-index:0; background:radial-gradient(60% 60% at 12% 18%, rgba(48,156,180,.16), transparent 70%), radial-gradient(50% 55% at 88% 10%, rgba(198,222,173,.42), transparent 68%), radial-gradient(45% 45% at 60% 60%, rgba(240,234,90,.20), transparent 70%)}
  .hero>.wrap{position:relative; z-index:1}
  .hero__grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center}
  @media(min-width:940px){ .hero__grid{grid-template-columns:1.05fr .95fr; gap:56px} }
  .hero h1{font-size:clamp(36px,6.2vw,58px); margin-bottom:20px}
  .hero h1 em{font-style:normal; position:relative; white-space:nowrap; z-index:0}
  .hero h1 em::after{content:""; position:absolute; left:-2px; right:-2px; bottom:.06em; height:.34em; background:var(--jaune); opacity:.55; border-radius:4px; z-index:-1}
  .hero__sous{font-size:clamp(17px,2.3vw,20px); color:var(--encre-80); max-width:54ch}
  .hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 18px}
  .hero__note{font-size:14.5px; color:var(--encre-60); margin:0}
  .hero__visuel{display:flex; justify-content:center; align-items:center}
  .hero__visuel img{width:100%; max-width:600px; height:auto; display:block; filter:drop-shadow(0 24px 40px rgba(35,72,94,.18))}
  @media(max-width:939px){ .hero__visuel{order:-1} .hero__visuel img{max-width:min(70vw,360px)} }
  .hero--centre .wrap{text-align:center; display:flex; flex-direction:column; align-items:center}
  .hero--centre .hero__sous{margin-inline:auto}
  .hero--centre .hero__actions{justify-content:center}
  .pastille{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 8px; border-radius:999px; background:#fff; border:1px solid var(--trait); font-size:13.5px; font-weight:600; color:var(--encre-80); margin-bottom:22px; box-shadow:var(--ombre)}
  .pastille b{color:var(--encre)}
  .pastille i{width:9px; height:9px; border-radius:50%; background:var(--vert-arc); margin-left:6px; flex:none}
  .pastille img{width:24px; height:24px}
  @media(max-width:600px){ .pastille__plus{display:none} }
  /* Chiffres */
  .chiffres{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:var(--rayon); overflow:hidden}
  @media(min-width:760px){ .chiffres{grid-template-columns:repeat(4,1fr)} .chiffres--2{grid-template-columns:repeat(2,1fr)} }
  .chiffre{background:#fff; padding:26px 20px; text-align:center}
  .chiffre b{display:block; font-family:Fraunces,Georgia,serif; font-size:clamp(30px,4.6vw,40px); font-weight:700; line-height:1; color:var(--bleu); font-variant-numeric:tabular-nums}
  .chiffre b.roi{color:var(--roi)}
  .chiffre span{display:block; margin-top:9px; font-size:14px; color:var(--encre-60); font-weight:500}
  /* Cartes */
  .grille{display:grid; gap:20px; grid-template-columns:1fr}
  @media(min-width:720px){ .grille--3{grid-template-columns:repeat(3,1fr)} .grille--2{grid-template-columns:repeat(2,1fr)} .grille--5{grid-template-columns:repeat(3,1fr)} .grille--4{grid-template-columns:repeat(2,1fr)} }
  @media(min-width:1040px){ .grille--5{grid-template-columns:repeat(5,1fr); gap:14px} .grille--4{grid-template-columns:repeat(4,1fr)} }
  .carte{background:#fff; border:1px solid var(--trait); border-radius:var(--rayon); padding:28px; box-shadow:var(--ombre); display:flex; flex-direction:column}
  .carte h3{margin-bottom:9px}
  .carte p{color:var(--encre-80); font-size:15.5px; margin-bottom:0}
  .carte__icone{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px; background:var(--brume-2); color:var(--bleu)}
  .carte__logo{width:88px; height:88px; margin-bottom:14px}
  .carte .lien{margin-top:auto; padding-top:14px; font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px}
  .carte--encre{background:var(--encre); border-color:var(--encre); color:#fff}
  .carte--encre h3{color:#fff} .carte--encre p{color:rgba(255,255,255,.82)}
  .carte--encre .carte__icone{background:rgba(255,255,255,.12); color:var(--jaune)}
  .liste{margin:0; padding:0; list-style:none}
  .chapeau + .liste, p + .liste{margin-top:22px}
  .liste li{position:relative; padding-left:28px; margin-bottom:11px; color:var(--encre-80); font-size:15.5px}
  .liste li::before{content:""; position:absolute; left:0; top:.52em; width:15px; height:9px; border-left:2.5px solid var(--bleu); border-bottom:2.5px solid var(--bleu); transform:rotate(-45deg)}
  /* Entités */
  .entites{display:grid; gap:12px; grid-template-columns:1fr}
  @media(min-width:680px){ .entites{grid-template-columns:repeat(2,1fr)} }
  .entite{display:flex; gap:13px; padding:16px 18px; background:#fff; border:1px solid var(--trait); border-radius:var(--rayon-s); align-items:flex-start}
  .entite b{display:block; font-size:15px}
  .entite span{font-size:13.5px; color:var(--encre-60); line-height:1.5}
  .entite i{width:8px; height:38px; border-radius:99px; flex:none; margin-top:3px}
  .entite--court{align-items:center} .entite--court i{height:26px; margin-top:0}
  /* Bloc sombre */
  .institut{background:var(--encre); color:#fff; border-radius:26px; padding:clamp(30px,5vw,56px); position:relative; overflow:hidden}
  .institut::before{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(48,156,180,.5),transparent 68%)}
  .institut>*{position:relative}
  .institut h2{color:#fff}
  .institut .surtitre{color:var(--vert)}
  .institut .chapeau{color:rgba(255,255,255,.82)}
  .institut .liste li{color:rgba(255,255,255,.86)}
  .institut .liste li::before{border-color:var(--vert)}
  .institut__grid{display:grid; gap:34px; grid-template-columns:1fr; align-items:center}
  @media(min-width:900px){ .institut__grid{grid-template-columns:1fr 1fr; gap:52px} }
  .institut__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
  /* Deux colonnes */
  .deux{display:grid; gap:36px; grid-template-columns:1fr; align-items:center}
  @media(min-width:900px){ .deux{grid-template-columns:1fr 1fr; gap:52px} .deux--gauche-etroite{grid-template-columns:.8fr 1.2fr; align-items:start} }
  .visuel{width:100%; aspect-ratio:4/3; border-radius:var(--rayon); background:var(--brume-2); border:1px solid var(--trait); display:grid; place-items:center; color:var(--encre-60); font-weight:600; font-size:14.5px; text-align:center; padding:20px}
  .visuel--app{aspect-ratio:5/4; background:linear-gradient(135deg,var(--bleu),var(--roi)); border:0; position:relative; overflow:hidden}
  .visuel--app img{width:min(48%,240px); border-radius:22%; box-shadow:0 30px 60px rgba(35,72,94,.35)}
  .visuel--app span{position:absolute; right:18px; bottom:14px; color:#fff; font-size:13px; opacity:.85}
  /* Planche de démonstration */
  .planche-demo{width:100%; max-width:440px; margin-inline:auto; background:#fff; border-radius:var(--rayon); padding:20px; display:flex; flex-direction:column; gap:12px; color:var(--encre); box-shadow:var(--ombre-f)}
  .planche-demo__tete{display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700}
  .planche-demo__tete img{width:30px; height:30px; border-radius:8px}
  .planche-demo__tete em{margin-left:auto; font-style:normal; font-size:11.5px; font-weight:600; color:var(--bleu); background:var(--brume-2); padding:4px 9px; border-radius:999px}
  .planche-demo__zone{position:relative; aspect-ratio:400/210; border-radius:var(--rayon-s); background:var(--brume); overflow:hidden}
  .planche-demo__zone svg{position:absolute; inset:0; width:100%; height:100%}
  .planche-demo__bulle{position:absolute; left:57%; top:19%; background:var(--bleu); color:#fff; border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:600; box-shadow:0 8px 20px rgba(48,156,180,.4)}
  .capture-accueil{display:flex; justify-content:center; padding:12px 0; position:relative}
  .capture-accueil::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(165%,620px); height:126%; border-radius:50%; background:radial-gradient(ellipse at center,rgba(240,234,90,.34) 0%,rgba(240,234,90,.24) 20%,rgba(240,234,90,.14) 38%,rgba(240,234,90,.07) 55%,rgba(240,234,90,.03) 72%,rgba(240,234,90,.01) 86%,rgba(240,234,90,0) 100%); filter:blur(36px); pointer-events:none}
  .capture-accueil img{position:relative; width:min(100%,330px); height:auto; display:block; filter:drop-shadow(0 26px 48px rgba(0,0,0,.5))}
  .chips{display:flex; flex-wrap:wrap; gap:7px; justify-content:center}
  .chip{padding:8px 13px; border-radius:999px; background:#fff; border:1.5px solid var(--trait); font-size:12.5px; font-weight:600}
  .chip.pose{opacity:.28; text-decoration:line-through}
  /* Tarifs */
  .tarifs{display:grid; gap:20px; grid-template-columns:1fr}
  @media(min-width:700px){ .tarifs{grid-template-columns:repeat(2,1fr)} }
  @media(min-width:1040px){ .tarifs{grid-template-columns:repeat(4,1fr)} }
  .tarif{background:#fff; border:1px solid var(--trait); border-radius:var(--rayon); padding:26px 24px; display:flex; flex-direction:column; box-shadow:var(--ombre); position:relative}
  .tarif--phare{border:2px solid var(--bleu); box-shadow:var(--ombre-f)}
  .tarif__ruban{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--bleu); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:999px; white-space:nowrap}
  .tarif h3{font-size:17px; margin-bottom:6px}
  .tarif__prix{font-family:Fraunces,Georgia,serif; font-size:34px; font-weight:700; line-height:1.1; margin:8px 0 2px}
  .tarif__prix small{font-family:Inter,sans-serif; font-size:14px; font-weight:500; color:var(--encre-60)}
  .tarif__cible{font-size:13.5px; color:var(--encre-60); margin-bottom:18px; min-height:2.6em}
  .tarif .liste{flex:1; margin-bottom:20px}
  .tarif .liste li{font-size:14.5px; margin-bottom:9px; padding-left:24px}
  .tarif .liste li::before{width:12px; height:7px; border-width:2px}
  .tarif .btn{width:100%}
  /* Appel final */
  .final{text-align:center; background:linear-gradient(160deg,var(--brume) 0%,#eaf4f7 60%,#fdfbe8 100%); border:1px solid var(--trait); border-radius:26px; padding:clamp(36px,6vw,64px) clamp(24px,5vw,56px)}
  .final .chapeau{max-width:60ch; margin-inline:auto}
  .final__actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px}
  /* Contact */
  .contact-grille{display:grid; gap:20px; grid-template-columns:1fr}
  @media(min-width:760px){ .contact-grille{grid-template-columns:1fr 1fr} }
  .contact-ligne{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--trait)}
  .contact-ligne:last-child{border-bottom:0}
  .contact-ligne .ic{width:40px; height:40px; border-radius:11px; background:var(--brume-2); color:var(--bleu); display:grid; place-items:center; flex:none}
  .contact-ligne b{display:block; font-size:15px}
  .contact-ligne span,.contact-ligne a{font-size:15.5px}
  .form{background:#fff; border:1px solid var(--trait); border-radius:var(--rayon); padding:26px; box-shadow:var(--ombre)}
  .form h3{margin-bottom:6px}
  .form>p{font-size:14.5px; color:var(--encre-60)}
  .champ{margin-bottom:14px}
  .champ label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px}
  .champ input,.champ select,.champ textarea{width:100%; padding:12px 14px; border:1.5px solid var(--trait); border-radius:11px; font-family:inherit; font-size:15px; color:var(--encre); background:#fff}
  .champ input:focus,.champ select:focus,.champ textarea:focus{outline:none; border-color:var(--bleu); box-shadow:0 0 0 3px rgba(48,156,180,.15)}
  .champ textarea{min-height:110px; resize:vertical}
  .form .btn{width:100%; margin-top:4px}
  .form__note{font-size:12.5px; color:var(--encre-60); margin:12px 0 0; line-height:1.5}
  /* Prose (mentions) */
  .prose{max-width:72ch}
  .prose h3{margin:28px 0 8px}
  .prose p{color:var(--encre-80); font-size:16px}
  /* Pied */
  .pied{background:var(--brume); border-top:1px solid var(--trait); padding:48px 0 34px; font-size:14.5px}
  .pied__grid{display:grid; gap:28px; grid-template-columns:1fr}
  @media(min-width:760px){ .pied__grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
  .pied h4{font-family:Inter,sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--encre-60); margin:0 0 12px}
  .pied ul{list-style:none; margin:0; padding:0}
  .pied li{margin-bottom:8px}
  .pied a{color:var(--encre-80)} .pied a:hover{color:var(--bleu)}
  .pied__bas{margin-top:34px; padding-top:20px; border-top:1px solid var(--trait); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:var(--encre-60); font-size:13.5px}
  .slogan{font-family:Fraunces,Georgia,serif; font-style:italic; color:var(--encre-80)}
  .ph{background:#fff7ef; color:#8A4B25; border:1.5px dashed var(--peche); border-radius:10px; padding:8px 12px; font-size:13.5px; font-weight:600; display:inline-block}
  /* Pages */
  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn{transition:none} }
  /* Classes utilitaires (remplacent les styles inline de la maquette : CSP sans 'unsafe-inline') */
  .fond-vert-arc{background:var(--vert-arc)} .fond-roi{background:var(--roi)} .fond-bleu{background:var(--bleu)}
  .fond-jaune{background:var(--jaune)} .fond-peche{background:var(--peche)} .fond-ciel{background:var(--ciel)} .fond-vert{background:var(--vert)}
  .pt0{padding-top:0} .pt24{padding-top:24px} .pb24{padding-bottom:24px} .p36{padding:36px}
  .mt14{margin-top:14px} .mt8{margin-top:8px} .mt22{margin-top:22px} .mb0{margin-bottom:0} .mb8{margin-bottom:8px} .mb28{margin-bottom:28px}
  .fs24{font-size:24px} .fw600{font-weight:600} .casse{word-break:break-all} .ai-start{align-items:start}
  .logo34{width:34px; height:34px} .h1-doc{font-size:clamp(30px,4.4vw,40px)}
  .pied__desc{font-size:14px; color:var(--encre-60); max-width:36ch; margin:0}
  .pied__marque{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; margin-bottom:10px}
  .pied__adresse{color:var(--encre-60); line-height:1.5}
  .saut{position:absolute; left:-9999px; top:0; background:var(--encre); color:#fff; padding:10px 16px; border-radius:0 0 12px 0; z-index:100; font-weight:600}
  .saut:focus{left:0}
  .contact-grille{align-items:start}
  .contact-notion{display:flex; flex-direction:column; gap:10px}
  .contact-notion .btn{width:100%}
  .fondateur{width:100%; max-width:300px; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--rayon); border:1px solid var(--trait); box-shadow:var(--ombre); display:block; margin-inline:auto}
  @media(max-width:899px){ .fondateur{max-width:220px} }
  .captures{display:flex; justify-content:center; align-items:flex-end; gap:18px; padding:12px 0}
  .captures img{width:min(100%,330px); height:auto; display:block; filter:drop-shadow(0 24px 40px rgba(35,72,94,.22))}
  @media(max-width:899px){ .captures{order:-1} }
  .p404{min-height:60vh; display:grid; place-items:center; text-align:center} .p404 .hero__actions{justify-content:center}