/* ==========================================================================
   Eclore Webmarketing — feuille de style unique
   Ordre : 1. Tokens · 2. Base · 3. Layout · 4. En-tête · 5. Pied de page
           6. Composants · 7. Accueil · 8. Pages internes · 9. Contact
           10. Responsive
   ========================================================================== */

/* 0. POLICES ===============================================================
   Hébergées ici, plus chez Google. Trois raisons :
   — la feuille de style de Google bloquait l'affichage ; tant qu'elle
     n'était pas revenue, la page restait blanche ;
   — chaque visite envoyait l'adresse IP du visiteur à Google, ce qu'un
     bandeau de consentement ne couvre pas ;
   — une dépendance de moins.

   Les deux familles sont variables : un seul fichier couvre toute la plage
   de graisses. Deux sous-ensembles par famille — latin pour le français
   courant, latin-ext pour les caractères rares. Le navigateur ne télécharge
   le second que s'il en croise un.

   font-display: swap — le texte s'affiche immédiatement dans la police de
   secours, puis bascule. Jamais de page muette. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  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;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  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;
}

/* 1. TOKENS ================================================================ */

:root {
  /* Violet — couleur principale */
  --violet:            #7C3AED;
  --violet-dark:       #6D28D9;
  --violet-deep:       #2E1065;
  --violet-line:       #4C2A9A;

  /* Lavande — fonds et textes clairs sur violet */
  --lavender-bg:       #F4F0FC;
  --lavender-line:     #E4DCF7;
  --lavender-text:     #E4D9FF;
  --lavender-text-alt: #E2D5FF;
  --lavender-muted:    #CDBEF2;
  --lavender-muted-2:  #C9B8F0;

  /* Accents */
  --gold:              #FFC933;  /* accent dominant */
  --lime:              #D9FF8C;  /* accent secondaire, sur fond violet */

  /* Encre et gris */
  --ink:               #17160F;
  --ink-deep:          #0D0C08;
  --grey-700:          #4A4842;
  --grey-500:          #7C766A;
  --grey-on-dark:      #9E9A90;
  --grey-light-dark:   #C9C6BC;
  --cream-text:        #E7E4DC;
  --cream-bg:          #F4F2EE;
  --edge:              #EDEAE1;
  --white:             #FFFFFF;

  /* Typographies */
  --font-title: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Mesures */
  --container:   1360px;
  --gutter:      24px;
  --header-h:    114px;
  --radius-xl:   32px;
  --radius-lg:   24px;
  --radius-md:   20px;
  --radius-sm:   16px;
  --radius-pill: 999px;
  /* Angle de tous les boutons du site : .btn, le bouton d'appel de
     l'en-tête et le bouton de menu mobile. Une seule valeur à changer. */
  --radius-btn:  12px;

  --shadow-card: 0 26px 46px rgba(23, 22, 15, .42);
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, .35);
  --shadow-photo: 0 32px 60px rgba(23, 22, 15, .45);
}

/* 2. BASE ================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a {
  color: var(--violet);
  text-decoration: none;
  transition: color .15s ease;
}

a:hover { color: var(--violet-dark); }

/* Les images sont enrobées dans <picture> pour proposer une version WebP.
   « display: contents » efface cet enrobage de la mise en page : l'image
   redevient l'enfant direct de son conteneur, et toutes les règles écrites
   avant cet ajout continuent de s'appliquer telles quelles. */
picture { display: contents; }

img, video { max-width: 100%; }

img { height: auto; }

strong { font-weight: 700; }

/* Accessibilité — focus clavier visible sur toute la page */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 14px 22px;
  border-radius: 0 0 var(--radius-sm) 0;
  font: 700 15px var(--font-body);
}

.skip-link:focus {
  left: 0;
  color: var(--white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 3. LAYOUT ================================================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 56px 16px; }

.section--tight { padding: 44px 0; }

/* Panneau arrondi (violet, sombre, lavande…)
   --panel-x est publié pour que les cartes puissent annuler exactement la
   marge intérieure et venir toucher le bord droit du panneau. */
.panel {
  --panel-x: 46px;
  border-radius: var(--radius-xl);
  padding: 48px var(--panel-x);
  margin: 56px 0 44px;
}

.panel--violet { background: var(--violet); }
.panel--lavender { position: relative; overflow: hidden; background: var(--lavender-bg); box-shadow: var(--shadow-card); }
.panel--dark { position: relative; overflow: hidden; background: var(--ink-deep); }

/* Les animations d'entrée partent volontairement de la droite, hors cadre.
   Sans ce rognage, ces positions de départ élargissent la page et créent un
   défilement horizontal parasite sur mobile : tout paraît décentré et le
   héros ne touche plus le bord droit. On rogne donc ce qui sort de « main ».
   L'en-tête collant vit en dehors de « main » : il n'est pas concerné. */
main {
  overflow-x: clip;
}

/* 4. EN-TÊTE =============================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--white);
  border-bottom: 3px solid var(--ink);
}

.site-header__logo {
  display: flex;
  align-items: center;
  min-width: 0;
  flex-shrink: 0;
}

.site-header__logo img {
  height: 79px;
  width: 265px;
  object-fit: contain;
  display: block;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.site-nav ul {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.site-nav a {
  font: 700 12px var(--font-body);
  letter-spacing: .1em;
  color: var(--grey-700);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--ink); }

.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

.header-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-btn);
  background: var(--violet);
  flex-shrink: 0;
}

.header-phone:hover { background: var(--violet-dark); }
.header-phone svg { display: block; }

/* Bouton menu mobile */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle__bar { position: relative; }
.nav-toggle__bar::before,
.nav-toggle__bar::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

/* Retour en haut de page
   C'est un vrai lien vers l'ancre du haut : il fonctionne sans JavaScript.
   Le script ne fait que le masquer tant qu'on est près du haut. */
/* Ancre de tête : un repère sans dimension, posé avant l'en-tête collant.
   Le contour de mise au point n'a rien à cerner, on le retire. */
.anchor-top {
  display: block;
  height: 0;
  outline: none;
}

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: var(--white);
  box-shadow: 0 10px 26px rgba(23, 22, 15, .34);
  transition: opacity .25s ease, transform .25s ease, background .15s ease;
}

.to-top:hover {
  color: var(--white);
  background: var(--violet);
  transform: translateY(-3px);
}

.to-top svg { display: block; }

/* Masqué tant que le visiteur n'a pas descendu ; sans JavaScript la classe
   .has-js est absente et le bouton reste visible en permanence. */
.has-js .to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.has-js .to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 620px) {
  .to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* Bandeau de consentement aux cookies
   Exigences CNIL respectées : refuser est aussi simple qu'accepter (deux
   boutons de même niveau et de même poids visuel), aucune case pré-cochée,
   choix réversible à tout moment depuis le pied de page, et aucun traceur
   déposé avant décision. Masqué par défaut : c'est le script qui l'affiche
   s'il n'existe pas de choix valide, donc rien ne clignote au chargement. */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 3px solid var(--ink);
  box-shadow: 0 -14px 40px rgba(23, 22, 15, .18);
}

