/* ═══════════════════════════════════════════════════════════════════════
   SHARINGTHALES — DESIGN PUBLIC (reconstruit depuis Figma, sans héritage)
   Tokens exacts : navy #020841 · cyan #00BBDD · body #E2F1F9 · Roboto
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --navy: #020841;
    --cyan: #00BBDD;
    --body-blue: #E2F1F9;
    --ink: #242A75;
    --r-americas: #7C7FAB;
    --r-asia: #AE2573;
    --r-europe: #00AB8E;
    --r-mea: #00BBDD;
    --maxw: 1440px;
    --gutter: 128px;
    --font: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
.thx { margin: 0; font-family: var(--font); color: var(--navy); background: #fff; -webkit-font-smoothing: antialiased; }
.thx img { max-width: 100%; }

/* ── Header « racine » : barre navy, logo centré ─────────────────────── */
.thx-topbar { background: var(--navy); min-height: 85px; display: flex; align-items: center; justify-content: center; padding: 30px 60px; }
.thx-topbar__logo { height: 22px; width: auto; }

/* ── Bannière ────────────────────────────────────────────────────────── */
.thx-banner { position: relative; height: 360px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 80px; overflow: hidden; }
.thx-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; z-index: 0; }
.thx-banner__caption { position: relative; z-index: 1; max-width: 420px; }
.thx-banner__label { display: inline-block; background: var(--navy); color: #fff; font-weight: 700; font-size: 28px; line-height: 1; padding: 10px 20px; margin: 0 0 10px; white-space: nowrap; }
.thx-banner__title { color: var(--navy); font-size: 28px; font-weight: 400; line-height: 1.12; margin: 0; }

/* ── Corps du sélecteur de pays ──────────────────────────────────────── */
.thx-select-body { position: relative; background: var(--body-blue); overflow: hidden; }
.thx-select-map { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: center; padding-top: 150px; opacity: .12; pointer-events: none; }
.thx-select-map img { width: 1295px; max-width: none; height: auto; }
.thx-select-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter); display: flex; flex-direction: column; gap: 40px; }
.thx-intro { margin: 0; text-align: center; font-size: 22px; line-height: 1.3; color: var(--ink); }
.thx-intro em { color: var(--cyan); font-weight: 500; font-style: normal; }
.thx-select-title { margin: 0; text-align: center; font-weight: 700; font-size: 23px; color: var(--navy); }
.thx-regions { display: flex; gap: 20px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.thx-region { width: 238px; background: rgba(255,255,255,.6); border-top: 5px solid; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.thx-region--americas { border-color: var(--r-americas); }
.thx-region--asia     { border-color: var(--r-asia); }
.thx-region--europe   { border-color: var(--r-europe); }
.thx-region--mea      { border-color: var(--r-mea); }
.thx-region__title { margin: 0 0 2px; font-weight: 700; font-size: 24px; line-height: 1.1; }
.thx-region--americas .thx-region__title { color: var(--r-americas); }
.thx-region--asia     .thx-region__title { color: var(--r-asia); }
.thx-region--europe   .thx-region__title { color: var(--r-europe); }
.thx-region--mea      .thx-region__title { color: var(--r-mea); }
.thx-region a { display: block; font-size: 18px; line-height: 1.1; color: var(--navy); text-decoration: none; }
.thx-region a:hover { color: var(--cyan); }

/* ── Footer (navy + liens + réseaux sociaux) ─────────────────────────── */
.thx-footer { background: var(--navy); color: #fff; display: flex; align-items: center; gap: 20px; padding: 40px var(--gutter); flex-wrap: wrap; }
.thx-footer__links { flex: 1 1 auto; display: flex; align-items: center; gap: 40px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.thx-footer__links a, .thx-footer__copy { color: #fff; font-size: 18px; text-decoration: none; white-space: nowrap; }
.thx-footer__links a:hover { color: var(--cyan); }
.thx-footer__sep { width: 1px; height: 28px; background: rgba(255,255,255,.5); flex: 0 0 auto; }
.thx-footer__socials { display: flex; gap: 20px; align-items: center; }
.thx-footer__socials a { width: 32px; height: 32px; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; }
.thx-footer__socials img { width: 18px; height: 18px; display: block; }

@media (max-width: 1180px) { :root { --gutter: 40px; } .thx-region { width: calc(50% - 10px); } }
@media (max-width: 640px)  { .thx-region { width: 100%; } .thx-banner { padding: 0 24px; } .thx-footer { flex-direction: column; align-items: flex-start; } }

/* ── Header pages de contenu (blanc, logo + nav + chip pays) ─────────── */
.thx-header { background: #fff; display: flex; align-items: center; gap: 24px; padding: 24px 60px; position: relative; }
.thx-header__logo-link { flex: 0 0 auto; line-height: 0; }
.thx-header__logo { height: 21px; width: auto; display: block; }
.thx-header__nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 24px; min-width: 0; flex-wrap: wrap; }
.thx-header__nav a { font-size: 18px; line-height: 1.12; color: #515569; text-decoration: none; white-space: nowrap; }
.thx-header__nav a:hover { color: var(--cyan); }
.thx-header__nav a.is-active { color: var(--navy); font-weight: 700; }
.thx-header__country { flex: 0 0 auto; background: #F4F4F4; border-radius: 2px; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #515569; white-space: nowrap; }
.thx-nav-toggle, .thx-burger { display: none; }

/* Bannière éditable (1er <p> = label navy, suite = titre navy) */
.thx-banner__caption--rich p { margin: 0; color: var(--navy); font-size: 28px; line-height: 1.12; }
.thx-banner__caption--rich p:first-child { display: inline-block; background: var(--navy); color: #fff; font-weight: 700; padding: 10px 20px; margin-bottom: 10px; white-space: nowrap; }

@media (max-width: 1024px) {
    .thx-header { flex-wrap: wrap; gap: 16px; padding: 16px 24px; }
    .thx-burger { display: block; order: 2; margin-left: auto; width: 32px; height: 24px; cursor: pointer; background: none; border: 0; padding: 0; }
    .thx-burger span, .thx-burger span::before, .thx-burger span::after { display: block; height: 3px; background: var(--navy); border-radius: 2px; }
    .thx-burger span { position: relative; top: 10px; }
    .thx-burger span::before { content: ''; position: absolute; top: -7px; width: 100%; }
    .thx-burger span::after { content: ''; position: absolute; top: 7px; width: 100%; }
    .thx-header__nav { order: 4; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 12px; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
    .thx-nav-toggle:checked ~ .thx-header__nav { max-height: 420px; }
    .thx-header__country { order: 3; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME (corps) — reconstruit depuis Figma (Body 4022:11527)
   ═══════════════════════════════════════════════════════════════════════ */
.thx-home { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); background: #fff; }

/* 3 cartes égales, collées (pas de gap), 226px */
.thx-home-cards { display: flex; }
.thx-hcard { flex: 1 1 0; min-width: 0; min-height: 226px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px 20px; text-align: center; text-decoration: none; color: #fff; }
.thx-hcard--prix { background: var(--navy); gap: 10px; }
.thx-hcard--sim  { background: #3D4792; }
.thx-hcard--sous { background: var(--cyan); }
.thx-hcard__label { margin: 0; color: var(--cyan); font-size: 28px; line-height: 1.12; }
.thx-hcard__price { margin: 0; font-weight: 700; color: #fff; font-size: 28px; }
.thx-hcard__picto--sim  { width: 70px; height: 42px; object-fit: contain; }
.thx-hcard__picto--sous { width: 70px; height: 70px; object-fit: contain; }
.thx-hcard__txt { margin: 0; font-size: 28px; line-height: 1.12; }
.thx-hcard--sim  .thx-hcard__txt { color: #fff; }
.thx-hcard--sous .thx-hcard__txt { color: var(--navy); }

/* Section grise : Comprendre + dates */
.thx-home-body { background: #F4F4F4; padding: 40px; display: flex; flex-direction: column; gap: 40px; }
.thx-home-h2 { margin: 0; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 28px; line-height: 1.12; color: #242A75; }

/* Vidéo + transcription */
.thx-comprendre { display: flex; gap: 20px; align-items: stretch; }
.thx-video { flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 700 / 383; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.thx-video__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .41; }
.thx-video::after { content: ''; position: absolute; inset: 0; background: rgba(0,187,221,.2); }
.thx-video__play { position: relative; z-index: 1; width: 100px; height: 100px; display: block; }
.thx-video__play img { width: 100%; height: 100%; display: block; }
.thx-transcript { flex: 0 0 350px; width: 350px; max-height: 402px; background: rgba(255,255,255,.6); border-top: 5px solid var(--cyan); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.thx-transcript__head { margin: 0; color: var(--cyan); font-weight: 700; font-size: 24px; line-height: 1.1; }
.thx-transcript__body { overflow-y: auto; color: var(--navy); font-size: 18px; line-height: 1.35; }
.thx-transcript__body p { margin: 0 0 .5em; }
.thx-transcript__body ul { margin: .3em 0 .3em 1.4em; }
.thx-transcript__body li { margin-bottom: .3em; }

/* Frise dates : 5 cartes blanches, picto dans cercle coloré */
.thx-dates { display: flex; gap: 20px; align-items: stretch; }
.thx-date { flex: 1 1 0; min-width: 0; background: #fff; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.thx-date__picto { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.thx-date__picto img { display: block; max-width: 55%; max-height: 55%; }
.thx-date__picto--3 { background: transparent; }
.thx-date__picto--3 img { max-width: 100%; max-height: 100%; }
.thx-date__date { font-weight: 700; font-size: 18px; line-height: 1.12; color: #242A75; }
.thx-date__date p { margin: 0; }
.thx-date__label { font-size: 18px; line-height: 1.12; color: #242A75; }
.thx-date__label p { margin: 0; }

.thx-pattern { width: 100%; overflow: hidden; line-height: 0; }
.thx-pattern img { width: 100%; height: auto; display: block; }

@media (max-width: 1024px) {
    .thx-home-cards { flex-direction: column; }
    .thx-comprendre { flex-direction: column; }
    .thx-transcript { flex-basis: auto; width: 100%; max-height: none; }
    .thx-dates { flex-wrap: wrap; }
    .thx-date { flex-basis: calc(50% - 10px); }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGES DE CONTENU (Groupe, Offre, Modalités, Contact) — section grise
   ═══════════════════════════════════════════════════════════════════════ */
.thx-content { align-items: stretch; }
.thx-content__title { margin: 0; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 28px; line-height: 1.12; color: #242A75; }
.thx-content__sub { margin: 0; font-weight: 700; font-size: 26px; line-height: 1.19; color: var(--cyan); text-transform: uppercase; }
.thx-content__text { color: #242A75; font-size: 18px; line-height: 1.3; }
.thx-content__text p { margin: 0 0 .6em; }
.thx-content__text p:last-child { margin-bottom: 0; }
/* list-style explicite : le socle Arkema pose `ul { list-style: none }` en global */
.thx-content__text ul { margin: .4em 0 .8em 1.4em; list-style: disc; }
.thx-content__text ol { margin: .4em 0 .8em 1.4em; list-style: decimal; }
.thx-content__text li { margin-bottom: .4em; }
.thx-content__text li::marker { color: currentColor; }
.thx-content__text h3 { color: var(--cyan); font-weight: 700; font-size: 20px; margin: 1em 0 .5em; }
.thx-content__text a { color: var(--cyan); }
.thx-content__text strong { color: #242A75; }
/* Chiffres clés : puces cyan */
.thx-content__stats ul { list-style: none; margin: 0; padding: 0; }
.thx-content__stats li { position: relative; padding-left: 32px; margin-bottom: .6em; }
.thx-content__stats li::before { content: ''; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cyan); }

/* « L'action Thales » : 2 encarts blancs avec graphes */
.thx-action { display: flex; flex-direction: column; gap: 20px; }
.thx-boxes { display: flex; gap: 40px; align-items: stretch; flex-wrap: wrap; }
.thx-box { background: #fff; padding: 20px; flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.thx-box__title { margin: 0; font-weight: 900; font-size: 18px; color: #242A75; }
.thx-box__caption { color: var(--cyan); font-weight: 700; font-size: 13px; line-height: 1.1; }
.thx-box__caption p { margin: 0; }
.thx-box__chart { width: 100%; height: auto; display: block; }
.thx-box__note { color: #242A75; font-size: 10px; line-height: 1.2; }
.thx-box__note p { margin: 0 0 .4em; }
.thx-box__note em { font-style: italic; text-decoration: underline; }

/* ── Offre : encart blanc (photo + avantages) + encart navy (PEG) ─────── */
.thx-content__title--left { text-align: left; }
.thx-offer-box { background: #fff; padding: 40px; display: flex; gap: 40px; align-items: stretch; }
.thx-offer-box__photo { flex: 0 0 391px; max-width: 391px; overflow: hidden; }
.thx-offer-box__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thx-offer-box__adv { flex: 1 1 0; min-width: 0; }
.thx-offer-box__title { margin: 0 0 32px; color: var(--cyan); font-weight: 700; font-size: 25px; }
.thx-offer-adv { color: #242A75; font-size: 18px; line-height: 1.2; }
.thx-offer-adv > ol, .thx-offer-adv > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.thx-offer-adv > ol > li, .thx-offer-adv > ul > li { position: relative; padding-left: 66px; }
.thx-offer-adv > ol > li::before, .thx-offer-adv > ul > li::before { content: ''; position: absolute; left: 0; top: 0; width: 50px; height: 50px; background: center / contain no-repeat; }
.thx-offer-adv > ol > li:nth-child(1)::before, .thx-offer-adv > ul > li:nth-child(1)::before { background-image: var(--p1); }
.thx-offer-adv > ol > li:nth-child(2)::before, .thx-offer-adv > ul > li:nth-child(2)::before { background-image: var(--p2); }
.thx-offer-adv > ol > li:nth-child(3)::before, .thx-offer-adv > ul > li:nth-child(3)::before { background-image: var(--p3); }
.thx-offer-adv > ol > li:nth-child(4)::before, .thx-offer-adv > ul > li:nth-child(4)::before { background-image: var(--p4); }
.thx-offer-adv strong { text-transform: uppercase; font-weight: 900; color: #242A75; }
.thx-offer-adv p { margin: 0 0 .4em; }
.thx-offer-adv ul ul, .thx-offer-adv ol ul { display: block; margin: .4em 0 0 1.2em; list-style: disc; }
.thx-offer-adv ul ul li, .thx-offer-adv ol ul li { padding-left: 0; margin-bottom: .3em; }
.thx-offer-adv ul ul li::before, .thx-offer-adv ol ul li::before { display: none; }
.thx-peg-box { background: var(--navy); padding: 40px; color: #fff; }
.thx-peg-box__title { margin: 0 0 16px; color: #fff; font-weight: 700; font-size: 18px; }
.thx-peg-box__text { color: #fff; font-size: 18px; line-height: 1.2; }
.thx-peg-box__text p { margin: 0 0 .5em; }
.thx-peg-box__text ul { margin: .4em 0 0 1.5em; }
.thx-peg-box__text li { margin-bottom: .5em; }
.thx-peg-box__text strong { color: #fff; }
@media (max-width: 900px) { .thx-offer-box { flex-direction: column; } .thx-offer-box__photo { flex-basis: auto; max-width: none; } }

/* Avantages de l'offre : rangées picto + texte (robuste, vrais <img>) */
.thx-adv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.thx-adv { display: flex; gap: 16px; align-items: flex-start; }
.thx-adv__picto { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 50%; background: var(--cyan); display: flex; align-items: center; justify-content: center; }
.thx-adv__picto img { width: 62%; height: 62%; object-fit: contain; filter: brightness(0) invert(1); }
.thx-adv__text { flex: 1 1 0; min-width: 0; color: #242A75; font-size: 18px; line-height: 1.2; }
.thx-adv__text p { margin: 0 0 .3em; }
.thx-adv__text strong { text-transform: uppercase; font-weight: 900; color: #242A75; }
.thx-adv__text ul { margin: .4em 0 0 1.4em; list-style: disc; }
.thx-adv__text li { margin-bottom: .3em; }

/* PEG : puces blanches */
.thx-peg-box__text ul { list-style: disc; }
.thx-peg-box__text li { color: #fff; }
.thx-peg-box__text li::marker { color: #fff; }
/* Encart navy « Qui peut participer ? » : titre h3 blanc */
.thx-peg-box__text h3 { margin: 0 0 .5em; color: #fff; font-weight: 700; font-size: 25px; line-height: 1.12; }
.thx-peg-box__text sup { font-size: .65em; vertical-align: super; }

/* ── Modalités : sous-titres cyan (casse normale) + étapes « check » + photo */
.thx-msec { display: flex; flex-direction: column; gap: 16px; }
.thx-msub { margin: 0; color: var(--cyan); font-weight: 700; font-size: 26px; line-height: 1.19; }
.thx-content__text sup { font-size: .65em; vertical-align: super; }
.thx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.thx-step { display: flex; gap: 16px; align-items: flex-start; }
.thx-step__check { flex: 0 0 23px; width: 23px; height: 23px; margin-top: 2px; }
.thx-step__text { flex: 1 1 0; min-width: 0; color: #242A75; font-size: 18px; line-height: 1.2; }
.thx-step__text p { margin: 0 0 .4em; }
.thx-step__text p:last-child { margin-bottom: 0; }
.thx-step__text em { font-style: italic; }
/* Figma : l'avertissement magenta « Attention… » est en italique (medium), pas gras */
.thx-step__text .thx-warn { font-style: italic; font-weight: 500; }
/* Figma : « Les cas de déblocage anticipé » = liste à puces (le contenu legacy est un <ol>) */
.thx-msec .thx-content__text ol { list-style: disc; }
.thx-modal-photo { width: 100%; max-width: 993px; overflow: hidden; }
.thx-modal-photo img { width: 100%; height: auto; display: block; }
.thx-modal__footnote { margin: 0; color: #242A75; font-size: 11px; line-height: 1.3; }
.thx-modal__footnote sup { font-size: .8em; vertical-align: super; }

/* ── Bouton « retour en haut » (toutes pages) : picto Figma (cercle cyan +
   flèche blanche, scroll-top.svg). On neutralise le fond/chevron du socle. */
.lien-top { background: none; padding: 0; }
.lien-top::before { content: none; }
.lien-top img { display: block; width: 100%; height: 100%; }