/* plus-jakarta-sans-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(data:font/woff2;base64,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) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* plus-jakarta-sans-vietnamese-wght-normal */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_astro/plus-jakarta-sans-vietnamese-wght-normal.qRpaaN48.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* plus-jakarta-sans-latin-ext-wght-normal */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_astro/plus-jakarta-sans-latin-ext-wght-normal.DmpS2jIq.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* plus-jakarta-sans-latin-wght-normal */
@font-face {
  font-family: 'Plus Jakarta Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/_astro/plus-jakarta-sans-latin-wght-normal.eXO_dkmS.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 {
  --blue: #18248f;   /* bleu des boutons et des liens */
  --deep: #091057;   /* bleu marine du site validé par le client en 2024 */
  --ink: #16233f;
  --muted: #55607a;
  --soft: #f2f6fc;
  --line: #dbe3f0;
  font-family: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-size: 1.0625rem; line-height: 1.65; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { color: var(--deep); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.2rem); margin-bottom: 1.25rem; }
h3 { font-size: 1.2rem; margin-bottom: .5rem; }
p + p { margin-top: 1em; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); }
strong { color: var(--deep); }
:focus-visible { outline: 3px solid #f2a93b; outline-offset: 2px; }
.wrap { width: min(100%, 1160px); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.narrow { max-width: 820px; }
.center { text-align: center; margin-bottom: 2.25rem; }
.muted { color: var(--muted); }
.section { padding-block: clamp(48px, 7vw, 80px); }
.soft { background: var(--soft); }
.btn { font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 1.5rem; padding: .6rem 1.4rem; border: 1.5px solid var(--blue); border-radius: 8px; background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; transition: background-color .15s, color .15s; }
.btn:hover { background: var(--deep); border-color: var(--deep); }
.btn-white { background: #fff; border-color: #fff; color: var(--blue); overflow-wrap: anywhere; }
.btn-white:hover { background: var(--soft); border-color: var(--soft); }
.btn-line { background: none; border-color: #fff; color: #fff; }
.btn-line:hover { background: #fff; border-color: #fff; color: var(--blue); }

.site-header { position: relative; z-index: 5; background: #fff; border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 88px; }
.logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--blue); font-family: Georgia, 'Times New Roman', serif; font-size: 1.15rem; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.logo img { width: 72px; height: auto; }
#menu ul { display: flex; gap: clamp(1rem, 2.2vw, 1.9rem); }
#menu a { color: var(--ink); font-weight: 500; font-size: .97rem; text-decoration: none; padding-block: .4rem; }
#menu a:hover, #menu a[aria-current='page'] { color: var(--blue); box-shadow: 0 2px 0 var(--blue); }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.menu-btn span { position: absolute; left: 9px; width: 26px; height: 2.5px; border-radius: 2px; background: var(--deep); transition: transform .2s, opacity .2s; }
.menu-btn span:nth-child(1) { top: 13px; }
.menu-btn span:nth-child(2) { top: 21px; }
.menu-btn span:nth-child(3) { top: 29px; }
.open .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.open .menu-btn span:nth-child(2) { opacity: 0; }
.open .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Demande du client (22/10/2024) : bleu beaucoup plus foncé, léger dégradé. */
.hero { background: linear-gradient(180deg, var(--deep), #16208a); color: #fff; }
.hero h1 { color: #fff; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-block: clamp(48px, 7vw, 88px); }
.hero p { margin-top: 1.25rem; font-size: 1.15rem; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.charte { display: block; max-width: 340px; justify-self: center; }
.charte img { border-radius: 6px; box-shadow: 0 12px 32px rgb(0 0 0 / .28); }

.warning { padding-block: clamp(36px, 5vw, 56px); background: #fff7e6; border-bottom: 1px solid #f5e3b8; }
.warning h2 { margin-bottom: .75rem; font-size: 1.45rem; }
.grid-2, .grid-3 { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.card h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.card p { color: var(--muted); }
.clients { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.75rem; }
.clients li { color: var(--deep); font-size: 1.25rem; font-weight: 700; }
.catalogue { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cover img { border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 8px 24px rgb(10 42 110 / .14); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.video-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: var(--deep); cursor: pointer; }
.video-play img { width: 100%; height: 100%; object-fit: cover; }
.video-play span { position: absolute; top: 50%; left: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: var(--deep); transition: background-color .15s; }
.video-play span::after { content: ''; position: absolute; top: 14px; left: 27px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.video-play:hover span { background: #d62020; }
.video-note { margin-top: 1.25rem; text-align: center; font-size: .92rem; color: var(--muted); }
.legal h2 { margin: 2.25rem 0 .6rem; font-size: 1.35rem; }
.legal h2:first-child { margin-top: 0; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li + li { margin-top: .4rem; }
.video figcaption { margin-top: .6rem; font-size: .95rem; color: var(--muted); }
.page-title { padding-block: clamp(40px, 6vw, 64px); background: linear-gradient(180deg, var(--deep), #111a78); color: #fff; }
.page-title h1 { color: #fff; }
.page-title p { margin-top: .9rem; max-width: 40em; font-size: 1.1rem; }
.cta { padding-block: clamp(44px, 6vw, 64px); background: var(--deep); color: #fff; text-align: center; }
.cta h2 { color: #fff; margin-bottom: .5rem; }
.site-footer { padding-block: 2.5rem; border-top: 1px solid rgb(255 255 255 / .16); background: var(--deep); color: #dfe7f7; font-size: .95rem; }
.site-footer strong { color: #fff; font-family: Georgia, 'Times New Roman', serif; letter-spacing: .06em; }
.site-footer a { color: #fff; }
.foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; overflow-wrap: anywhere; }
.foot ul li + li { margin-top: .35rem; }
/* Le logo a un fond blanc : on le pose sur une pastille blanche pour le fond bleu. */
.foot-logo { width: 96px; margin-bottom: .9rem; padding: 8px; background: #fff; border-radius: 10px; }

.link-btn { padding: 0; background: none; border: 0; color: #fff; font: inherit; text-decoration: underline; cursor: pointer; }
.cookie-bar { position: fixed; inset: auto 16px 16px; z-index: 20; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; max-width: 860px; margin-inline: auto; padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 32px rgb(9 16 87 / .22); font-size: .95rem; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 22rem; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie-actions .btn { margin: 0; min-height: 44px; }
.btn-outline { background: #fff; color: var(--blue); }
.btn-outline:hover { color: #fff; }

@media (max-width: 1000px) {
  .menu-btn { display: block; }
  #menu { display: none; position: absolute; inset: 100% 0 auto; padding: .5rem clamp(16px, 4vw, 32px) 1rem; background: #fff; border-bottom: 1px solid var(--line); }
  .open #menu { display: block; }
  #menu ul { flex-direction: column; gap: 0; }
  #menu a { display: block; padding-block: .75rem; }
  #menu a:hover, #menu a[aria-current='page'] { box-shadow: none; }
}
@media (max-width: 800px) {
  .hero-grid, .grid-2, .grid-3, .catalogue, .foot { grid-template-columns: minmax(0, 1fr); }
  .charte { max-width: 260px; }
  .cover { max-width: 240px; }
}
@media (max-width: 420px) {
  .logo { font-size: .95rem; gap: .5rem; }
  .logo img { width: 54px; }
  .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .btn, .menu-btn span { transition: none; } }