@import url("fonts.css");

/* =========================================================================
   EDII — design system
   ========================================================================= */

:root{
  /* encre */
  --ink:      #0A1A2F;
  --ink-2:    #46586E;
  --ink-3:    #7F90A4;

  /* surfaces */
  --bg:       #FFFFFF;
  --bg-soft:  #F4F8FC;
  --bg-soft2: #EDF3F9;
  --line:     #E2E9F1;
  --line-2:   #D3DEEA;

  /* marque */
  --blue:     #0D5BA6;
  --blue-700: #0A4780;
  --blue-300: #6FA9DC;
  --blue-50:  #E8F1FA;

  /* BeBackup */
  --cyan:     #2BA3DD;
  --cyan-700: #1B7CAD;
  --cyan-50:  #E5F4FC;

  /* nuit */
  --navy:     #061A30;
  --navy-2:   #0A2846;
  --navy-3:   #103758;

  --amber:    #D9892B;
  --green:    #11845E;

  --r-xs: 8px;
  --r-s:  12px;
  --r:    18px;
  --r-l:  26px;
  --r-xl: 36px;

  --sh-1: 0 1px 2px rgba(10,26,47,.05), 0 2px 8px rgba(10,26,47,.04);
  --sh-2: 0 2px 6px rgba(10,26,47,.05), 0 14px 34px -10px rgba(10,26,47,.13);
  --sh-3: 0 4px 10px rgba(10,26,47,.06), 0 30px 70px -20px rgba(10,26,47,.22);

  --wrap: 1180px;
  --gut: 24px;
  --ease: cubic-bezier(.22,.78,.3,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
img{ height:auto; display:block; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-700); }

::selection{ background:var(--blue); color:#fff; }

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

/* ---------- typographie ---------- */

h1,h2,h3,h4{
  margin:0 0 .5em;
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:800;
  color:var(--ink);
  text-wrap:balance;
}

h1{ font-size:clamp(2.25rem, 1.3rem + 3.9vw, 4rem); letter-spacing:-.038em; line-height:1.04; }
h2{ font-size:clamp(1.75rem, 1.15rem + 2.3vw, 2.75rem); letter-spacing:-.032em; }
h3{ font-size:clamp(1.15rem, 1.05rem + .45vw, 1.4rem); letter-spacing:-.02em; }
h4{ font-size:1.0625rem; letter-spacing:-.012em; }

p{ margin:0 0 1.1em; color:var(--ink-2); }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:700; color:var(--ink); }

.lede{
  font-size:clamp(1.0625rem, 1rem + .4vw, 1.3rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:62ch;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.75rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue);
  margin:0 0 1rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--blue), var(--cyan));
}

.muted{ color:var(--ink-3); }
.nowrap{ white-space:nowrap; }

/* ---------- structure ---------- */

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:820px; }

section{ position:relative; }
.sect{ padding:clamp(60px, 7vw, 108px) 0; }
.sect-tight{ padding:clamp(44px, 5vw, 72px) 0; }

.sect-soft{ background:var(--bg-soft); }
.sect-soft + .sect-soft{ padding-top:0; }

.sect-head{ max-width:760px; margin-bottom:clamp(32px, 4vw, 56px); }
.sect-head.center{ margin-inline:auto; text-align:center; }
.sect-head.center .eyebrow{ justify-content:center; }

.grid{ display:grid; gap:clamp(16px, 2vw, 24px); }
.g-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

@media (max-width:960px){
  .g-3,.g-4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{ grid-template-columns:minmax(0,1fr); }
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}
@media (max-width:900px){ .split{ grid-template-columns:minmax(0,1fr); } }

/* ---------- boutons ---------- */

.btn{
  --btn-bg:var(--blue);
  --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.85em 1.5em;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  font:inherit; font-weight:700; font-size:.9375rem;
  letter-spacing:-.01em;
  cursor:pointer;
  text-align:center;
  box-shadow:0 1px 2px rgba(10,26,47,.1), 0 10px 24px -12px rgba(13,91,166,.75);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover{
  color:var(--btn-fg);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(10,26,47,.1), 0 18px 34px -14px rgba(13,91,166,.8);
}
.btn:active{ transform:translateY(0); }
.btn svg{ flex:none; }

.btn-ghost{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  border-color:var(--line-2);
  box-shadow:none;
}
.btn-ghost:hover{ background:var(--bg-soft); border-color:var(--ink-3); box-shadow:none; }

.btn-light{
  --btn-bg:rgba(255,255,255,.1);
  --btn-fg:#fff;
  border-color:rgba(255,255,255,.26);
  box-shadow:none;
  backdrop-filter:blur(6px);
}
.btn-light:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); box-shadow:none; }