.consent.is-open { display: block; }

.consent__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 26px;
  flex-wrap: wrap;
}

.consent__text { flex: 1 1 420px; min-width: 0; }

.consent__title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 6px;
}

.consent__body {
  font: 400 15px/1.6 var(--font-body);
  color: var(--grey-700);
}

.consent__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* « Tout refuser » a exactement le même poids que « Tout accepter ». */
.consent .btn { height: 46px; padding: 0 22px; font-size: 15px; }

.consent__link {
  background: none;
  border: none;
  padding: 0;
  font: 600 15px var(--font-body);
  color: var(--violet);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__link:hover { color: var(--violet-dark); }

/* Panneau de réglage détaillé */
.consent__details {
  display: none;
  max-width: var(--container);
  margin: 20px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--lavender-line);
}

.consent.is-detailed .consent__details { display: block; }

.consent__choice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--edge);
}

.consent__choice:last-of-type { border-bottom: none; }

.consent__choice input { margin: 3px 0 0; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--violet); }

.consent__choice label { font: 700 15px var(--font-body); color: var(--ink); cursor: pointer; }

.consent__choice p { font: 400 14px/1.55 var(--font-body); color: var(--grey-700); margin-top: 3px; }

.consent__locked {
  font: 600 13px var(--font-body);
  color: var(--grey-500);
  flex-shrink: 0;
  padding-top: 2px;
}

.consent__save { margin-top: 16px; }

.consent__label-fixe { font: 700 15px var(--font-body); color: var(--ink); }

/* Le lien de gestion inséré dans le texte des mentions légales garde la
   ligne de base du paragraphe qui l'entoure. */
.legal .consent__link { font-size: inherit; font-weight: 600; }

@media (max-width: 760px) {
  .consent { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 82vh; overflow-y: auto; }
  .consent__inner { gap: 16px; }
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1 1 auto; }
}

/* 5. PIED DE PAGE ========================================================== */

.site-footer {
  padding: 26px 0;
  border-top: 1px solid var(--lavender-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font: 500 14px var(--font-body);
  color: var(--grey-700);
}

.site-footer__brand img { height: 60px; width: 60px; }

.site-footer__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  font: 600 14px var(--font-body);
  color: var(--grey-700);
}

.site-footer__links a:hover,
.site-footer__links a[aria-current="page"] { color: var(--violet); }

.site-footer__phone {
  font: 700 14px var(--font-body);
  color: var(--violet);
}

/* 6. COMPOSANTS ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border: none;
  border-radius: var(--radius-btn);
  font: 700 15px var(--font-body);
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, filter .15s ease;
}

.btn:hover { filter: brightness(.94); }
.btn:active { transform: translateY(1px); }

.btn--lg { height: 52px; padding: 0 28px; font-size: 17px; }

/* Appel à l'action principal d'une section : posé sur un fond chargé, il a
   besoin de taille et de relief pour se détacher. */
.btn--xl {
  height: 62px;
  padding: 0 38px;
  font-size: 18px;
  box-shadow: 0 18px 36px rgba(23, 22, 15, .36);
}

.btn--xl:hover { transform: translateY(-2px); }
.btn--xl:active { transform: translateY(0); }

.btn__arrow {
  display: inline-block;
  margin-left: 10px;
  transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}

.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--gold  { background: var(--gold); color: var(--ink); }
.btn--gold:hover { color: var(--ink); }
.btn--lime  { background: var(--lime); color: var(--ink); }
.btn--lime:hover { color: var(--ink); }
.btn--dark  { background: var(--ink); color: var(--white); }
.btn--dark:hover { color: var(--white); }
.btn--violet { background: var(--violet); color: var(--white); }
.btn--violet:hover { color: var(--white); }

.btn--hero { box-shadow: var(--shadow-card); font-size: 16px; }

.pill {
  display: inline-block;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  font: 700 16px var(--font-body);
}

.pill--dark-glass { background: rgba(255, 255, 255, .12); color: var(--gold); }
.pill--cream { background: var(--cream-bg); color: var(--ink); font-size: 14px; padding: 8px 18px; }
.pill--gold { background: var(--gold); color: var(--ink); font: 800 12px var(--font-body); letter-spacing: .1em; padding: 6px 14px; }

.eyebrow {
  font: 800 12px var(--font-body);
  letter-spacing: .16em;
  color: var(--violet);
  text-transform: uppercase;
}

.eyebrow--tight { letter-spacing: .12em; font-size: 11px; }
.eyebrow--gold { color: var(--gold); }
.eyebrow--lime { color: var(--lime); }
.eyebrow--violet-dark { color: var(--violet-dark); }

/* Texte tapé au clavier — voir assets/js/main.js
   Les caractères pas encore saisis gardent leur place, simplement
   invisibles : aucun décalage de mise en page. */
.has-js [data-typewriter].is-typing .char { opacity: 0; }

/* Ligne grossie pendant sa frappe, qui revient à sa taille une fois finie.
   C'est une mise à l'échelle, pas un changement de taille de police : la
   ligne n'occupe donc jamais plus de place et rien ne bouge autour. */
.has-js [data-type-line][data-type-zoom] {
  display: block;
  transform-origin: center center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.has-js [data-type-line].is-typing-line {
  transform: scale(var(--type-zoom, 1));
}

.type-caret {
  display: inline-block;
  width: .07em;
  min-width: 2px;
  height: .88em;
  margin-left: .03em;
  vertical-align: -.06em;
  background: var(--violet);
  animation: caret-blink 1.05s steps(1) infinite;
}

.hero__title .type-caret { background: var(--gold); }

@keyframes caret-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .type-caret { animation: none; opacity: 1; }
}

/* Apparition au défilement
   L'état masqué n'est appliqué que si le JS tourne (classe .has-js posée par
   main.js) : sans JavaScript, le contenu reste visible. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Glissement léger : pour les lignes d'une liste, un déplacement
   horizontal discret vaut mieux qu'une frappe, qui retarderait la
   lecture de douze intitulés. */
.has-js [data-reveal="slide"] {
  transform: translateX(22px);
  transition-duration: .5s;
}

.has-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Liste à coches */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li { display: flex; gap: 10px; }

.check-list__mark { font-weight: 700; flex-shrink: 0; }

.check-list__title { font: 500 16px/1.4 var(--font-body); }
.check-list__note { font: 400 14px/1.4 var(--font-body); margin-top: 2px; }

/* 7. ACCUEIL =============================================================== */

