/* ==========================================================================
   16 · Bleu Poste — direction postale assumée, loin de la 00
   Marine #0f1f4b dominant · jaune poste #ffcd00 · papier crème #f4efe4 · rouge tampon #d8342c
   DM Serif Display (titres) + Space Grotesk (texte) + Space Mono (étiquettes, numéros).
   Timbres dentelés (mask CSS), tampons ronds (SVG inline), liserés « par avion » (dégradés).
   Même structure et mêmes textes que la 00.
   Contrastes : crème/marine 14:1 · jaune/marine 10,6:1 · #c9d1e6/marine 10:1 · rouge foncé #b8261f/crème 5,4:1.
   ========================================================================== */

:root {
  --navy: #0f1f4b;
  --navy-2: #18306b;
  --navy-3: #0a1636;
  --yellow: #ffcd00;
  --yellow-pale: #fff4c2;
  --cream: #f4efe4;
  --red: #d8342c;
  --red-dark: #b8261f;
  --blue-air: #1f4fa8;

  --c-green: var(--navy);           /* bordures « sélection », points actifs */
  --c-green-dark: var(--red-dark);  /* texte accent sur crème */
  --c-green-pale: var(--yellow-pale);
  --c-green-hector: #fffbea;
  --c-green-soft: #8fa0c8;
  --c-green-star: var(--yellow);
  --c-green-tint-12: rgba(216, 52, 44, .12);

  --c-cream: var(--cream);
  --c-cream-2: #ebe4d4;
  --c-paper: var(--yellow);
  --c-border: rgba(15, 31, 75, .16);
  --c-border-soft: rgba(15, 31, 75, .1);
  --c-border-card: rgba(15, 31, 75, .18);
  --c-border-faq: rgba(15, 31, 75, .16);
  --c-grey: #56607d;
  --c-slate: #3a4566;
  --c-ink: var(--navy);
  --c-ink-2: var(--navy);
  --c-ink-logo: #fff;
  --c-night: var(--navy);
  --c-muted: #7a8299;
  --c-footer: var(--navy-3);

  --font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --font-footer: var(--font-sans);

  /* Rayons : postal = presque droit */
  --r-8: 3px; --r-10: 4px; --r-12: 4px; --r-14: 6px; --r-16: 6px; --r-18: 6px; --r-20: 6px; --r-24: 8px; --r-25: 0px;
  --btn-radius: 4px;
  --btn-font: 700 16px/1.125 var(--font-sans);
  --btn-primary-bg: var(--yellow);
  --btn-primary-fg: var(--navy);

  --sh-card: 0 10px 24px rgba(15, 31, 75, .1);
  --sh-button-hover: 4px 4px 0 var(--navy-3);
  --sh-hector-col: 0 24px 60px rgba(15, 31, 75, .3);
  --sh-chip: none;
  --sh-phone: 0 28px 40px rgba(15, 31, 75, .22);
  --sh-input: 6px 6px 0 var(--navy);
  --sh-step-dot: 0 0 0 4px rgba(216, 52, 44, .2);
  --g-steps-rail: repeating-linear-gradient(90deg, var(--red) 0 18px, transparent 18px 26px, var(--blue-air) 26px 44px, transparent 44px 52px);

  --airmail: repeating-linear-gradient(-45deg, var(--red) 0 14px, #fff 14px 21px, var(--blue-air) 21px 35px, #fff 35px 42px);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .12 0 0 0 0 .3 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --guilloche: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 9px), repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 9px);
  /* Dentelure de timbre : trous ronds sur les bords + rectangle plein au centre */
  --perf: radial-gradient(circle at 50% 50%, transparent 4.5px, #000 5px) -8px -8px / 16px 16px round, linear-gradient(#000 0 0) 8px 8px / calc(100% - 16px) calc(100% - 16px) no-repeat;
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23ffcd00'/%3E%3Cpath d='M6.5 13.6l4.3 4.6L19.5 8' fill='none' stroke='%230f1f4b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='none' stroke='%23d8342c' stroke-width='1.6' stroke-dasharray='3 2.4'/%3E%3Cpath d='M10.5 10.5l9 9m0-9l-9 9' stroke='%23b8261f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17.1l-6.1 3.5 1.5-6.8L2.2 9.2l6.9-.7z' fill='%23ffcd00' stroke='%230f1f4b' stroke-width='1'/%3E%3C/svg%3E");
  --ico-stars5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cg fill='%23ffcd00'%3E%3Cpath id='s' d='M11 1.5l2.7 5.8 6.3.7-4.8 4.2 1.4 6.3L11 15.3l-5.6 3.2 1.4-6.3L2 8l6.3-.7z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/g%3E%3C/svg%3E");
  --ico-stars5-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22'%3E%3Cg fill='%23d8342c'%3E%3Cpath id='s' d='M11 1.5l2.7 5.8 6.3.7-4.8 4.2 1.4 6.3L11 15.3l-5.6 3.2 1.4-6.3L2 8l6.3-.7z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/g%3E%3C/svg%3E");
}

body { background: var(--cream) var(--grain); color: var(--navy); }
::selection { background: var(--yellow); color: var(--navy); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 6px var(--navy); }

/* ---------- Typo ---------- */
.h2, .hero__title, .photos__title, .durer__title, .oubli__title, .tv__title, .detail__name, .proof__title,
.compare__title, .loin__title, .faq__title, .final__title, .bento__card h3, .ctable__colhead b, .logo, .step__title,
.proof__rating strong, .modal__body cite, .offer__name {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em;
}
.h2, .photos__title, .oubli__title, .tv__title, .proof__title, .compare__title, .loin__title, .final__title, .durer__title { line-height: 1.06; }
.accent, .compare__title .accent { color: var(--red-dark); font-style: italic; }
.accent-bright { color: var(--red-dark); font-style: italic; }
.light { font-weight: 400; }
.lead, .lead--grey { color: var(--c-slate); }
.step__num, .tag, .offer__badge, .bento__tag, .hero__made, .live, .selector__label, .detail__from, .tcard__dur, .footer h4, .vbar__num { font-family: var(--font-mono); }

/* Mot-étiquette en Space Mono, capitales */
.mono-label { font: 700 12px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Boutons : jaune poste, ombre « tampon » ---------- */
.btn { text-transform: none; letter-spacing: .2px; }
.btn--primary { background: var(--yellow); color: var(--navy); }
.btn--primary:hover { box-shadow: 4px 4px 0 var(--navy-3); }

/* ---------- Sections marine : on redéfinit les variables localement ---------- */
.site-header, .hero, .photos, .tv, .proof, .loin, .footer {
  --c-ink: #fff; --c-ink-2: #fff; --c-night: #fff; --c-slate: #c9d1e6; --c-grey: #aab4d0;
  --c-border-card: rgba(255, 255, 255, .25); --c-border-soft: rgba(255, 255, 255, .14);
  background-color: var(--navy); color: #fff;
}
.photos, .tv, .proof, .loin { background-image: var(--guilloche); }
.photos .accent, .loin .accent, .tv .accent { color: var(--yellow); }
/* Cartes papier posées sur le marine : on revient à l'encre marine */
.tcard, .review, .bubble__msg, .modal {
  --c-ink: var(--navy); --c-ink-2: var(--navy); --c-slate: #3a4566; --c-grey: #56607d; color: var(--navy);
}

/* ---------- Liserés « par avion » ---------- */
.site-header::after, .hero::after, .final::before, .footer::before {
  content: ""; display: block; height: 8px; background: var(--airmail);
}
.footer::before { margin: -46px 0 46px; }

/* ---------- Header ---------- */
.site-header { position: sticky; backdrop-filter: none; }
.site-header__inner { padding-inline: 48px; }
.logo img { display: none; }
.logo { font-size: 30px; color: #fff; letter-spacing: 0; }
.logo b { color: var(--yellow); }
.nav { font-size: 15px; color: #dfe4f2; }
.nav a:hover { color: var(--yellow); }
.burger span, .burger span::before, .burger span::after { background: #fff; }
.mnav a { color: #fff; border-bottom-color: rgba(255, 255, 255, .14); }

/* ---------- Hero : marine, la photo devient un timbre ---------- */
.hero { padding: 0; background-image: var(--guilloche); }
.hero__box { min-height: 0; border-radius: 0; max-width: 1280px; margin: 0 auto; padding: 72px 56px 96px; gap: 72px; grid-template-columns: 1.15fr 1fr; overflow: visible; }
.hero__box::before { display: none; }
.hero__kicker { display: flex; gap: 10px; margin-bottom: 22px; }
.hero__kicker span { font: 700 11px/1 var(--font-mono); letter-spacing: 2.5px; text-transform: uppercase; color: var(--navy); background: var(--yellow); padding: 7px 10px; }
.hero__kicker span + span { background: transparent; color: var(--yellow); border: 1.5px solid var(--yellow); }
.hero__badge { background: transparent; border: 0; padding: 0; backdrop-filter: none; border-radius: 0; font: 500 14px/1.3 var(--font-mono); color: #dfe4f2; margin-bottom: 26px; }
.hero__badge img { content: var(--ico-stars5); width: 96px; height: 18px; }
.hero__title { font-family: var(--font-display); font-size: clamp(44px, 1.6rem + 4vw, 86px); line-height: 1; letter-spacing: -.015em; font-weight: 400; max-width: 660px; color: #fff; }
.hero__title em { color: var(--yellow); font-style: italic; }
.hero__lead { margin-top: 28px; font-size: 18px; line-height: 28px; color: #dfe4f2; max-width: 540px; }
.hero__chips { margin-top: 26px; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.chip { background: transparent; color: #fff; border: 1.5px dashed rgba(255, 255, 255, .45); border-radius: 4px; box-shadow: none; font-size: 14px; padding: 8px 12px; }
.hero__cta { display: inline-flex; margin-top: 34px; padding-inline: 30px; min-height: 56px; font-size: 18px; }
.hero__card { width: min(470px, 100%); aspect-ratio: auto; transform: rotate(4deg); filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .35)); }
.hero__stamp { background: var(--cream); padding: 22px; -webkit-mask: var(--perf); mask: var(--perf); }
.hero__stamp img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; box-shadow: none; }
.hero__postmark { position: absolute; left: -96px; bottom: 40px; width: 230px; color: var(--red); transform: rotate(-14deg); opacity: .92; mix-blend-mode: normal; filter: none; }
.hero__made { right: -22px; top: 36px; bottom: auto; border-radius: 0; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 12px; box-shadow: 3px 3px 0 var(--navy-3); transform: rotate(-4deg); }

/* ---------- Comment ça marche : timbres dentelés ---------- */
.steps__rail { color: var(--c-grey); font-family: var(--font-mono); font-style: normal; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; }
.steps__rail::after { height: 4px; }
.steps__rail span:last-child::before { background: var(--red); }
.step { background: transparent; padding: 0; filter: drop-shadow(0 12px 18px rgba(15, 31, 75, .14)); }
.step::before { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--perf); mask: var(--perf); z-index: -1; }
.step { isolation: isolate; padding: 30px 28px 28px; }
.step__num { font-size: 13px; letter-spacing: 2px; color: var(--red-dark); font-weight: 700; }
.step__num::before { content: "N° "; }
.step__title { font-size: 26px; line-height: 30px; font-weight: 400; margin-top: 10px; }
.step__media { border-radius: 0; outline: 1px solid rgba(15, 31, 75, .12); outline-offset: 4px; }
/* stickers verts → jaune poste (trait marine conservé en brun foncé) */
.step__sticker, .norisk img { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(8deg) brightness(1.08) drop-shadow(0 8px 6px rgba(15, 31, 75, .2)); }
.proof__mascot { filter: grayscale(1) sepia(1) saturate(5) hue-rotate(8deg) brightness(1.1); }

/* ---------- 4000 photos : marine ---------- */
.photos { padding-top: 80px; }
.photos__title { font-size: 56px; color: #fff; }
.photos__text p { color: #c9d1e6; }
.bubble__msg { color: #111b21; }

/* ---------- Pensé pour durer : bloc jaune poste ---------- */
.durer { background: var(--yellow); padding: 88px 0; }
.durer__fig { position: relative; background: #fff; padding: 14px; -webkit-mask: var(--perf); mask: var(--perf); }
.durer__fig-wrap { filter: drop-shadow(0 18px 30px rgba(15, 31, 75, .25)); }
.durer__fig img { display: block; }
.durer__tint { position: absolute; background: var(--red); mix-blend-mode: color; pointer-events: none; }
.durer__pic { position: relative; isolation: isolate; }
/* zones mesurées sur l'image 1376×768 : flèches vertes → rouge tampon (mix-blend color : le blanc reste blanc, le noir reste noir) */
.durer__tint--l { left: 0; top: 0; bottom: 0; width: 20%; }
.durer__tint--r { right: 0; top: 0; bottom: 0; left: 71.2%; }
.durer__tint--m { left: 69.4%; width: 2%; top: 40%; height: 9%; }
.durer__tint--b { left: 69.8%; width: 2%; top: 76%; height: 9%; }
.durer__title { font-size: 52px; line-height: 56px; color: var(--navy); }
.durer__title .light { color: var(--red-dark); font-style: italic; }
.durer__text { color: #24305a; }
.durer .btn--primary { background: var(--navy); color: #fff; }
.durer .btn--primary:hover { box-shadow: 4px 4px 0 var(--red); }

/* ---------- Oubli ---------- */
.oubli__title { font-size: 64px; line-height: 64px; }
.oubli__text { color: var(--c-slate); }
.phone { border: 10px solid var(--navy); }

/* ---------- Témoignages : marine ---------- */
.tv__title { font-size: 52px; line-height: 1.05; }
.arrows button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); border-radius: 4px; }
.arrows button:hover { border-color: var(--yellow); color: var(--yellow); }
.rail { align-items: start; }
.tcard { background: var(--cream); border: 0; border-radius: 4px; }
.tcard__media img.ph { filter: saturate(.95); }
.tcard__quote { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 27px; }
.tcard__verified img { content: var(--ico-stars5-red); width: 76px; height: 14px; }
.tcard__play { background: var(--yellow); border-radius: 50%; }
.tcard__play::before { border-left-color: var(--navy); }
.tcard__dur { background: var(--navy); border-radius: 2px; }

/* ---------- Réserve ---------- */
.reserve { position: relative; }
.live { font-family: var(--font-mono); font-size: 13px; }
.live__dot { background: var(--red); animation-name: pulse16; }
@keyframes pulse16 { 50% { box-shadow: 0 0 0 5px rgba(216, 52, 44, .2); } }
.live__offer { background: var(--yellow); border-radius: 0; color: var(--navy); }
.gallery__thumbs button[aria-current="true"] { border-color: var(--red); }
.gallery__main { border-radius: 0; background: #fff; padding: 14px; -webkit-mask: var(--perf); mask: var(--perf); }
.offer { background: #fff; border-radius: 6px; border-color: rgba(15, 31, 75, .18); }
.offer:hover { border-color: var(--navy); }
.offer.is-selected { background: #fffbea; border-color: var(--navy); }
.offer.is-selected .offer__radio { background: var(--red); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1.5px var(--navy); }
.offer__badge { background: var(--yellow); color: var(--navy); border-radius: 0; letter-spacing: 1.2px; box-shadow: 2px 2px 0 var(--navy); }
.offer__count { color: var(--red-dark); }
.offer.is-selected .offer__price b { color: var(--navy); }
.offer__price b { font-family: var(--font-sans); font-weight: 700; }
.tag { border-radius: 2px; background: var(--yellow-pale); color: var(--red-dark); }
.tag--solid { background: var(--red); color: #fff; }
.detail__from { background: var(--yellow); color: var(--navy); border-radius: 0; box-shadow: 2px 2px 0 var(--navy); }
.detail__name { font-size: 46px; }
.detail__price b { font-family: var(--font-display); font-weight: 400; color: var(--navy); font-size: 48px; }
.checks li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--red); color: var(--red-dark); display: inline-grid; place-items: center; font-size: 11px; transform: translateY(4px); }
.detail .btn--primary { box-shadow: 4px 4px 0 var(--navy); }
.sticky-buy .btn--primary { box-shadow: 4px 4px 0 var(--navy); }
.norisk h3 { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }

/* ---------- Preuve sociale : marine, avis en timbres ---------- */
.proof { padding-top: 40px; }
.proof__photo img.team { border-radius: 0; outline: 10px solid var(--cream); }
.proof__rating strong { font-size: 40px; color: #fff; }
.proof__rating span { color: #c9d1e6; }
.proof__rating .stars img { content: var(--ico-star); }
.proof__title { font-size: 52px; color: #fff; margin-top: 120px; }
.proof__lead { color: #c9d1e6; }
.review { background: var(--cream); padding: 28px 26px; -webkit-mask: var(--perf); mask: var(--perf); }
.review p { font-family: var(--font-display); font-size: 17px; line-height: 25px; color: var(--navy); }
.review .stars img { content: var(--ico-star); }
.review cite { font-family: var(--font-mono); font-size: 12px; color: #56607d; }

/* ---------- Comparatif : la colonne Hector en marine ---------- */
.ctable__colhead img.lg { display: none; }
.ctable__col--hector { background: var(--navy); border: 0; border-radius: 6px; color: #fff; box-shadow: 8px 8px 0 var(--yellow); }
.ctable__col--hector li { color: #fff; }
.ctable__col--hector .ctable__colhead b { color: #fff; font-size: 34px; }
.ctable__col--hector .ctable__colhead b .accent-bright { color: var(--yellow); font-style: normal; }
.ctable__col--hector .ctable__colhead .tag { background: var(--yellow); color: var(--navy); }
.ctable__col--hector li img, .ctable__col--hector .ctable__ico { content: var(--ico-check); }
.ctable__col--others { background: transparent; border: 1.5px dashed rgba(15, 31, 75, .3); border-left: 0; border-radius: 0 6px 6px 0; }
.ctable__col--others .ctable__ico { content: var(--ico-cross); }
.ctable__labels b { font-weight: 700; }

/* ---------- Pour qui : marine ---------- */
.loin__title { font-size: 56px; color: #fff; }
.bento__card { border-radius: 4px; outline: 8px solid var(--cream); outline-offset: -1px; }
.bento__tag { background: var(--yellow); color: var(--navy); border-radius: 0; font-weight: 700; }
.bento__card h3 { font-weight: 400; }
.bento__quote { border-radius: 2px; }

/* ---------- FAQ ---------- */
.collage img { border-radius: 0; border: 8px solid #fff; }
.collage .c2, .collage .c3 { border: 0; padding: 8px; background: #fff; -webkit-mask: var(--perf); mask: var(--perf); box-shadow: none; }
.faq__title { font-size: 44px; }
.faq summary { font-weight: 600; }
.faq details[open] summary { color: var(--red-dark); }

/* ---------- CTA final : jaune, encadré façon enveloppe ---------- */
.final { background: var(--yellow); padding: 0; }
.final .container { padding: 110px 0 100px; }
.final__title { font-size: 64px; line-height: 1.04; color: var(--navy); letter-spacing: -.01em; }
.final__title .accent-bright { color: var(--red-dark); }
.final__lead { color: #24305a; }
.wa-input { border-radius: 4px; box-shadow: 6px 6px 0 var(--navy); border: 2px solid var(--navy); }
.wa-input span { color: #56607d; }
/* Le rond d'envoi reste vert WhatsApp : seul rappel de WhatsApp en dehors de la maquette iPhone. */

/* ---------- Footer ---------- */
.footer { background: var(--navy-3); }
.footer .logo { font-size: 34px; }
.footer__inner { border-top: 0; }
.footer h4 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--yellow); }
.footer__social a, .footer__lang { border-radius: 4px; }

/* ---------- Modal ---------- */
.modal { border-radius: 4px; background: var(--cream); }

/* ==========================================================================
   Tablette / mobile
   ========================================================================== */
@media (max-width: 1200px) {
  .hero__box { padding: 56px 32px 80px; gap: 48px; }
  .hero__postmark { left: -40px; }
}
@media (max-width: 960px) {
  .site-header__inner { padding-inline: 20px; }
  .hero__box { grid-template-columns: 1fr; }
  .hero__card { width: min(400px, 84%); }
}
@media (max-width: 600px) {
  .site-header__inner { padding-inline: 16px; }
  .logo { font-size: 26px; }
  .site-header .btn { padding: 9px 12px; }
  .hero__box { padding: 32px 20px 64px; gap: 44px; }
  .hero__kicker span { font-size: 10px; letter-spacing: 2px; padding: 6px 8px; }
  .hero__badge { font-size: 12px; }
  .hero__badge img { width: 74px; height: 14px; }
  .hero__title { font-size: 44px; line-height: 46px; }
  .hero__lead { font-size: 16px; line-height: 25px; margin-top: 18px; }
  .hero__chips .chip { font-size: 13px; padding: 7px 10px; border-radius: 4px; }
  .hero__cta { display: flex; width: 100%; margin-top: 26px; }
  .hero__card { width: 86%; }
  .hero__stamp { padding: 16px; }
  .hero__postmark { width: 140px; left: -8px; bottom: -34px; }
  .hero__made { right: -12px; top: 18px; font-size: 10px; }
  .step { padding: 28px 24px 24px; }
  .step__title { font-size: 24px; }
  .photos__title { font-size: 34px; line-height: 38px; }
  .durer { padding: 64px 0; }
  .durer__title { font-size: 38px; line-height: 42px; }
  .oubli__title { font-size: 44px; line-height: 46px; }
  .phone { border-width: 7px; }
  .tv__title { font-size: 36px; line-height: 40px; }
  .detail__name { font-size: 34px; }
  .proof__title { font-size: 34px; line-height: 38px; margin-top: 64px; }
  .proof__rating strong { font-size: 34px; }
  .review { padding: 24px 22px; }
  .compare__title { font-size: 34px; line-height: 38px; }
  .ctable__col--hector { box-shadow: 5px 5px 0 var(--yellow); }
  .ctable__col--hector .ctable__colhead b { font-size: 20px; }
  .ctable__col--others .ctable__colhead::before { color: var(--c-grey); }
  .loin__title { font-size: 36px; line-height: 40px; }
  .bento__card { outline-width: 6px; }
  .faq__title { font-size: 34px; }
  .final .container { padding: 76px 0 72px; }
  .final__title { font-size: 40px; line-height: 44px; }
  .footer .logo { font-size: 30px; }
}