/* =============================================================
   final.css — En-tete, pied de page et page d'accueil.

   Implementation fidele des references Claude Design :
     docs/design/final-home/home-final-desktop.html  (1440)
     docs/design/final-home/home-final-mobile.html   (390)

   Les valeurs ci-dessous (tailles, couleurs, rayons, positions) sont
   RELEVEES sur le DOM rendu de ces references, pas interpretees.
   Voir FINAL_HOME_DESIGN_HANDOFF_REPORT.md.

   Ce fichier est charge APRES main.css : il porte l'en-tete et le pied de
   page communs a toutes les pages, plus les sections de l'accueil. Les
   styles des autres pages restent dans main.css, inchanges.
   ============================================================= */

/* --- Conteneur ---------------------------------------------------
   A 1440 px, le contenu de la reference va de x=80 a x=1360 : 1280 px
   centres. En dessous, une gouttiere de 40 px (20 px en mobile). */
.wrap {
  width: min(1280px, 100% - 80px);
  margin-inline: auto;
}

/* --- Boutons ------------------------------------------------------ */

.btn--ghost {
  background: rgba(255, 255, 255, .85);
  color: var(--color-navy);
  border: 1px solid rgba(15, 42, 74, .12);
  box-shadow: 0 6px 18px -10px rgba(15, 42, 74, .35);
}

.btn--ghost:hover {
  background: var(--color-white);
  color: var(--color-navy);
  border-color: rgba(15, 42, 74, .22);
}

.btn--navy {
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: 0 10px 22px -12px rgba(15, 42, 74, .7);
}

.btn--navy:hover { background: #17395F; color: var(--color-white); }

/* =============================================================
   EN-TETE
   ============================================================= */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 42, 74, .08);
}

.hdr__in {
  width: min(1280px, 100% - 80px);
  margin-inline: auto;
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  justify-self: start;
  flex-shrink: 0;
}

.brand__mark {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 6px 14px -6px rgba(15, 42, 74, .35);
}

.brand__word {
  display: block;
  height: 26px;
  width: auto;
}

/* Navigation en pilule — l'onglet actif est une pastille blanche posee. */
.navpill {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
}

.navpill__link {
  position: relative;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  text-decoration: none;
  padding: 10px 18px;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 999px;
  transition: background var(--motion-fast) var(--ease);
}

.navpill__link:hover { background: rgba(255, 255, 255, .7); color: var(--color-navy); }

.navpill__link.is-active {
  background: var(--color-white);
  box-shadow: 0 4px 12px -6px rgba(15, 42, 74, .25);
}

.hdr__cta,
.navpill__cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--color-teal);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 22px -10px rgba(11, 122, 118, .6);
}

.hdr__cta:hover,
.navpill__cta:hover { background: var(--color-teal-hover); color: var(--color-white); }

.hdr__cta svg,
.navpill__cta svg { width: 16px; height: 16px; }

.navpill__cta { display: none; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy);
  align-items: center;
  justify-content: center;
  justify-self: end;
  cursor: pointer;
}

.burger svg { width: 24px; height: 24px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* =============================================================
   HERO
   ============================================================= */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F2F8FD 0%, #E8F2FB 55%, #F6FAFD 100%);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hero__glow--a {
  left: -260px;
  top: 120px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 68%);
}

.hero__glow--b {
  left: 520px;
  top: 560px;
  width: 1000px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 70%);
}

.hero__band {
  position: absolute;
  left: 0;
  right: 0;
  top: 540px;
  height: 260px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 100%);
  pointer-events: none;
}

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: 470px 1fr;
  align-items: start;
  min-height: 800px;
}

.hero__text {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: none;
}

.tagpill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(15, 42, 74, .07);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  width: fit-content;
  flex-shrink: 0;
  box-shadow: 0 6px 16px -10px rgba(15, 42, 74, .35);
}

.tagpill img { width: 22px; height: 22px; border-radius: 6px; display: block; }

.hero h1 {
  margin-top: 22px;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: var(--fw-extrabold);
  color: var(--color-navy);
  text-wrap: balance;
}

.hero__lead {
  margin-top: 22px;
  max-width: 440px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text);
  text-wrap: pretty;
}

.hero__actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.hero__actions .btn {
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
}

.hero__editor {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text-muted);
}

.hero__dash {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-teal);
  flex-shrink: 0;
}