/* --- Héros pleine image --- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink-deep);
  padding: 64px 24px 76px;
}

.hero__media { position: absolute; inset: 0; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Voile sombre : garantit le contraste du texte blanc quelle que soit
   la photo placée derrière. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(124, 58, 237, .22) 0%, rgba(13, 12, 8, 0) 60%),
    linear-gradient(180deg, rgba(13, 12, 8, .74) 0%, rgba(13, 12, 8, .80) 45%, rgba(13, 12, 8, .93) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 940px;
  text-align: center;
}

.hero__title {
  margin: 0 0 26px;
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 62px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}

.hero__line { display: block; }

.hero__line--gold { color: var(--gold); }

.hero__lede {
  margin: 0 auto 30px;
  font: 400 19px/1.6 var(--font-body);
  color: var(--lavender-text);
  max-width: 560px;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 1;
  font: 600 12px var(--font-body);
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .62);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero__scroll::after {
  content: "";
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  animation: scroll-hint 1.9s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%, 100% { transform: scaleY(.5); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

/* --- Intro + arguments --- */
.intro { padding: 72px 16px 0; text-align: center; }

.intro__lead {
  margin: 0 auto 56px;
  max-width: 680px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.45;
  color: var(--ink);
}

.intro__lead em { font-style: normal; color: var(--violet); }

.intro__mark,
.highlight {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--lavender-bg);
  /* Le surlignage garde ses coins arrondis même quand la phrase passe à
     la ligne, au lieu d'être tranché net au retour. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.arguments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  text-align: left;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.arguments li { display: flex; gap: 12px; }

.arguments__mark { color: var(--violet); font-weight: 700; font-size: 18px; flex-shrink: 0; }

/* Le titre et son explication formaient un seul paragraphe, la partie
   grasse servant d'amorce. La frappe se jouant sur cette amorce,
   l'explication attendait derrière un vide qui se résorbait lettre après
   lettre. Chacun sa ligne, à toutes les largeurs. */
.arguments h3 {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
}

.arguments p { display: block; color: var(--grey-700); }

/* --- Offres (2 cartes) --- */
.offers__head { text-align: center; margin-bottom: 32px; }

.offers__head h2 {
  font-weight: 600;
  font-size: 34px;
  line-height: 1.2;
}

.offers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}

.offer-card {
  border-radius: var(--radius-md);
  padding: 32px;
}

.offer-card--violet { background: var(--violet); }
.offer-card--dark { background: var(--ink); }

.offer-card__label {
  font: 700 13px var(--font-body);
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.offer-card__name {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 4px;
}

.offer-card__price {
  font: 700 20px var(--font-body);
  margin-bottom: 20px;
}

.offer-card--violet .offer-card__label { color: var(--lime); }
.offer-card--violet .offer-card__price { color: var(--lavender-text); }
.offer-card--violet .check-list { color: var(--white); }
.offer-card--violet .check-list__mark { color: var(--lime); }
.offer-card--violet .check-list__note { color: var(--lavender-text); }

.offer-card--dark .offer-card__label { color: var(--gold); }
.offer-card--dark .offer-card__price { color: var(--grey-light-dark); }
.offer-card--dark .check-list { color: var(--cream-text); }
.offer-card--dark .check-list__mark { color: var(--gold); }
.offer-card--dark .check-list__note { color: var(--grey-on-dark); }

.offer-card__cta { margin-top: 26px; }

.offers__cta { text-align: center; margin-top: 40px; }


/* Les cartes s'empilent une fois la place trop étroite pour deux colonnes.
   Elles restent dans l'axe du panneau, centrées et entièrement arrondies :
   un décalage vers la droite déséquilibrait la lecture. */
@media (max-width: 700px) {
  .offers__grid { display: block; }

  .offer-card + .offer-card { margin-top: 20px; }
}

/* --- Chiffres --- */
.figures {
  padding: 24px 16px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 28px;
  margin: 0;
}

.figures div { margin: 0; }

.figures dt {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  color: var(--ink);
}

.figures dt.is-violet { color: var(--violet); }

.figures dd {
  margin: 10px 0 0;
  font: 500 17px/1.5 var(--font-body);
  color: var(--grey-700);
}

/* --- Référence / démonstration --- */
.showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 44px;
  align-items: center;
}

/* La vidéo est un lien vers la réalisation : tout le cadre est cliquable,
   pas seulement le bouton en dessous. */
.showcase__media {
  position: relative;
  display: block;
  height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-deep);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.showcase__media:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(13, 12, 8, .38);
}


.showcase__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Pastille « Voir le site » — mobile uniquement.
   Sans survol possible au doigt, c'est elle qui signale que la vidéo est
   cliquable. Sur ordinateur, le soulèvement au survol suffit. */
.showcase__voir {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--radius-btn);
  background: var(--lime);
  color: var(--ink);
  font: 700 14px var(--font-body);
}

.showcase h2 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  color: var(--white);
}

/* Avis client — proposition A : sans cadre.
   Un grand guillemet doré tient lieu de signal, le texte respire, la
   signature suit sans filet. Trois éléments en moins, la citation se lit
   d'un trait. */
.showcase__avis {
  position: relative;
  margin: 26px 0 28px;
  padding-left: 34px;
}

.showcase__avis::before {
  content: "«";
  position: absolute;
  left: -2px;
  top: -14px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--gold);
}

.showcase__avis blockquote { margin: 0; }

.showcase__avis p {
  margin: 0;
  font: 400 17px/1.62 var(--font-body);
  color: var(--white);
}

/* Les deux passages mis en avant partagent le doré. L'italique a été
   retiré : sur un fond coloré, il alourdit la lecture au lieu de la
   guider. La balise « em » est conservée pour les lecteurs d'écran, qui
   marquent l'insistance à la voix. */
.showcase__avis strong,
.showcase__avis em {
  font-style: normal;
  font-weight: 700;
  color: var(--gold);
}

.showcase__avis figcaption {
  margin-top: 14px;
  font: 600 13px var(--font-body);
  letter-spacing: .02em;
  color: var(--lavender-text);
}

.showcase h3 {
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--lime);
}

.showcase p {
  margin: 0 0 24px;
  font: 400 18px/1.7 var(--font-body);
  color: var(--white);
  max-width: 520px;
}

/* --- Garanties ---
   La photo de l'artisan ouvre la section : elle passe avant le titre. Sur
   ordinateur, la disposition d'origine est rétablie plus bas — titre en
   pleine largeur, puis la liste et la photo côte à côte. */
.guarantees { display: flex; flex-direction: column; }

.guarantees__figure { margin: 0 0 30px; }

.guarantees__figure img {
  display: block;
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.guarantees h2 {
  margin: 0 0 30px;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.14;
}

.guarantees__list {
  position: relative;
  padding-left: 36px;
  max-width: 640px;
  margin: 0;
  list-style: none;
}

.guarantees__list::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--lavender-line);
}

.guarantees__list li { position: relative; margin-bottom: 26px; }
.guarantees__list li:last-child { margin-bottom: 0; }

.guarantees__num {
  position: absolute;
  left: -36px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--violet);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px var(--font-body);
}

.guarantees__num--gold { background: var(--gold); color: var(--ink); }