.btn-cyan{
  --btn-bg:var(--cyan);
  box-shadow:0 1px 2px rgba(10,26,47,.1), 0 10px 24px -12px rgba(43,163,221,.85);
}

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.45em;
  font-weight:700; font-size:.9375rem;
}
.link-arrow svg{ transition:transform .25s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- en-tête ---------- */

.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 1px 20px rgba(10,26,47,.05);
}
.hdr-in{
  display:flex; align-items:center; gap:clamp(16px, 3vw, 40px);
  height:74px;
}

.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); flex:none; }
.brand:hover{ color:var(--ink); }
.brand svg{ width:38px; height:38px; color:var(--blue); flex:none; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-size:1.3rem; font-weight:800; letter-spacing:-.03em; }
.brand-sub{ font-size:.6875rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a{
  padding:.55em .85em;
  border-radius:999px;
  font-size:.9375rem; font-weight:600;
  color:var(--ink-2);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav a:hover{ background:var(--bg-soft2); color:var(--ink); }
.nav a.is-active{ color:var(--blue); background:var(--blue-50); }
.nav .btn{ display:none; }

.hdr-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.hdr-cta .btn{ padding:.68em 1.2em; font-size:.875rem; }

.burger{
  display:none;
  width:44px; height:44px; margin-left:auto;
  border:1px solid var(--line-2); border-radius:12px;
  background:#fff; cursor:pointer;
  align-items:center; justify-content:center;
  color:var(--ink);
}
.burger span{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .25s var(--ease), background .2s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s var(--ease), top .2s var(--ease);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
body.nav-open .burger span{ background:transparent; }
body.nav-open .burger span::before{ top:0; transform:rotate(45deg); }
body.nav-open .burger span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1000px){
  .nav, .hdr-cta{ display:none; }
  .burger{ display:flex; }

  .nav.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:fixed; inset:74px 0 auto; z-index:99;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:16px var(--gut) 24px;
    box-shadow:var(--sh-2);
    margin:0;
  }
  .nav.is-open a{ padding:.8em 1em; font-size:1.0625rem; }
  /* .nav a impose var(--ink-2) et l'emporte sur .btn : sans ce rappel,
     le libelle du bouton reste gris anthracite sur fond bleu. */
  .nav.is-open .btn{ display:inline-flex; margin-top:10px; font-size:1rem; color:var(--btn-fg); }
  .nav.is-open .btn:hover{ color:var(--btn-fg); }
}

/* ---------- héros sombre ---------- */

.dark{
  position:relative;
  background:var(--navy);
  color:#E6EEF7;
  isolation:isolate;
  overflow:hidden;
}
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff; }
.dark p{ color:#A9BFD4; }
.dark strong,.dark b{ color:#fff; }
.dark .eyebrow{ color:var(--cyan); }
.dark .lede{ color:#B6CADD; }
.dark a{ color:#8FD0F2; }

.glow{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.glow::before,.glow::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.55;
}
.glow::before{
  width:720px; height:720px; top:-280px; left:-180px;
  background:radial-gradient(circle, rgba(13,91,166,.95), transparent 68%);
}
.glow::after{
  width:620px; height:620px; bottom:-300px; right:-150px;
  background:radial-gradient(circle, rgba(43,163,221,.6), transparent 68%);
}
.grid-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 25%, #000 25%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 25%, #000 25%, transparent 75%);
}

.hero{ padding:clamp(56px, 7vw, 104px) 0 clamp(60px, 7vw, 100px); }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
}
@media (max-width:980px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-art{ max-width:520px; margin-inline:auto; }
}

.hero h1 .accent{
  background:linear-gradient(100deg, var(--cyan) 10%, #7FD4F5 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.badge{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.4em .95em .4em .55em;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  font-size:.8125rem; font-weight:600; color:#C7DCEE;
  margin-bottom:1.4rem;
}
.badge .dot{
  width:7px; height:7px; border-radius:50%; background:#3BD68B;
  box-shadow:0 0 0 4px rgba(59,214,139,.18);
  margin-left:.3em;
}

/* bandeau de chiffres */
.stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1px;
  margin-top:clamp(36px, 5vw, 60px);
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-l);
  overflow:hidden;
}
.stats > div{ background:rgba(8,28,50,.72); padding:22px 24px; }
.stats .n{
  display:block; font-size:clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  font-weight:800; letter-spacing:-.03em; color:#fff; line-height:1.1;
}
.stats .n small{ font-size:.5em; font-weight:700; letter-spacing:0; margin-left:.25em; color:var(--cyan); }
.stats .l{ display:block; font-size:.8125rem; color:#93AEC7; margin-top:6px; line-height:1.35; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ---------- cartes ---------- */

.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:clamp(22px, 2.6vw, 32px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card h3{ margin-bottom:.5rem; }
.card p{ font-size:.9375rem; }
a.card:hover, .card.hoverable:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:var(--sh-2);
}
a.card{ color:inherit; display:block; }

.card-soft{ background:var(--bg-soft); border-color:transparent; }
.card-dark{
  background:linear-gradient(165deg, var(--navy-2), var(--navy));
  border-color:rgba(255,255,255,.1);
  color:#D5E3F0;
}
.card-dark h3{ color:#fff; }
.card-dark p{ color:#A9BFD4; }

.ico{
  width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-50); color:var(--blue);
  margin-bottom:18px;
}
.ico svg{ width:23px; height:23px; }
.ico-cyan{ background:var(--cyan-50); color:var(--cyan-700); }
.ico-dark{ background:rgba(255,255,255,.1); color:var(--cyan); }

/* duo de métiers */
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,26px); }
@media (max-width:860px){ .duo{ grid-template-columns:minmax(0,1fr); } }

.pole{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(28px, 3.2vw, 44px);
  border:1px solid var(--line);
  background:#fff;
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pole:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); }
.pole::after{
  content:""; position:absolute; inset:auto -60px -140px auto;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--blue-50), transparent 70%);
  z-index:0;
}
.pole.is-bb::after{ background:radial-gradient(circle, var(--cyan-50), transparent 70%); }
.pole > *{ position:relative; z-index:1; }
.pole .share{
  font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.pole h3{ font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); margin:.6rem 0 .7rem; }