.hero .signature {
  margin-top: 12px;
  font-family: var(--font-script);
  font-size: 27px;
  line-height: 1.5;
  color: var(--color-teal);
  max-width: 400px;
  transform: none;
}

/* --- Visuel produit ---------------------------------------------- */

.hero__visual {
  position: relative;
  height: 800px;
}

/* Ordinateur portable — l'ecran deborde legerement a gauche de la colonne,
   comme dans la reference. */
.lap {
  position: absolute;
  left: -18px;
  top: 92px;
  width: 793px;
}

.lap__lid {
  background: linear-gradient(160deg, #2B3644 0%, #171F29 60%, #222C39 100%);
  border-radius: 24px 24px 6px 6px;
  padding: 3px;
  box-shadow:
    0 44px 80px -34px rgba(15, 42, 74, .45),
    0 8px 22px -8px rgba(15, 42, 74, .22);
}

.lap__screen {
  position: relative;
  border-radius: 22px 22px 4px 4px;
  background: #0F1318;
  overflow: hidden;
  aspect-ratio: 786 / 514;
  padding: 17px 16px 14px;
}

.lap__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 19px;
  background: #0F1318;
  border-radius: 0 0 12px 12px;
  z-index: 3;
}

.lap__base {
  position: relative;
  height: 36px;
  margin-top: -9px;
  margin-inline: -30px;
  border-radius: 3px 3px 20px 20px;
  background: linear-gradient(180deg, #E9EDF1 0%, #CBD3DB 46%, #AEB8C3 100%);
  box-shadow: 0 26px 40px -26px rgba(15, 42, 74, .5);
}

.lap__base span {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 148px;
  height: 9px;
  border-radius: 0 0 8px 8px;
  background: #B5BEC8;
}

/* --- Interface produit (conceptuelle) ---------------------------- */

.app {
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #F7FAFD;
  display: grid;
  grid-template-columns: 168px 1fr;
  font-size: 12px;
  color: var(--color-text);
}

.app__side {
  background: var(--color-white);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app__brand { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; }
.app__brand img:first-child { width: 27px; height: 27px; border-radius: 8px; display: block; }
.app__brand img:last-child { height: 15px; width: auto; display: block; }

.app__nav { display: flex; flex-direction: column; gap: 3px; }
.app__nav--foot { margin-top: auto; }

.app__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.app__item svg { width: 13px; height: 14px; flex-shrink: 0; }

.app__item.is-active {
  background: var(--color-accent-tint);
  /* La reference donne 4,47:1 — un cheveu sous le seuil AA de 4,5.
     #0A7773 porte le rapport a 4,66 sans difference perceptible. */
  color: #0A7773;
  font-weight: var(--fw-bold);
}

.app__main { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.app__top { display: flex; justify-content: flex-end; gap: 10px; }

.app__round {
  width: 33px;
  height: 33px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app__round svg { width: 14px; height: 14px; }
.app__round--w { background: var(--color-white); color: var(--color-navy); }
.app__round--b { background: var(--color-sky-light); color: #2F7FD1; }

.app__hero {
  position: relative;
  border-radius: 16px;
  padding: 26px 24px;
  min-height: 226px;
  background:
    radial-gradient(120% 150% at 100% 0%, #DCEEFC 0%, transparent 62%),
    linear-gradient(135deg, #E4F1FB 0%, #EEF6FD 100%);
  overflow: hidden;
}

.app__eyebrow {
  display: block;
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.app__title {
  display: block;
  margin-top: 8px;
  max-width: 250px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
  color: var(--color-navy);
}

.app__title em { font-style: normal; color: var(--color-teal); }

.app__desc {
  display: block;
  margin-top: 10px;
  max-width: 250px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.app__search {
  margin-top: 16px;
  width: 374px;
  max-width: 100%;
  height: 35px;
  border-radius: 999px;
  background: var(--color-white);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 5px 0 12px;
  box-shadow: 0 6px 16px -10px rgba(15, 42, 74, .4);
}

.app__search > svg { width: 14px; height: 14px; color: var(--color-text-muted); flex-shrink: 0; }
.app__search > span { font-size: 10.5px; color: var(--color-text-muted); flex: 1; }

.app__searchbtn {
  flex: 0 0 auto !important;
  height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--color-teal);
  color: var(--color-white) !important;
  font-size: 10px !important;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
}

/* Cartes flottantes de la banniere produit. */
.app__fl {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.app__fl svg { width: 48%; height: 48%; }

.app__fl--1 {
  width: 66px; height: 66px; right: 82px; top: 18px; border-radius: 14px;
  background: linear-gradient(145deg, #18B3A8 0%, #0B7A76 100%);
  box-shadow: 0 12px 22px -10px rgba(11, 122, 118, .6);
  transform: rotate(-10deg);
}

.app__fl--2 {
  width: 53px; height: 52px; right: 6px; top: 10px; border-radius: 12px;
  background: linear-gradient(145deg, #8E86E8 0%, #6B5BD6 100%);
  box-shadow: 0 12px 22px -10px rgba(107, 91, 214, .55);
  transform: rotate(9deg);
}

.app__fl--3 {
  width: 61px; height: 61px; right: -6px; top: 60px; border-radius: 12px;
  background: linear-gradient(145deg, #58A5EA 0%, #2F7FD1 100%);
  box-shadow: 0 12px 22px -10px rgba(47, 127, 209, .55);
  transform: rotate(-6deg);
}

.app__fl--mark {
  width: 78px; height: 77px; right: 62px; top: 83px; border-radius: 18px;
  background: var(--color-white);
  box-shadow: 0 16px 30px -12px rgba(15, 42, 74, .45);
  transform: rotate(-4deg);
}

.app__fl--mark img { width: 51px; height: 51px; border-radius: 12px; display: block; }

.app__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }

.app__card {
  background: var(--color-white);
  border-radius: 14px;
  padding: 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 6px 16px -12px rgba(15, 42, 74, .5);
}

.app__pill {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.app__pill svg { width: 14px; height: 14px; }
.app__pill--a { background: var(--color-accent-tint); color: var(--color-teal); }
.app__pill--b { background: #ECE9FB; color: #6B5BD6; }
.app__pill--c { background: #FDEBDC; color: #D96F1F; }

.app__card b { font-size: 12px; font-weight: var(--fw-bold); color: var(--color-navy); }
.app__card em { font-style: normal; font-size: 9.5px; line-height: 1.45; color: var(--color-text-muted); }

/* --- Telephone ---------------------------------------------------- */

.phn {
  position: absolute;
  left: 618px;
  top: 208px;
  width: 236px;
  border-radius: 40px;
  background: linear-gradient(150deg, #303B49 0%, #161D26 60%, #242E3B 100%);
  padding: 4px;
  box-shadow:
    0 40px 70px -30px rgba(15, 42, 74, .5),
    0 8px 20px -8px rgba(15, 42, 74, .3);
}

.phn__btn { position: absolute; width: 3px; border-radius: 2px; background: #3A424C; }
.phn__btn--a { left: -2px; top: 110px; height: 34px; }
.phn__btn--b { left: -2px; top: 156px; height: 56px; }
.phn__btn--c { right: -2px; top: 140px; height: 80px; }

.phn__screen {
  position: relative;
  border-radius: 37px;
  background: var(--color-white);
  overflow: hidden;
  aspect-ratio: 228 / 471;
  display: flex;
  flex-direction: column;
  padding: 0 14px 12px;
  font-size: 11px;
}

.phn__island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  border-radius: 999px;
  background: #0F1318;
  z-index: 2;
}

.phn__head { padding-top: 46px; display: flex; align-items: center; gap: 6px; }
.phn__head img:first-child { width: 20px; height: 20px; border-radius: 6px; display: block; }
.phn__head img:last-child { height: 12px; width: auto; display: block; }

.phn__title { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.phn__title b { font-size: 17px; font-weight: var(--fw-extrabold); color: var(--color-navy); letter-spacing: -0.02em; }
.phn__title span { font-size: 9.5px; color: var(--color-text-muted); }

.phn__grid { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.phn__tile {
  border-radius: 12px;
  padding: 10px 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  color: var(--color-navy);
}

/* La reference place le pictogramme dans un rond BLANC et le libelle en
   bleu nuit : la couleur d'univers ne porte que l'icone. C'est aussi ce qui
   rend l'ensemble conforme au contraste WCAG AA. */
.phn__ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.phn__ico svg { width: 13px; height: 13px; }
.phn__tile { color: var(--color-navy); }
.phn__tile--a { background: var(--color-accent-tint); }
.phn__tile--a .phn__ico { color: var(--color-teal); }
.phn__tile--b { background: #ECE9FB; }
.phn__tile--b .phn__ico { color: #6B5BD6; }
.phn__tile--c { background: #FDEBDC; }
.phn__tile--c .phn__ico { color: #D96F1F; }
.phn__tile--d { background: var(--color-sky-light); }
.phn__tile--d .phn__ico { color: #2F7FD1; }

.phn__promo {
  margin-top: 12px;
  border-radius: 14px;
  padding: 14px 13px;
  background: linear-gradient(135deg, #14355C 0%, #0F2A4A 100%);
  color: var(--color-white);
  font-size: 10px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.phn__tabs {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.phn__tabs span { color: var(--color-border-strong); display: flex; }
.phn__tabs svg { width: 14px; height: 14px; }
.phn__tabs .is-active { color: var(--color-teal); }

/* --- Elements flottants du hero ---------------------------------- */

.hero__appicon {
  position: absolute;
  left: 3px;
  top: 627px;
  width: 114px;
  height: 114px;
  border-radius: 28px;
  box-shadow: 0 36px 60px -22px rgba(15, 42, 74, .6);
}

.hero__appicon img { width: 100%; height: 100%; border-radius: 28px; display: block; }

.hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__chip--gift {
  left: 531px; top: 33px; width: 74px; height: 74px; border-radius: 18px;
  background: linear-gradient(145deg, #FFFFFF 0%, #EEF6FD 100%);
  color: #D96F1F;
  box-shadow: 0 24px 44px -18px rgba(15, 42, 74, .45);
}

.hero__chip--cash {
  left: 710px; top: 104px; width: 63px; height: 63px; border-radius: 16px;
  background: linear-gradient(145deg, #FFFFFF 0%, #E3F3F2 100%);
  color: var(--color-teal);
  box-shadow: 0 24px 44px -18px rgba(15, 42, 74, .45);
}

.hero__chip--gift svg { width: 35px; height: 35px; }
.hero__chip--cash svg { width: 29px; height: 29px; }

/* =============================================================
   REASSURANCE — la carte chevauche la fin du hero
   ============================================================= */

.assur { background: var(--color-white); }

.assur__card {
  list-style: none;
  margin: -10px 0 0;
  padding: 33px 13px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: 0 18px 44px -28px rgba(15, 42, 74, .45);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.assur__item {
  padding: 0 20px;
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
}

.assur__item + .assur__item { border-left: 1px solid var(--color-border); }

.assur__icon {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--color-sky-tint);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.assur__icon svg { width: 20px; height: 20px; }
.assur__t { font-size: 14px; font-weight: var(--fw-bold); color: var(--color-navy); }
.assur__d { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }

/* =============================================================
   SECTIONS
   ============================================================= */

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.eyebrow--on-navy { color: var(--color-on-navy-accent); }

.sec__head { max-width: 640px; margin-inline: auto; text-align: center; }
.sec__head h2 { margin-top: 12px; font-size: 42px; line-height: 1.1; letter-spacing: -0.025em; }
.sec__lead { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }

/* --- Quatre univers ---------------------------------------------- */

.univ { background: var(--color-white); padding-block: 96px; }
.univ__grid { margin-top: 49px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.ucard {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px -30px rgba(15, 42, 74, .5);
  transition: box-shadow var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}

.ucard:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -26px rgba(15, 42, 74, .45); }

.ucard__media { display: block; }
.ucard__media img { width: 100%; aspect-ratio: 302 / 210; object-fit: cover; display: block; }

.ucard__body { position: relative; padding: 0 22px 34px; flex: 1; }

.ucard__pill {
  position: absolute;
  top: -26px;
  left: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px var(--color-white);
}

.ucard__pill svg { width: 24px; height: 24px; }
.ucard__pill--a { background: var(--color-accent-tint); color: var(--color-teal); }
.ucard__pill--b { background: #ECE9FB; color: #6B5BD6; }
.ucard__pill--c { background: #FDEBDC; color: #D96F1F; }
.ucard__pill--d { background: var(--color-sky-light); color: #2F7FD1; }

.ucard__body h3 { padding-top: 46px; font-size: 21px; letter-spacing: -0.01em; }
.ucard__body p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }

/* --- Partenaires -------------------------------------------------- */

.part { padding-block: 40px 0; background: var(--color-white); }

.part__in {
  display: grid;
  grid-template-columns: 420px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  align-items: start;
  padding-block: 40px 60px;
}

.part__text { grid-area: 1 / 1; }
.part__cta  { grid-area: 2 / 1; align-self: start; }
.part__grid { grid-area: 1 / 2 / span 2 / 2; }

.part__text h2 { margin-top: 12px; font-size: 42px; line-height: 1.12; letter-spacing: -0.025em; }
.part__cta { margin-top: 25px; height: 52px; padding: 0 24px; border-radius: 999px; font-size: 15px; width: fit-content; }

.part__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }

.bcard {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  padding: 31px 29px 41px;
  box-shadow: 0 16px 40px -32px rgba(15, 42, 74, .5);
}

.bcard__icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--color-sky-tint);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bcard__icon svg { width: 22px; height: 22px; }
.bcard h3 { margin-top: 14px; font-size: 20px; }
.bcard p { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--color-text-muted); }

/* --- Ecosysteme --------------------------------------------------- */

.eco { padding-block: 48px; background: var(--color-white); }

.eco__panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: var(--color-navy);
  color: var(--color-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
}

.eco__text { padding: 63px 60px; align-self: center; position: relative; z-index: 2; }
.eco__text h2 { margin-top: 14px; font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; color: var(--color-white); max-width: 520px; }
.eco__text p { margin-top: 16px; max-width: 480px; font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, .82); }

.eco__chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.eco__chips li {
  display: inline-flex;
  align-items: center;
  /* Les libelles valides (« Editeur identifie », « Modalites etudiees »,
     « Univers reunis ») sont plus longs que ceux de la maquette. Le
     remplissage est resserre de 16 a 13 px pour conserver la RANGEE UNIQUE
     prevue par le design : c'est la structure qui prime, pas le padding. */
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: 14px;
  font-weight: var(--fw-semibold);
}

.eco__chips svg { width: 16px; height: 16px; color: var(--color-on-navy-accent); }

.eco__media { position: relative; }
.eco__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.eco__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-navy) 0%, rgba(15, 42, 74, .55) 35%, rgba(15, 42, 74, 0) 70%);
}

/* --- CTA final ----------------------------------------------------- */

.final { padding-block: 48px; background: var(--color-white); }

.final__panel {
  border-radius: 30px;
  padding: 73px 65px;
  background:
    radial-gradient(90% 160% at 0% 0%, #E7F2FB 0%, transparent 60%),
    linear-gradient(135deg, #EFF6FC 0%, #F6FAFD 100%);
  border: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.final__panel h2 { font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; }
.final__panel p { margin-top: 14px; max-width: 640px; font-size: 17px; line-height: 1.6; color: var(--color-text-muted); }
.final__panel .btn { height: 56px; padding: 0 26px; border-radius: 999px; font-size: 16px; }

/* =============================================================
   PIED DE PAGE
   ============================================================= */

.ftr { background: var(--color-navy); color: var(--color-white); }

.ftr__top {
  padding-block: 40px 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.ftr__brand .brand { justify-self: start; gap: 10px; }

/* Le pictogramme est deja un carre bleu nuit opaque : la plaque blanche
   ajoutait un lisere parasite. La reference se contente d'un filet blanc
   a 15 %, qui le detache du fond sans le cerner. */
.ftr__brand .brand__mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
}

/* Le mot-symbole etait servi en image. Cette image n'a AUCUNE transparence :
   son fond clair etait invisible sur l'en-tete blanc, mais formait un
   rectangle blanc sur le pied de page bleu nuit. La reference n'utilise pas
   d'image ici : elle compose le mot en texte vivant, « Win » en blanc et
   « cash » en turquoise clair — net a toute densite, et lisible sur navy. */
.ftr__word {
  font-weight: var(--fw-extrabold);
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-white);
}

.ftr__word span { color: #2ED3C6; }

.ftr__brand p {
  margin-top: 12px;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

.ftr__col { display: flex; flex-direction: column; }

/* Reserves a la composition mobile de la reference. */
.ftr__editor,
.ftr__mini { display: none; }

.ftr__t {
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-on-navy-accent);
  margin-bottom: 10px;
}

.ftr__col a {
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  /* WCAG 2.2 AA 2.5.8 — ces liens forment une navigation, pas une phrase. */
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}

.ftr__col a:hover { color: var(--color-white); text-decoration: underline; }

.ftr__bottom {
  margin-top: 20px;
  padding-block: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.ftr :focus-visible { outline-color: var(--color-sky); }

/* =============================================================
   TABLETTE — interpolation entre les deux references
   ============================================================= */

@media (max-width: 1279px) {
  .wrap, .hdr__in { width: min(100% - 64px, 1280px); }
  .hero__in { grid-template-columns: 1fr; min-height: 0; padding-block: 26px 0; }
  .hero__visual { height: 620px; margin-top: 24px; }
  .lap { left: 0; top: 40px; width: min(680px, 100%); }
  .phn { left: auto; right: 0; top: 150px; width: 200px; }
  .hero__appicon { left: 0; top: 470px; width: 92px; height: 92px; border-radius: 24px; }
  .hero__appicon img { border-radius: 24px; }
  .hero__chip--gift { left: auto; right: 150px; top: 0; }
  .hero__chip--cash { left: auto; right: 20px; top: 60px; }
  .hero h1 { font-size: 46px; }
  .univ__grid { grid-template-columns: 1fr 1fr; }
  .univ { padding-block: 72px; }
  .univ__grid { margin-top: 56px; }
  .part__in { grid-template-columns: 1fr; gap: 36px; }
  .eco__panel { grid-template-columns: 1fr; }
  .eco__text { padding: 40px 36px; }
  .eco__media { min-height: 260px; }
  .eco__fade { background: linear-gradient(180deg, var(--color-navy) 0%, rgba(15, 42, 74, .3) 45%, rgba(15, 42, 74, 0) 100%); }
  .final__panel { grid-template-columns: 1fr; padding: 48px 40px; }
  .ftr__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1023px) {
  .navpill,
  .hdr__cta { display: none; }
  .burger { display: inline-flex; }
  .hdr__in { grid-template-columns: 1fr auto; height: 64px; }

  /* Menu deplie. assets/js/main.js bascule l'attribut `hidden` sur
     #nav-principal : la regle [hidden] doit donc rester prioritaire. */
  .navpill {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 20px 20px;
    border-radius: 0;
    background: var(--color-white);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 22px 40px -26px rgba(15, 42, 74, .5);
  }

  .navpill[hidden] { display: none; }
  .navpill__link { padding: 14px 12px; border-radius: 12px; font-size: 16px; }
  .navpill__link.is-active { box-shadow: none; background: var(--color-bg-soft); }
  .navpill__cta { display: inline-flex; justify-content: center; margin-top: 8px; }
  .hdr__in { position: relative; }

  .assur__card { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .assur__item + .assur__item { border-left: 0; }
  .assur__item:nth-child(n+3) { padding-top: 4px; }
}

/* =============================================================
   MOBILE — reference home-final-mobile.html (390)
   ============================================================= */

@media (max-width: 639px) {
  .wrap, .hdr__in { width: min(100% - 40px, 1280px); }
  .hdr__in { height: 64px; }
  .brand__mark { width: 34px; height: 34px; border-radius: 9px; }
  .brand__word { height: 20px; }

  .hero { }
  .hero__in { padding-block: 36px 0; }
  /* Le decalage est porte par le conteneur : pas de double marge. */
  .hero__text { margin-top: 0; }
  .hero h1 { font-size: 34px; line-height: 1.12; letter-spacing: -0.035em; margin-top: 0; text-wrap: pretty; }
  .hero__lead { margin-top: 16px; font-size: 16px; max-width: none; }
  .tagpill { display: none; }
  /* La reference mobile place la mention d'edition AVANT les boutons ;
     la reference desktop la place apres. Un seul balisage, deux ordres. */
  .hero h1 { order: 1; }
  .hero__lead { order: 2; }
  .hero__editor { order: 3; margin-top: 16px; }
  .hero__actions { order: 4; }
  .hero__visual { order: 5; }
  .hero__actions { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__actions .btn { width: 100%; height: 52px; border-radius: 14px; justify-content: center; }
  .hero .signature { display: none; }

  .hero__visual { height: 340px; margin-top: 36px; }
  .lap { display: none; }
  .phn {
    left: auto;
    right: -18px;
    top: 18px;
    width: 232px;
  }
  .hero__appicon { left: 8px; top: 150px; width: 72px; height: 72px; border-radius: 20px; }
  .hero__appicon img { border-radius: 20px; }
  .hero__chip--gift { display: none; }
  /* La pastille flottait dans le vide a gauche du telephone, a hauteur de
     son encoche. Ancree sur le bord DROIT du visuel — comme le telephone
     lui-meme —, elle garde la meme position relative a 375, 390 et 430 px :
     elle chevauche le seul biseau gauche, sans mordre sur l'ecran, et
     descend au niveau du titre. Taille, couleur, rayon et ombre inchanges. */
  .hero__chip--cash { left: auto; right: 196px; top: 84px; width: 64px; height: 64px; border-radius: 18px; }

  .assur { padding-block: 8px 36px; }
  .assur__card {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: 1fr 1fr;
    gap: 17px 16px;
  }
  .assur__item { padding: 0; grid-template-columns: 1fr; row-gap: 8px; }
  .assur__item + .assur__item { border-left: 0; }
  .assur__item:nth-child(n+3) { padding-top: 0; }
  .assur__icon { grid-row: auto; }
  .assur__d { font-size: 13px; }

  .sec__head { text-align: left; }
  .sec__head h2 { font-size: 28px; }
  .sec__lead { font-size: 15px; }

  .univ { padding-block: 48px; }
  .univ__grid { margin-top: 23px; grid-template-columns: 1fr; gap: 16px; }
  .ucard { flex-direction: row; align-items: stretch; border-radius: 20px; }
  .ucard__media { width: 120px; flex-shrink: 0; }
  .ucard__media img { height: 100%; aspect-ratio: auto; }
  .ucard__body { padding: 16px 18px 16px 16px; }
  .ucard__pill { position: static; width: 34px; height: 34px; border-radius: 11px; box-shadow: none; }
  .ucard__pill svg { width: 18px; height: 18px; }
  .ucard__body h3 { padding-top: 8px; font-size: 17px; }
  .ucard__body p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }

  .part__in { padding-block: 16px 36px; gap: 18px; }
  .part__text h2 { font-size: 27px; }
  .part__grid { grid-template-columns: 1fr; gap: 12px; }
  .bcard { padding: 18px; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 6px; border-radius: 18px; }
  .bcard__icon { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 14px; }
  .bcard h3 { margin-top: 0; font-size: 16px; align-self: center; }
  .bcard p { margin-top: 0; font-size: 14px; }
  /* La reference mobile place le CTA APRES les quatre cartes. */
  .part__in { display: flex; flex-direction: column; }
  .part__text { order: 1; }
  .part__grid { order: 2; }
  .part__cta { order: 3; margin-top: 4px; width: 100%; justify-content: center; border-radius: 14px; background: transparent; color: var(--color-navy); border: 1px solid var(--color-border-strong); box-shadow: none; }
  .part__cta:hover { background: var(--color-bg-soft); color: var(--color-navy); }

  .eco { padding-block: 0 48px; }
  .eco__panel { border-radius: 22px; min-height: 0; }
  .eco__media { order: -1; min-height: 170px; }
  .eco__text { padding: 8px 22px 28px; }
  .eco__text h2 { font-size: 26px; margin-top: 10px; }
  .eco__text p { font-size: 15px; line-height: 1.55; margin-top: 12px; }
  /* La reference mobile ne met PAS de pastilles : les trois elements sont
     de simples paires pictogramme + libelle, sur deux rangees. */
  .eco__chips { margin-top: 16px; gap: 10px 18px; }
  .eco__chips li {
    font-size: 14px;
    line-height: 1.28;
    min-height: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    gap: 8px;
  }
  .eco__chips svg { width: 18px; height: 18px; }

  .final { padding-block: 0 40px; }
  .final__panel { padding: 26px 22px; border-radius: 22px; gap: 18px; }
  .final__panel h2 { font-size: 26px; }
  .final__panel p { font-size: 15px; }
  .final__panel .btn { width: 100%; justify-content: center; border-radius: 14px; }

  /* Pied de page mobile : la reference tient en 151 px — la marque et la
     mention d'edition sur une ligne, puis trois liens essentiels. Les
     colonnes de la version ordinateur sont masquees, pas dupliquees. */
  .ftr__top {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 16px;
    padding-block: 26px 0;
  }

  .ftr__brand p,
  .ftr__col,
  .ftr__bottom { display: none; }

  .ftr__editor {
    display: block;
    justify-self: end;
    text-align: right;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .72);
  }

  .ftr__mini {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding-block: 20px 26px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .ftr__mini a {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
  }

  .ftr__mini a:hover { color: var(--color-white); text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) {
  .ucard { transition: none; }
  .ucard:hover { transform: none; }
}