.guarantees h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 4px;
}

.guarantees p { color: var(--grey-700); }

/* 8. PAGES INTERNES ======================================================== */

.page-head { padding: 56px 16px 20px; }

.page-head h1 {
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 40px);
}

.page-head__date {
  margin: 14px 0 0;
  font: 400 16px var(--font-body);
  color: var(--grey-500);
}

/* --- Accordéon natif (<details>/<summary>), sans JavaScript --- */

.accordion details { border-bottom: 1px solid var(--edge); }

.accordion summary {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary::after {
  content: "+";
  margin-left: auto;
  flex-shrink: 0;
  font: 700 16px var(--font-body);
  color: var(--violet);
  line-height: 1;
}

.accordion details[open] summary::after { content: "−"; }

.accordion__check {
  color: var(--violet);
  font-weight: 800;
  flex-shrink: 0;
}

.accordion__title {
  font: 700 15px/1.35 var(--font-body);
  color: var(--ink);
}

.accordion__body {
  padding: 0 26px 14px;
  font: 400 15px/1.6 var(--font-body);
  color: var(--grey-700);
}

/* Variante sur fond violet foncé */
.accordion--deep details { border-bottom-color: var(--violet-line); }
.accordion--deep summary::after,
.accordion--deep .accordion__check { color: var(--gold); }
.accordion--deep .accordion__title { color: var(--white); }
.accordion--deep .accordion__body { color: var(--lavender-muted); }

/* --- Page Offres et tarifs --- */

.offers-panel {
  border-radius: var(--radius-xl);
  background: var(--violet-dark);
  padding: 56px 48px 54px;
  margin: 26px 0 44px;
}

.offers-panel__head { text-align: center; margin-bottom: 36px; }

.offers-panel__head h1 {
  margin: 0 auto 14px;
  max-width: 640px;
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.05;
  color: var(--white);
}

.offers-panel__head p {
  margin: 0 auto;
  max-width: 560px;
  font: 400 17px/1.6 var(--font-body);
  color: var(--lavender-text-alt);
}

/* L'illustration ouvre la page, juste sous la phrase d'introduction. Elle
   se tenait auparavant entre les tarifs et la FAQ, où elle coupait la
   lecture sans rien annoncer. Cadrage large : elle sert de respiration,
   pas de démonstration, et ne doit pas repousser les prix trop bas. */
.offers-panel__figure {
  margin: 28px auto 0;
  max-width: 720px;
}

.offers-panel__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.offers-panel__grid {
  display: grid;
  /* minmax(0, …) plutôt que « 1.1fr 1fr » seul : une colonne en fr garde
     un plancher implicite à min-content. Sur téléphone, une carte refusait
     de se réduire sous 337 px dans une grille de 295 px, et les deux
     cartes de prix débordaient de 42 px vers la droite. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.price-card {
  background: var(--white);
  border-radius: 22px;
  padding: 32px 34px;
}

.price-card--deep {
  background: var(--violet-deep);
  border: 1px solid var(--violet-line);
}

.price-card__label {
  font: 800 11px var(--font-body);
  letter-spacing: .12em;
  color: var(--violet-dark);
  margin-bottom: 10px;
}

.price-card--deep .price-card__label { color: var(--gold); }

.price-card h2 {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 4px;
}

.price-card--deep h2 { font-size: 26px; color: var(--white); margin-bottom: 6px; }

.price-card__price {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--violet);
}

.price-card--deep .price-card__price { font-size: 38px; color: var(--gold); }

.price-card__mention {
  font: 400 13px var(--font-body);
  color: var(--grey-500);
  margin: 8px 0 16px;
}

.price-card--deep .price-card__mention {
  color: var(--lavender-muted-2);
}

.price-card__intro {
  margin: 0 0 22px;
  font: 400 16px/1.6 var(--font-body);
  color: var(--grey-700);
}

/* Même mise en page que le paragraphe du Pack Création — corps de texte
   ordinaire, seule la couleur change. Il était auparavant composé dans la
   police des titres, en 20 px semi-gras : un pavé entier en gras que
   l'œil refusait de lire. Une seule phrase reste mise en avant, en doré. */
.price-card__pitch {
  margin: 0 0 26px;
  font: 400 16px/1.6 var(--font-body);
  color: var(--lavender-text);
}

.price-card__pitch strong { color: var(--gold); font-weight: 700; }

.price-card__section {
  font: 800 11px var(--font-body);
  letter-spacing: .12em;
  color: var(--violet-dark);
  margin-bottom: 12px;
}

.price-card--deep .price-card__section { color: var(--gold); }

.option-box {
  margin-top: 22px;
  background: var(--lavender-bg);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}

/* Le titre et le prix tiennent côte à côte tant qu'il y a la place. Sur
   téléphone le titre passe sur deux lignes, et sans « wrap » le prix
   restait accroché à sa droite : il sortait de l'encadré et se retrouvait
   coupé au bord de la carte. Il descend maintenant sur sa propre ligne. */
.option-box__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-bottom: 8px;
}

.option-box__head h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; }

.option-box__price {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 24px;
  color: var(--violet);
  white-space: nowrap;
}

.option-box p { font: 400 15px/1.6 var(--font-body); color: var(--grey-700); }

/* --- Page Réalisations ---
   Deux références seulement : on va en profondeur plutôt qu'en largeur.
   Chaque cas occupe toute la ligne, avec sa vidéo d'un côté et le détail
   de l'autre. Une grille de deux vignettes aurait fait maigre ; deux
   études de cas font un portfolio. */

.works-head { padding: 8px 0 6px; text-align: center; }

.works-head h1 {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.04;
}

.works-head p {
  max-width: 620px;
  margin: 0 auto;
  font: 400 18px/1.6 var(--font-body);
  color: var(--grey-700);
}

.work {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 44px;
  align-items: center;
  margin-top: 64px;
}

/* Le second cas inverse l'ordre : la lecture ne retombe pas dans le même
   sillon, et les deux vidéos ne s'alignent pas en colonne. */
.work--inverse .work__media { order: 2; }

.work__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--ink-deep);
  box-shadow: var(--shadow-card);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease;
}

.work__media:hover { transform: translateY(-4px); }

.work__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le premier enregistrement est un écran d'ordinateur, le second un
   téléphone tenu à la verticale. Deux cadres différents, chacun à ses
   proportions : forcer le même format déformerait l'un des deux. */
.work__media { aspect-ratio: 4 / 3; }

/* Proportions exactes de l'enregistrement (1150 × 2338) : tout autre
   rapport recadrerait l'image et couperait le haut ou le bas de l'écran
   filmé. */
.work__media--portrait {
  aspect-ratio: 1150 / 2338;
  max-width: 300px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
}

/* L'enregistrement montre déjà la barre du navigateur en bas de l'écran :
   la pastille passe en haut pour ne pas s'y superposer. */
.work__media--portrait .work__vue {
  top: 14px;
  bottom: auto;
}