.pole ul{ margin:1.2rem 0 1.6rem; }
.pole .btn-row{ margin-top:auto; padding-top:.5rem; }
.pole-logo{ height:64px; width:auto; margin:6px 0 2px; }

/* ---------- listes ---------- */

ul.ticks{ list-style:none; margin:1.2rem 0; padding:0; display:grid; gap:.7rem; }
ul.ticks li{
  position:relative; padding-left:30px;
  font-size:.9375rem; color:var(--ink-2);
}
ul.ticks li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:18px; height:18px; border-radius:50%;
  background:var(--blue-50);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D5BA6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px; background-position:center; background-repeat:no-repeat;
}
.dark ul.ticks li{ color:#A9BFD4; }
.dark ul.ticks li::before{
  background-color:rgba(43,163,221,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232BA3DD' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

ul.plain{ list-style:none; margin:1rem 0; padding:0; display:grid; gap:.75rem; }
ul.plain li{ font-size:.9375rem; color:var(--ink-2); }

.pros{ display:grid; gap:.6rem; margin:1rem 0 0; padding:0; list-style:none; }
.pros li{ position:relative; padding-left:26px; font-size:.9375rem; color:var(--ink-2); }
.pros li::before{
  position:absolute; left:0; top:0; font-weight:800; font-size:1.05em;
}
.pros li.yes::before{ content:"+"; color:var(--green); }
.pros li.no::before{ content:"–"; color:#C0392B; }
.pros li.info::before{ content:"•"; color:var(--ink-3); }

/* ---------- tableaux ---------- */

/* Les ombres laterales n'apparaissent que s'il reste du tableau a faire
   defiler : les degrades blancs suivent le contenu (local), les ombres non
   (scroll), donc elles se decouvrent d'elles-memes aux extremites. */
.tbl-wrap{
  overflow-x:auto;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:
    linear-gradient(to right, #fff 40%, rgba(255,255,255,0)) left center / 36px 100% no-repeat local,
    linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)) right center / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(10,26,47,.13), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(10,26,47,.13), transparent) right center / 12px 100% no-repeat scroll,
    #fff;
}
table{ width:100%; border-collapse:collapse; font-size:.9375rem; min-width:520px; }
th,td{ padding:14px 18px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
thead th{
  background:var(--bg-soft);
  font-size:.75rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2);
  white-space:nowrap;
}
tbody tr:last-child td{ border-bottom:0; }
tbody th{ font-weight:700; color:var(--ink); white-space:nowrap; }
td{ color:var(--ink-2); }

/* Sur telephone, le tableau se replie dans la largeur disponible plutot que
   d'imposer ses 520 px. .tbl-wrap garde son defilement comme filet. */
@media (max-width:640px){
  table{ min-width:0; font-size:.875rem; }
  th,td{ padding:10px 11px; hyphens:auto; overflow-wrap:break-word; }
  thead th,tbody th{ white-space:normal; }
  thead th{ font-size:.6875rem; letter-spacing:.04em; }
}

/* ---------- pastilles ---------- */

.pills{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.42em .9em;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:#fff;
  font-size:.8125rem; font-weight:600; color:var(--ink-2);
}
.pill.blue{ background:var(--blue-50); border-color:transparent; color:var(--blue-700); }
.pill.cyan{ background:var(--cyan-50); border-color:transparent; color:var(--cyan-700); }
.pill.amber{ background:#FBF1E3; border-color:transparent; color:#9C5F12; }
.pill.green{ background:#E4F4EE; border-color:transparent; color:var(--green); }

/* ---------- sommaire collant ---------- */

.doc{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:start;
}
@media (max-width:1000px){ .doc{ grid-template-columns:minmax(0,1fr); } .toc{ display:none; } }

.toc{ position:sticky; top:108px; }
.toc p{
  font-size:.75rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px;
}
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:toc; }
.toc a{
  display:block; padding:.5em .75em;
  border-left:2px solid var(--line);
  font-size:.875rem; font-weight:600; color:var(--ink-2);
  transition:color .2s, border-color .2s, background .2s;
}
.toc a:hover{ color:var(--ink); background:var(--bg-soft); }
.toc a.is-active{ color:var(--blue); border-left-color:var(--blue); background:var(--blue-50); }

.chapter{ padding-bottom:clamp(44px, 5vw, 72px); }
.chapter + .chapter{ border-top:1px solid var(--line); padding-top:clamp(44px, 5vw, 72px); }
.chapter .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px;
  background:var(--ink); color:#fff;
  font-size:.875rem; font-weight:800;
  margin-bottom:16px;
}

/* ---------- encadré ---------- */

.note{
  border-radius:var(--r);
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  background:var(--bg-soft);
  padding:18px 22px;
  font-size:.9375rem;
  margin:1.6rem 0;
}
.note strong{ display:block; margin-bottom:.25rem; }
.note.warn{ border-left-color:var(--amber); background:#FDF8F1; }
.note.cyan{ border-left-color:var(--cyan); background:var(--cyan-50); }

/* ---------- figures ---------- */

figure{ margin:0; }
.fig{
  border-radius:var(--r-l);
  border:1px solid var(--line);
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(13,91,166,.05), transparent 65%),
    radial-gradient(500px 300px at 85% 100%, rgba(43,163,221,.07), transparent 65%),
    #fff;
  padding:clamp(18px, 3vw, 32px);
}
.fig figcaption{ margin-top:14px; font-size:.8125rem; color:var(--ink-3); text-align:center; }
.fig svg{ width:100%; height:auto; display:block; }

/* carte de France */
/* Indispensable pour le SVG du heros, qui n'est pas dans un .fig : sans
   dimension explicite il se replie et la carte disparait sur telephone. */
.map{ display:block; width:100%; height:auto; }
.map .land{ fill:#EDF3F9; stroke:#CFDCE9; stroke-width:2.5; stroke-linejoin:round; }
.dark .map .land{ fill:rgba(255,255,255,.05); stroke:rgba(143,208,242,.3); }
.map .halo{ fill:var(--blue); opacity:.12; }
.map .site{ fill:var(--blue); }
.map .site-bb{ fill:var(--cyan); }
.map .lbl{ font:700 17px 'Plus Jakarta Sans', system-ui, sans-serif; fill:var(--ink); letter-spacing:-.01em; }
.map .lbl-s{ font:600 13px 'Plus Jakarta Sans', system-ui, sans-serif; fill:var(--ink-3); }
.dark .map .lbl{ fill:#fff; }
.dark .map .lbl-s{ fill:#8FA8C0; }
.map .link{ fill:none; stroke:var(--cyan); stroke-width:3; stroke-linecap:round; stroke-dasharray:9 11; }
.map .link-anim{ animation:dash 2.4s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-40; } }
.map .pulse{ transform-box:fill-box; transform-origin:center; animation:pulse 2.8s var(--ease) infinite; }
@keyframes pulse{ 0%{ transform:scale(.7); opacity:.75; } 70%{ transform:scale(1.7); opacity:0; } 100%{ opacity:0; } }

/* couches de sécurité */
.layers .ring{ fill:none; stroke-width:2; }
.layers .lab{ font:700 13px 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ---------- bandeau CTA ---------- */

.band{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 55%, #0B2E52 100%);
  color:#fff;
  padding:clamp(34px, 5vw, 64px);
  text-align:center;
}
.band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 280px at 15% 0%, rgba(43,163,221,.3), transparent 70%),
    radial-gradient(500px 280px at 88% 100%, rgba(13,91,166,.5), transparent 70%);
}
.band > *{ position:relative; }
.band h2{ color:#fff; }
.band p{ color:#B6CADD; margin-inline:auto; }
.band .btn-row{ justify-content:center; }

/* ---------- composeur de brief ---------- */

.brief{
  border-radius:var(--r-l);
  border:1px solid var(--line);
  background:#fff;
  padding:clamp(22px, 3vw, 34px);
  box-shadow:var(--sh-1);
}
.field{ margin-bottom:20px; }
.field > label{
  display:block; font-size:.8125rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:9px;
}
.field input[type=text], .field input[type=number], .field textarea, .field select{
  width:100%; padding:.72em .95em;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  font:inherit; font-size:.9375rem; color:var(--ink); background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-50);
}
.field textarea{ resize:vertical; min-height:92px; line-height:1.55; }

.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chips input{ position:absolute; opacity:0; width:0; height:0; }
.chips label{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.5em 1em; border-radius:999px;
  border:1px solid var(--line-2); background:#fff;
  font-size:.875rem; font-weight:600; color:var(--ink-2);
  cursor:pointer; user-select:none;
  transition:all .2s var(--ease);
}
.chips label:hover{ border-color:var(--ink-3); }
.chips input:checked + label{
  background:var(--blue); border-color:var(--blue); color:#fff;
  box-shadow:0 6px 16px -8px rgba(13,91,166,.9);
}
.chips input:focus-visible + label{ outline:3px solid var(--cyan); outline-offset:2px; }

.brief-out{
  margin-top:4px; padding:18px 20px;
  background:var(--bg-soft); border-radius:var(--r);
  font-size:.875rem; color:var(--ink-2);
  white-space:pre-wrap; line-height:1.6;
  max-height:240px; overflow:auto;
  font-variant-numeric:tabular-nums;
}

/* ---------- blocs de contact ---------- */

.contact-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-item .ico{ margin-bottom:0; width:42px; height:42px; border-radius:12px; flex:none; }
.contact-item .k{ font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.contact-item .v{ font-size:1.0625rem; font-weight:700; color:var(--ink); letter-spacing:-.015em; }
.contact-item .v a{ color:inherit; }
.contact-item .v a:hover{ color:var(--blue); }

/* ---------- pied de page ---------- */

.ftr{ background:var(--navy); color:#9FB6CC; padding:clamp(48px,6vw,76px) 0 32px; }
.ftr a{ color:#9FB6CC; font-size:.9375rem; }
.ftr a:hover{ color:#fff; }
.ftr-top{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3, minmax(0,1fr));
  gap:clamp(24px,4vw,48px);
  padding-bottom:40px;
}
@media (max-width:900px){ .ftr-top{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .ftr-top{ grid-template-columns:minmax(0,1fr); } }
.ftr .brand{ color:#fff; margin-bottom:18px; }
.ftr .brand svg{ color:#fff; }
.ftr .brand-sub{ color:#7E99B4; }
.ftr p{ font-size:.9375rem; color:#8FA8C0; max-width:34ch; }
.ftr h4{ color:#fff; font-size:.75rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ftr-bot{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:24px;
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between;
  font-size:.8125rem; color:#7E99B4;
}
.ftr-bot a{ font-size:.8125rem; }

/* ---------- apparitions ---------- */

.rv{
  opacity:0; transform:translateY(22px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s; }
.rv-d2{ transition-delay:.16s; }
.rv-d3{ transition-delay:.24s; }
.rv-d4{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; transition:none; }
  .map .link-anim, .map .pulse{ animation:none; }
  .btn:hover, .pole:hover, a.card:hover{ transform:none; }
}

/* ---------- impression ---------- */

@media print{
  .hdr, .ftr, .band, .burger, .brief{ display:none !important; }
  body{ font-size:11pt; }
  .dark{ background:#fff; color:#000; }
  .dark h1,.dark h2,.dark h3{ color:#000; }
  .dark p{ color:#333; }
  .glow,.grid-bg{ display:none; }
  .rv{ opacity:1; transform:none; }
}