.work__vue {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: var(--radius-btn);
  background: rgba(13, 12, 8, .74);
  color: var(--white);
  font: 600 12px var(--font-body);
  letter-spacing: .03em;
}

.work__meta {
  margin: 0 0 8px;
  font: 800 11px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet);
}

.work__body h2 {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.1;
}

.work__intro {
  margin: 0 0 26px;
  font: 400 17px/1.62 var(--font-body);
  color: var(--grey-700);
}

.work__section {
  margin: 0 0 12px;
  font: 800 11px var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--violet-dark);
}

.work__liste {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}

.work__liste li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  font: 400 16px/1.55 var(--font-body);
  color: var(--ink);
}

.work__liste li::before {
  content: "✓";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--violet);
}

/* L'avis reprend exactement la présentation de l'accueil : un grand
   guillemet doré, aucun cadre. Sur fond clair, le doré manquerait de
   contraste — le violet prend le relais. */
.work__avis {
  position: relative;
  margin: 0 0 26px;
  padding-left: 34px;
}

.work__avis::before {
  content: "«";
  position: absolute;
  left: -2px;
  top: -14px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--violet);
}

.work__avis blockquote { margin: 0; }

.work__avis p {
  margin: 0;
  font: 400 17px/1.62 var(--font-body);
  color: var(--ink);
}

.work__avis strong,
.work__avis em {
  font-style: normal;
  font-weight: 700;
  color: var(--violet-dark);
}

.work__avis figcaption {
  margin-top: 12px;
  font: 600 13px var(--font-body);
  color: var(--grey-500);
}

/* --- Méthode --- */

.methode { margin-top: 72px; text-align: left; }

.methode h2 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: clamp(27px, 3.2vw, 34px);
  line-height: 1.14;
}

.methode__chapo {
  margin: 0 0 34px;
  font: 400 17px/1.6 var(--font-body);
  color: var(--grey-700);
}

.methode__liste {
  position: relative;
  margin: 0;
  padding-left: 36px;
  list-style: none;
  counter-reset: etape;
}

/* Le filet vertical relie les étapes : on voit d'un coup d'œil qu'il
   s'agit d'un déroulé, pas d'une liste de services. */
.methode__liste::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--lavender-line);
}

.methode__liste li { position: relative; margin-bottom: 26px; }
.methode__liste li:last-child { margin-bottom: 0; }

.methode__num {
  position: absolute;
  left: -36px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--violet);
  color: var(--white);
  font: 700 13px var(--font-body);
}

.methode__num--gold { background: var(--gold); color: var(--ink); }

.methode h3 {
  margin: 0 0 5px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
}

.methode p { margin: 0; color: var(--grey-700); }

/* --- FAQ --- */

.faq h2 {
  margin: 0 0 30px;
  font-weight: 600;
  font-size: 32px;
}

.faq__list { display: flex; flex-direction: column; gap: 10px; }

.faq details {
  border: 1px solid var(--lavender-line);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font: 700 18px var(--font-body);
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "▼";
  flex-shrink: 0;
  font-size: 14px;
  color: var(--violet);
}

.faq details[open] summary::after { content: "▲"; }

.faq__answer {
  margin-top: 12px;
  font: 400 17px/1.6 var(--font-body);
  color: var(--grey-700);
}

/* --- Liste des actualités --- */

.news { padding: 60px 16px 52px; max-width: 1000px; margin: 0 auto; }

.news h1 {
  margin: 14px 0 44px;
  max-width: 560px;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.06;
}


/* Chapô : la phrase d'accroche, à la typographie des titres. */
.news__chapo {
  max-width: 760px;
  margin: 0 0 26px;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.45;
  color: var(--ink);
}

.news__chapo em { font-style: normal; color: var(--violet); }

.news__amorce {
  max-width: 720px;
  margin: 0 0 18px;
  font: 700 17px/1.6 var(--font-body);
  color: var(--ink);
}

/* Les trois mécanismes, numérotés : le paragraphe-fleuve devient balayable. */
.news__points {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  max-width: 760px;
  display: grid;
  gap: 14px;
}

.news__points li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--lavender-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--violet);
}

.news__points-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--violet);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 13px var(--font-body);
}

.news__points strong { font: 700 17px var(--font-body); color: var(--ink); }

.news__points p {
  margin-top: 2px;
  font: 400 16px/1.6 var(--font-body);
  color: var(--grey-700);
}

.news__closing {
  max-width: 720px;
  margin: 0 0 44px;
  font: 400 16px/1.7 var(--font-body);
  color: var(--grey-500);
}

.news__lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 34px;
  align-items: center;
  padding-bottom: 38px;
  border-bottom: 2px solid var(--ink);
  color: inherit;
}

.news__lead:hover { color: inherit; }

.news__lead img,
.news__item img { display: block; object-fit: cover; }

.news__lead img { width: 100%; height: 280px; border-radius: 18px; }

.news__lead h2 {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  margin-bottom: 14px;
}

.news__excerpt {
  font: 400 17px/1.65 var(--font-body);
  color: var(--grey-700);
  margin-bottom: 18px;
}

.news__more { font: 800 15px var(--font-body); color: var(--violet); }

.news__item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 30px;
  color: inherit;
}

.news__item:hover { color: inherit; }

.news__item img {
  width: 170px;
  height: 112px;
  border-radius: 12px;
  flex-shrink: 0;
}

.news__item h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
}

.news__lead:hover h2,
.news__item:hover h2 { color: var(--violet); }

/* --- Article --- */

.article { padding: 34px 16px 44px; max-width: 720px; margin: 0 auto; }

.article__back { font: 700 14px var(--font-body); color: var(--violet); }

.article__kicker {
  font: 700 13px var(--font-body);
  letter-spacing: .06em;
  color: var(--violet-dark);
  margin: 16px 0 8px;
}

.article h1 {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: clamp(27px, 3.3vw, 37px);
  line-height: 1.12;
}

.article__cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: 26px;
}

.article__body {
  font: 400 17px/1.62 var(--font-body);
  color: var(--grey-700);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article__body h2 {
  margin: 14px 0 -2px;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
}

.article__cta {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--lavender-line);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.article__next {
  margin-top: 22px;
  font: 500 16px/1.6 var(--font-body);
  color: var(--grey-700);
}

/* Bandeau d'appel à l'action, intercalé entre les sections
   Un visiteur convaincu doit pouvoir agir là où il se trouve, sans avoir
   à chercher le formulaire tout en bas. */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  /* Décalage franc : retrait marqué à gauche, et le bandeau file jusqu'au
     bord droit de l'écran en sortant du conteneur. Les angles ne sont
     arrondis qu'à gauche, puisque la droite touche le bord. */
  margin-top: 56px;
  margin-bottom: 56px;
  margin-left: clamp(28px, 7vw, 110px);
  margin-right: calc(50% - 50vw);
  padding: 30px 34px;
  background: var(--lavender-bg);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1),
              background-color .3s ease;
}

/* Une section « tight » apporte 44 px de marge intérieure sous son dernier
   élément : sans cette règle, l'espace au-dessus du bandeau doublerait.
   Ne vaut que sous 980 px ; au-delà, ces marges sont neutralisées et le
   rythme régulier de 72 px reprend la main. */
@media (max-width: 980px) {
  .section--tight + .cta-band { margin-top: 0; }
}

.cta-band:hover {
  transform: translateX(-8px);
  background: #EDE6FB;
}

/* Le glissement latéral s'applique à toutes les largeurs pour ces
   bandeaux : ils occupent toute la ligne, rien ne les contraint. */
.has-js .cta-band[data-reveal="right"] {
  transform: translateX(70px);
  transition-duration: .7s;
}

.has-js .cta-band[data-reveal="right"].is-revealed { transform: none; }
.has-js .cta-band[data-reveal="right"].is-revealed:hover { transform: translateX(-8px); }

/* Variante sombre — bandeau « Envie du même résultat ? »
   Il est coincé entre le panneau violet de la démonstration et le panneau
   lavande des offres. En lavande, il se confondait avec celui du dessous :
   les deux ne formaient plus qu'un seul bloc. Le fond encre tranche avec
   l'un comme avec l'autre, et met en valeur l'appel à l'action qui suit
   immédiatement la démonstration — le moment où l'intérêt est le plus vif.

   La règle de survol est répétée à l'identique pour résister aux deux
   surcharges responsives qui ramènent tous les bandeaux au lavande ; sa
   spécificité plus forte l'emporte quel que soit l'ordre des blocs. */
.cta-band.cta-band--sombre,
.cta-band.cta-band--sombre:hover {
  background: var(--ink-deep);
}

.cta-band--sombre .cta-band__texte { color: var(--white); }

.cta-band__texte {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.35;
  color: var(--ink);
  flex: 1 1 300px;
}

.cta-band__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Barre d'action permanente sur mobile
   Les artisans consultent depuis un chantier, à une main. Le numéro et le
   devis restent sous le pouce en permanence. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;
  gap: 10px;
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
  background: var(--ink-deep);
}

/* Fond noir, deux boutons en contour blanc de même poids : la barre se
   fait oublier tant qu'on ne la cherche pas, et ne concurrence aucune
   couleur de la page. */
.action-bar .btn {
  flex: 1 1 0;
  height: 48px;
  padding: 0 12px;
  font-size: 15px;
  gap: 8px;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, .6);
}

.action-bar .btn:hover,
.action-bar .btn:active {
  filter: none;
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}

.action-bar svg { flex-shrink: 0; }

/* Le bandeau cookies passe devant : on ne masque pas un choix légal. */
.consent.is-open ~ .action-bar { display: none !important; }

@media (max-width: 980px) {
  .action-bar { display: flex; }

  /* Le pied de page ne doit pas passer sous la barre. */
  body { padding-bottom: 78px; }

  /* Le retour en haut remonte au-dessus de la barre. */
  .to-top { bottom: 88px; }

  .cta-band {
    padding: 24px 20px;
    gap: 16px;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 42px;
  }

  /* Pas de survol au doigt : l'effet resterait collé après le tap. */
  .cta-band:hover { transform: none; background: var(--lavender-bg); }
  .has-js .cta-band[data-reveal="right"].is-revealed:hover { transform: none; }

  .cta-band__texte { font-size: 19px; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { flex: 1 1 auto; }

  /* La barre fixe propose déjà l'appel en permanence : inutile de le
     répéter dans chaque bandeau, cela alourdit la lecture. C'est bien le
     lien d'appel qui est visé, pas sa couleur — les boutons dorés des
     relances doivent rester. */
  .cta-band__actions .btn[href^="tel:"] { display: none; }

  /* Sur mobile, un bandeau marqué « nu » n'en est plus un : ni cadre, ni
     fond, ni décalage. Une simple relance alignée à gauche, dans le fil du
     reste de la page. Les deux règles de fond sont neutralisées ensemble,
     sans quoi le moindre appui ramènerait l'encre. */
  .cta-band.cta-band--nu,
  .cta-band.cta-band--nu:hover {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 22px;
    margin: 52px 0;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .cta-band--nu .cta-band__texte {
    flex: 0 1 auto;
    color: var(--ink);
    text-align: left;
  }

  .cta-band--nu .cta-band__actions { width: auto; justify-content: flex-start; }
  .cta-band--nu .cta-band__actions .btn { flex: 0 1 auto; }

  /* Le violet est déjà partout autour — l'en-tête, le panneau de la
     démonstration, celui des offres. Les deux relances passent au doré,
     la couleur du bouton du héros. Le geste reste le même d'un bout à
     l'autre de la page. La règle ne vaut que sur mobile : sur ordinateur
     « Envie du même résultat ? » garde son cadre encre, où le violet
     tranche et où le doré est déjà pris par le numéro. */
  .cta-band--nu .btn--violet {
    background: var(--gold);
    color: var(--ink);
  }

  /* Le glissement latéral accompagnait le décalage vers la droite. Le bloc
     étant maintenant centré, il monte simplement à sa place. */
  .has-js .cta-band--nu[data-reveal="right"] { transform: translateY(26px); }
  .has-js .cta-band--nu[data-reveal="right"].is-revealed,
  .has-js .cta-band--nu[data-reveal="right"].is-revealed:hover { transform: none; }
}

/* --- Section « à propos » --- */

.about {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 48px;
  align-items: center;
}

.about__figure { margin: 0; position: relative; }

.about__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-lg);
  display: block;
}

.about h2 {
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  margin: 10px 0 14px;
}

.about__lead {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 18px;
}

/* Classe et non sélecteur d'élément : la pastille « À propos » est aussi
   un <p> et se ferait écraser. */
.about__prose p {
  font: 400 17px/1.7 var(--font-body);
  color: var(--grey-700);
}

.about__prose p + p { margin-top: 16px; }

.about__texte em {
  font-style: normal;
  font-weight: 600;
  color: var(--violet);
}

/* Les trois réalités du métier, sorties du paragraphe pour être vues
   d'un coup d'œil plutôt que lues en enfilade. */
.about__points {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: grid;
  gap: 9px;
}

.about__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 500 17px/1.5 var(--font-body);
  color: var(--ink);
}

.about__points li::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-radius: var(--radius-pill);
  background: var(--gold);
}

/* Marqueurs de confiance sous le texte */
.about__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.about__reperes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 15px var(--font-body);
  color: var(--grey-700);
}

.about__reperes svg { flex-shrink: 0; color: var(--violet); }

/* --- Illustration dans le corps d'un article --- */

.article__figure { margin: 10px 0; }

.article__figure img {
  width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

.article__figure figcaption {
  margin-top: 8px;
  font: 400 14px/1.5 var(--font-body);
  color: var(--grey-500);
}

.article__figure--narrow { max-width: 400px; margin-inline: auto; }

/* --- Mentions légales --- */

.legal {
  padding: 24px 16px 60px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.legal h2 {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 22px;
}

.legal p {
  font: 400 17px/1.7 var(--font-body);
  color: var(--grey-700);
}

.legal p + p { margin-top: 12px; }

/* --- Pages 404 et confirmation --- */

.notice {
  padding: 80px 16px 90px;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.notice__code {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(64px, 12vw, 110px);
  line-height: 1;
  color: var(--violet);
  margin-bottom: 8px;
}

.notice h1 {
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px);
  margin-bottom: 16px;
}

.notice__lead {
  font: 400 18px/1.7 var(--font-body);
  color: var(--grey-700);
  margin-bottom: 28px;
}

.notice__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 9. CONTACT =============================================================== */

.contact {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--ink-deep);
  padding: 52px 46px;
  margin-bottom: 14px;
}

.contact__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.contact__grid {
  position: relative;
  display: grid;
  /* Le « min() » est indispensable : sous 320 px de place disponible, une
     largeur minimale fixe l'emporte sur le conteneur et les deux cartes
     débordent par la droite. Sur un écran de 375 px, elles dépassaient de
     13 px et ne s'alignaient plus sur le reste de la page. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 44px;
  align-items: center;
}

.contact__intro {
  background: var(--ink-deep);
  border-radius: var(--radius-lg);
  padding: 30px 34px;
}

.contact__intro h2 {
  margin: 18px 0 14px;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.16;
  color: var(--white);
}

/* Classe et non sélecteur d'élément : sinon la pastille et la mention
   « par téléphone ou SMS », qui sont aussi des <p>, seraient écrasées. */
.contact__lede {
  margin: 0 0 26px;
  max-width: 480px;
  font: 400 18px/1.7 var(--font-body);
  color: var(--cream-text);
}

.contact__aside {
  font: 600 16px var(--font-body);
  color: var(--grey-light-dark);
  margin-bottom: 10px;
}

.contact__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-soft);
}

/* --- Formulaire --- */
.form { display: flex; flex-direction: column; gap: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; }

.field label {
  font: 600 14px var(--font-body);
  color: var(--grey-700);
}

.field .req { color: var(--violet); }

.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--lavender-line);
  border-radius: 10px;
  padding: 0 16px;
  height: 50px;
  font: 400 16px var(--font-body);
  color: var(--ink);
  background: var(--white);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.field textarea {
  height: auto;
  padding: 12px 16px;
  line-height: 1.5;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .18);
}

/* Message d'état du formulaire : succès, attente ou erreur */
.form__message {
  margin-top: 4px;
  font: 600 15px/1.5 var(--font-body);
  min-height: 0;
}

.form__message:empty { display: none; }

.form__message--attente { color: var(--grey-700); }

.form__message--erreur {
  color: #B4232B;
  background: #FDF2F2;
  border-left: 3px solid #B4232B;
  border-radius: 8px;
  padding: 12px 14px;
}

/* Page de confirmation */
.notice__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  margin-bottom: 22px;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--ink);
}

.notice__lead + .notice__lead { margin-top: -12px; }

.notice__aside {
  margin-top: 26px;
  font: 400 16px/1.7 var(--font-body);
  color: var(--grey-500);
}

/* Piège à robots — invisible pour les humains, absent des tabulations */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ==========================================================================
   MISE AU PROPRE DE LA VERSION ORDINATEUR (au-delà de 980 px)

   Trois défauts corrigés, mesurés sur une fenêtre de 1280 px :

   1. Aucun alignement vertical commun. Les blocs commençaient à 24, 100 et
      114 px du bord selon les sections ; l'œil n'avait aucune ligne de fuite.
   2. Les bandeaux d'appel à l'action filaient jusqu'au bord de l'écran alors
      que tout le reste s'arrête à 24 px. Sur un large écran, cela ne se lit
      pas comme un décalage voulu mais comme un défaut d'alignement. Le
      retrait à gauche est conservé, le bord droit revient dans le rang.
   3. Espacements verticaux irréguliers : 56 px entre certains blocs, 88 à
      100 px entre d'autres, selon que la section portait ou non sa propre
      marge intérieure. Rythme unifié à 72 px.
   ========================================================================== */

@media (min-width: 981px) {

  /* 1. Une seule ligne de fuite à gauche pour tous les blocs */
  .arguments { max-width: none; }

  /* 2. Bandeaux : retrait à gauche conservé, bord droit aligné sur le reste */
  .cta-band {
    margin-right: 0;
    border-radius: var(--radius-lg);
  }

  /* 3. Rythme vertical régulier — les marges intérieures des sections sont
        neutralisées pour que seul l'écart entre blocs compte. */
  main > .container > * { margin-top: 0; margin-bottom: 0; }
  main > .container > * + * { margin-top: 72px; }

  main > .container > .section--tight { padding-top: 0; padding-bottom: 0; }

  /* Une respiration avant la phrase d'accroche : sans elle, elle se collait
     au bas du héros alors que tous les autres blocs sont séparés de 72 px. */
  main > .container > .intro { padding-top: 48px; }
  main > .container > .contact { margin-bottom: 0; }

  /* Le titre des chiffres portait 56 px de marge intérieure haute qui
     s'ajoutaient à l'écart entre blocs. */
  .figures-head { padding: 0 0 24px; }

  /* Aucune animation d'entrée, sauf là où elle est explicitement demandée.
     Un élément marqué « data-reveal-ordi » garde son apparition sur grand
     écran — la FAQ et les articles des actualités. Partout ailleurs le
     contenu est simplement présent : ni glissement, ni fondu, ni
     transition. */
  .has-js [data-reveal]:not([data-reveal-ordi]) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Le bandeau « Vous vous reconnaissez ? » est retiré de la version
     ordinateur ; il reste en place sur mobile. */
  .cta-band--reconnaissez { display: none; }

  /* La pastille de la vidéo ne sert que là où il n'y a pas de survol. */
  .showcase__voir { display: none; }

  /* Le survol du bandeau était un mouvement de bloc, pas une réaction de
     bouton : il disparaît aussi. */
  .cta-band:hover {
    transform: none;
    background: var(--lavender-bg);
  }

  /* « Envie du même résultat ? » perd son cadre encre sur ordinateur aussi.
     Plus de fond ni d'arrondi, plus de décalage : une relance centrée dans
     la largeur du texte. Les deux règles de fond sont neutralisées
     ensemble, sinon le survol ramènerait la couleur. */
  .cta-band.cta-band--sombre,
  .cta-band.cta-band--sombre:hover {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-left: 0;
    padding: 0;
    background: none;
    border-radius: 0;
  }

  .cta-band--sombre .cta-band__texte {
    flex: 0 1 auto;
    color: var(--ink);
    text-align: center;
  }

  .cta-band--sombre .cta-band__actions { justify-content: center; }

  /* Garanties : la disposition d'origine est rétablie. Le titre occupe
     toute la largeur, la liste et la photo se partagent la ligne suivante.
     La photo n'ouvre la section que sur mobile. */
  .guarantees {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    column-gap: 44px;
    align-items: center;
  }

  .guarantees > h2 { grid-column: 1 / -1; grid-row: 1; }
  .guarantees__list { grid-column: 1; grid-row: 2; }

  .guarantees__figure { grid-column: 2; grid-row: 2; margin: 0; }
  .guarantees__figure img { max-height: 470px; }
}

/* 10. RESPONSIVE =========================================================== */

@media (max-width: 1100px) {
  .site-header__inner { padding: 14px 24px; }
  .site-header__logo img { height: 62px; width: 208px; }
  :root { --header-h: 93px; }
}

@media (max-width: 980px) {
  :root { --gutter: 18px; }

  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 3px solid var(--ink);
    box-shadow: 0 18px 34px rgba(23, 22, 15, .18);
    display: none;
  }

  .site-nav.is-open { display: block; }

  .site-header__inner { position: relative; }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 18px;
  }

  .site-nav li { border-bottom: 1px solid var(--lavender-line); }
  .site-nav li:last-child { border-bottom: none; }

  .site-nav a {
    display: block;
    padding: 16px 0;
    font-size: 14px;
  }

  /* Le héros s'arrête avant le bas de l'écran : le haut de la section
     suivante reste visible, ce qui signale qu'il y a du contenu dessous. */
  .hero {
    min-height: calc(100vh - var(--header-h) - 110px);
    min-height: calc(100svh - var(--header-h) - 110px);
    padding: 44px 20px 54px;
  }

  .hero__lede { font-size: 17px; margin-bottom: 24px; }

  /* Les cartes d'offre arrivent par la droite, l'une après l'autre.
     Sur grand écran elles sont côte à côte : un glissement latéral n'aurait
     pas de sens, elles gardent le fondu montant commun. */
  .has-js [data-reveal="right"] {
    transform: translateX(64px);
    transition-duration: .7s;
  }

  /* Indispensable : cette règle apparaît après .is-revealed { transform:
     none } et a la même spécificité. Sans elle, l'élément resterait figé
     à 64 px, révélé mais jamais remis en place. */
  .has-js [data-reveal="right"].is-revealed { transform: none; }

  .panel { --panel-x: 24px; padding: 36px var(--panel-x); margin: 40px 0 32px; }

  /* Le panneau des offres reste dans l'axe des autres blocs. Il a porté un
     temps le décalage vers la droite des anciens bandeaux ; à la lecture,
     ce déséquilibre attirait l'œil au mauvais endroit. */
  .contact { padding: 36px 24px; }
  .contact__intro { padding: 24px 20px; }
  .contact__intro h2 { font-size: 30px; }
  .contact__grid { gap: 28px; }

  .showcase { grid-template-columns: 1fr; gap: 28px; }
  .showcase__media { height: 260px; }
  .showcase h2 { font-size: 30px; }

  .intro { padding: 48px 0 0; }
  .intro__lead { font-size: 23px; margin-bottom: 40px; }

  .section { padding: 40px 0; }
  .figures { padding: 20px 0 32px; gap: 22px; }
  .figures dt { font-size: 42px; }

  .offers__head h2 { font-size: 27px; }
  .guarantees h2 { font-size: 28px; }
  .page-head { padding: 40px 0 16px; }


  /* Cibles tactiles : les liens du pied de page ne faisaient que 19 px de
     haut, sous le minimum recommandé. Le remplissage vertical les porte à
     44 px sans changer leur aspect. */
  .site-footer__links a,
  .site-footer__phone {
    display: inline-block;
    padding: 13px 0;
  }

  .offers-panel { padding: 36px 22px; margin: 20px 0 32px; }
  .offers-panel__grid { grid-template-columns: minmax(0, 1fr); }
  .price-card { padding: 26px 22px; }
  .price-card__price { font-size: 34px; }


  /* Page Réalisations : une seule colonne, la vidéo toujours en premier.
     Sans cette remise à zéro de l'ordre, le second cas afficherait son
     texte avant son visuel. */
  .work {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 48px;
  }

  .work--inverse .work__media { order: 0; }

  .work__media { aspect-ratio: 16 / 11; }
  .work__media--portrait { aspect-ratio: 1150 / 2338; max-width: 240px; }

  .works-head p { font-size: 17px; }
  .methode { margin-top: 48px; }

  .faq h2 { font-size: 27px; }
  .faq summary { font-size: 17px; }

  .news { padding: 40px 0 40px; }
  .news__chapo { font-size: 20px; margin-bottom: 22px; }
  .news__points li { padding: 14px 15px; gap: 12px; }
  .news__points strong { font-size: 16px; }
  .news__points p { font-size: 15px; }
  .news__lead { grid-template-columns: 1fr; gap: 20px; padding-bottom: 28px; }
  .news__lead img { height: 210px; }
  .news__lead h2 { font-size: 25px; }

  .news__item { gap: 16px; padding-top: 24px; }
  .news__item img { width: 120px; height: 80px; }
  .news__item h2 { font-size: 18px; }

  .about { grid-template-columns: 1fr; gap: 26px; }
  .about__figure { max-width: 340px; }
  .about h2 { font-size: 28px; }
  .about__lead { font-size: 19px; }
  .about__points li { font-size: 16px; }


  .article { padding: 26px 0 36px; }
  .article__cover { height: 200px; }
  .legal { padding: 16px 0 44px; gap: 28px; }
  .notice { padding: 56px 0 64px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }

  .site-header__inner { padding: 12px 18px; }
  .site-header__logo img { height: 48px; width: 161px; }
  :root { --header-h: 75px; }

  .site-header__right { gap: 12px; }

  .panel { --panel-x: 18px; border-radius: var(--radius-md); padding: 28px var(--panel-x); }
  .contact { border-radius: var(--radius-md); padding: 28px 16px; }
  .contact__intro { padding: 20px 16px; border-radius: var(--radius-sm); }
  .contact__card { padding: 20px 16px; border-radius: var(--radius-sm); }

  .hero { padding: 40px 16px 58px; }
  .hero__title { font-size: clamp(26px, 8vw, 38px); margin-bottom: 20px; }
  .hero__lede { font-size: 16px; margin-bottom: 22px; }
  .hero__scroll { font-size: 11px; bottom: 18px; }

  .intro__lead { font-size: 20px; }
  .offer-card { padding: 24px 20px; }
  .offer-card__name { font-size: 26px; }
  .figures dt { font-size: 38px; }
  .showcase__media { height: 210px; }
  .showcase p { font-size: 16px; }
  .guarantees__list { padding-left: 30px; }
  .guarantees__num { left: -30px; width: 24px; height: 24px; font-size: 12px; }

  .site-footer { justify-content: flex-start; gap: 20px; }
  .site-footer__links { gap: 0 18px; }
}