/* =========================================================
   AXIS — Digital Built for Sport
   Feuille de style principale.
   Toute valeur de couleur, de typographie, d'espacement, de
   durée ou de courbe d'animation doit venir des variables
   ci-dessous. Aucune valeur en dur dans les sections.
   ========================================================= */

/* ---------- Variables ---------- */
:root{

  /* Couleurs — §2 */
  --bg:        #050507;   /* fond, jamais #000 */
  --bg-rgb:    5, 5, 7;   /* composantes de --bg, pour les voiles en rgba() */
  --bg-2:      #0A0A0E;   /* fond secondaire */
  --ink-2:     #0A0A0E;   /* alias sémantique utilisé dans les blocs de la §4 */
  --ink-3:     #101017;   /* gris très sombre — colonne Signature */
  --line:      #1B1B22;   /* filet discret, 1px */
  --line-2:    #2E2E39;   /* filet visible, 1px */
  --text-2:    #8C8C97;   /* texte secondaire */
  --text-3:    #585862;   /* micro-information */
  --text:      #EDEDEA;   /* texte courant */
  --white:     #FFFFFF;   /* titres uniquement */
  --accent:    #CEFB06;   /* lime — quota strict, voir CLAUDE.md §2 */

  /* Blocs de service (page Offres) — fond sombre comme le reste du
     site, ergonomie inspirée de grilles tarifaires type SaaS mais
     dans la palette AXIS (revenu en arrière après un essai en clair). */
  --block-light:   #0A0A0E;   /* alias de --ink-2 */
  --block-seam:    #1B1B22;   /* alias de --line */
  --block-line:    #1B1B22;   /* alias de --line */
  --block-text:    #FFFFFF;   /* alias de --white */
  --block-text-2:  #8C8C97;   /* alias de --text-2 */
  --block-text-3:  #585862;   /* alias de --text-3 */
  --accent-on-light: #CEFB06;   /* redevient le lime plein, fond sombre = pas de contrainte de contraste */

  /* Typographie */
  --font-title: "Archivo", system-ui, sans-serif;
  --font-text:  "Chivo", system-ui, sans-serif;
  --font-mono:  "Martian Mono", ui-monospace, monospace;

  --fs-label:   10px;   /* labels de section, monospace, capitales */
  --fs-nav:     12px;   /* liens de la banderole — légèrement au-dessus du label standard */
  --fs-micro:   13px;   /* micro-information */
  --fs-body:    16px;   /* texte courant, ne jamais descendre en dessous */
  --fs-body-lg: 17px;
  --fs-section: clamp(24px, 3.2vw, 40px);   /* titre de section */
  --fs-hero:    clamp(40px, 6vw, 76px);      /* titre monumental */

  --tracking-label: .18em;   /* labels monospace */
  --lh-title: 0.86;          /* titres, 0.84–0.86 */

  /* Grille / espacement */
  --side-margin: 9vw;
  --side-margin-wide: clamp(40px, 18vw, 360px);   /* marges plus larges — Nos services, et page principale hors Hero */
  --text-max-width: 320px;
  --header-h: 60px;   /* hauteur banderole — sert au scroll-margin-top des ancres */
  --hero-logo-h: clamp(64px, 11vw, 176px);

  /* Rayon — toujours zéro, voir garde-fous */
  --radius: 0;

  /* Animation — vocabulaire fermé, voir §4 */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-fast:   .4s;
  --dur:        .8s;
  --dur-slow:   1.1s;
}

/* ---------- Polices — auto-hébergées ----------
   Fichiers attendus dans public/fonts/ (variable fonts, non fournis
   pour l'instant : voir README ou demander au client). Tant qu'ils
   sont absents, la pile de repli (system-ui) prend le relais. */
@font-face{
  font-family: "Archivo";
  src: url("../public/fonts/archivo-variable.woff2") format("woff2-variations"),
       url("../public/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face{
  font-family: "Chivo";
  src: url("../public/fonts/chivo-variable.woff2") format("woff2-variations"),
       url("../public/fonts/chivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face{
  font-family: "Martian Mono";
  src: url("../public/fonts/martian-mono-variable.woff2") format("woff2-variations"),
       url("../public/fonts/martian-mono-variable.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

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

html{
  background: var(--bg);
  color-scheme: dark;
  scroll-behavior: smooth;   /* clic sur un lien de nav → glissement, pas de saut sec */
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* filet de sécurité — la page ne doit jamais déborder horizontalement */
}

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

a{
  color: inherit;
}

h1, h2, h3{
  font-family: var(--font-title);
  color: var(--white);
  line-height: var(--lh-title);
  letter-spacing: -.01em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 118;   /* 118–125, voir §2 — le contraste vient de la largeur */
  font-weight: 800;   /* garantit un titre dense même en repli system-ui, tant que la variable Archivo n'est pas livrée */
  margin: 0;
}

p, figure{
  margin: 0;
}

/* Focus clavier visible partout — obligatoire, §5 */
:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Ancres décalées sous la banderole fixe */
[id]{
  scroll-margin-top: var(--header-h);
}
/* Le décalage strict (hauteur de banderole) colle le titre pile
   contre la banderole, sans respiration — trop serré à l'atterrissage
   d'un clic. Un peu d'air en plus pour ce lien-là uniquement. */
#recap{
  scroll-margin-top: calc(var(--header-h) + 40px);
}

/* ---------- Banderole ----------
   Fixe, fond transparent sur le Hero puis fond plein + filet
   bas dès qu'on en sort (piloté par js/site.js via data-solid). */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.nav[data-solid="true"]{
  background: var(--bg);
  border-bottom-color: var(--line);
}

.nav__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--side-margin);
}

.nav__logo{
  display: flex;
  align-items: center;
  height: 100%;
}
.nav__logo img{
  height: 24px;
  width: auto;
}

.nav__links{
  display: flex;
  align-items: stretch;
  height: 100%;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links li{
  display: flex;
}

.nav__link{
  display: flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-nav);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover,
.nav__link.is-active{
  color: var(--white);
}

/* CTA principal de la banderole — seul lien plein, tout le reste
   du site reste en filets. Arêtes vives, pas d'arrondi. */
.nav__link[data-nav="contact"]{
  height: auto;
  min-height: 44px;
  align-self: center;
  background: var(--accent);
  color: var(--bg);
  padding: .5rem .9rem;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__link[data-nav="contact"]:hover,
.nav__link[data-nav="contact"]:focus-visible,
.nav__link[data-nav="contact"].is-active{
  background: var(--white);
  color: var(--bg);
}

/* Sous 560px : ne garder que le CTA « Nous contacter ».
   On masque le <li> entier, pas juste le lien : sinon le gap
   flex entre éléments vides continue à réserver de la place. */
@media (max-width: 560px){
  .nav__links li:nth-child(1),
  .nav__links li:nth-child(2){
    display: none;
  }
}

.nav__progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--line);
}
.nav__progress-fill{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Hero ----------
   Structure à deux niveaux obligatoire : .hero-wrap donne les 300vh
   de longueur de scroll, .hero reste sticky pendant ce temps. Sans
   les deux le travelling s'arrête au premier tiers. */
.hero-wrap{
  position: relative;
  height: 300vh;
}

.hero{
  position: sticky;
  top: 0;
  height: 100svh;   /* pas 100vh — évite le saut iOS quand la barre d'URL se rétracte */
  overflow: hidden;
  background: var(--bg);
}

.hero__canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Repli : mobile, mouvement réduit, ou échec de chargement.
   Posé par js/hero-scrub.js — les 5,9 Mo de la séquence ne sont
   alors jamais téléchargés. */
.hero--static{
  background: var(--bg) url("../public/video/poster.jpg") center / cover no-repeat;
}

/* Voile de lisibilité — dégradés noirs uniquement */
.hero__veil{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), .35) 65%, rgba(var(--bg-rgb), .7) 100%),
    linear-gradient(to bottom, rgba(var(--bg-rgb), .5) 0%, rgba(var(--bg-rgb), .05) 32%, rgba(var(--bg-rgb), .85) 100%);
}

.hero__content{
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--header-h) var(--side-margin) 8vh;
  text-align: center;
}

/* Groupe d'intro (logo + slogan + Défiler) — apparition en CSS au
   chargement, puis effacé par js/hero-scrub.js au fil du scroll. */
.hero__intro{
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__logo-wrap{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.hero__logo{
  height: var(--hero-logo-h);
  width: auto;
  opacity: 0;
  transform: translateY(16px);
  animation: hero-reveal var(--dur) var(--ease) 1s forwards;
}

.hero__foot{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

/* Phrase d'accroche — palier intermédiaire du scroll, remplace le
   groupe d'intro au même endroit visuel. Opacité pilotée en JS. */
.hero__tagline{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 84vw);
  font-family: var(--font-text);
  color: var(--text);
  font-size: clamp(19px, 2.4vw, 26px);
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
}

.hero__slogan{
  font-family: var(--font-text);
  font-size: var(--fs-body-lg);
  color: var(--text-2);
  max-width: var(--text-max-width);
  opacity: 0;
  transform: translateY(16px);
  animation: hero-reveal var(--dur) var(--ease) 1.7s forwards;
}

.hero__scroll{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
  transform: translateY(16px);
  animation: hero-reveal var(--dur) var(--ease) 2.1s forwards;
}

@keyframes hero-reveal{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px){
  .hero-wrap{ height: 100svh; }   /* pas de scrub : le repli statique tient dans un seul écran */
}
@media (prefers-reduced-motion: reduce){
  .hero-wrap{ height: 100svh; }
}

/* ---------- Révélations au scroll — vocabulaire commun ----------
   .reveal-line : masque clip-path, pour les grands titres.
   .reveal-fade : montée en fondu, pour textes/blocs/tableaux.
   .parallax : amplitude par défaut .08, surchargeable via
   data-parallax="0.06" sur l'élément. */
.reveal-line{
  display: block;
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(.15em);
  transition: clip-path var(--dur) var(--ease),
              opacity var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease);
}
.reveal-line.is-revealed{
  clip-path: inset(0 0 -0.14em 0);
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal-fade.is-revealed{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Le constat ----------
   Composition asymétrique : texte 7/12 à gauche, photo 5/12 à
   droite. Titre révélé ligne à ligne, décalage .09s entre lignes. */
.constat{
  padding: clamp(96px, 16vh, 176px) var(--side-margin-wide);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  align-items: start;
}

.constat__text{
  grid-column: 1 / 8;
}

.constat__tagline{
  margin-top: 1rem;
  font-family: var(--font-text);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--text-2);
}

.constat__title{
  font-size: var(--fs-section);
}
.constat__title .reveal-line:nth-child(1){ transition-delay: 0s; }
.constat__title .reveal-line:nth-child(2){ transition-delay: .09s; }
.constat__title .reveal-line:nth-child(3){ transition-delay: .18s; }
.constat__title .reveal-line:nth-child(4){ transition-delay: .27s; }

.constat__body{
  margin-top: clamp(40px, 6vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* pas de max-width : le texte remplit sa colonne pour venir
     vraiment toucher l'image, comme demandé — sinon un grand vide
     reste entre le texte et la photo même avec un petit gap de grille. */
}
.constat__body p{
  color: var(--text-2);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}
.constat__body p:first-child{
  color: var(--text);   /* premier paragraphe, seul à porter le contraste plein */
}

.constat__figure{
  grid-column: 8 / 13;
}
.constat__figure img{
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: grayscale(1);
}

@media (max-width: 900px){
  .constat{
    display: flex;
    flex-direction: column-reverse;
    gap: clamp(32px, 8vw, 48px);
  }
  .constat__text,
  .constat__figure{
    grid-column: auto;
  }
  .constat__figure img{
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Notre approche ----------
   Photo en fond (section-04.jpg), texte par-dessus. Voile plus
   appuyé qu'au Hero : ici c'est du texte de lecture, pas un logo,
   le contraste doit rester confortable sur toute la hauteur. */
.approche{
  position: relative;
  overflow: hidden;
  padding: clamp(96px, 16vh, 176px) var(--side-margin-wide);
}
.approche__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.approche__bg img{
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;   /* légère marge — la parallaxe translate l'image, cette marge évite un bord vide */
  object-fit: cover;
  filter: grayscale(1);
}
.approche__veil{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(var(--bg-rgb), .72) 0%, rgba(var(--bg-rgb), .64) 50%, rgba(var(--bg-rgb), .76) 100%),
    radial-gradient(ellipse at 30% 40%, rgba(var(--bg-rgb), .4) 0%, rgba(var(--bg-rgb), .68) 70%);
}
.approche__content{
  position: relative;
  z-index: 1;
}
.approche__title{
  font-size: var(--fs-section);
}
.approche__tagline{
  margin-top: 1rem;
  max-width: 60ch;
  font-family: var(--font-text);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--white);
}
.approche__body{
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52ch;
}
.approche__body p{
  color: var(--text);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}
.approche__body p.approche__highlight{
  color: var(--white);
  font-weight: 700;
}

/* ---------- Nos offres ----------
   Le visiteur n'a que deux décisions : quel site (§ tronc commun +
   deux niveaux), puis avec ou sans publicité (§ deux options). */

/* Texture de fond — bandeau localisé, derrière le bloc Nos services
   (titre + accroche + lede) et derrière toute la section Nous
   contacter, pas sur le reste de la page.
   Sur un ::before plutôt que le fond directement, pour pouvoir régler
   son opacité — ça doit rester un repère discret, pas un fond plein. */
.contact{
  position: relative;
  z-index: 0;   /* force un contexte d'empilement — sinon le fond peint par-dessus le ::before en z-index négatif */
}
.contact::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../public/images/geometric-pattern.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .25;
  pointer-events: none;
}

/* Nos services — bandeau en plein bord, comme la photo de Notre
   approche : il déborde volontairement des marges latérales de la
   section (technique du "full bleed"), alors que le texte reste
   dans sa colonne de 640px. */
.offres__intro{
  position: relative;
  z-index: 0;
  padding-bottom: clamp(56px, 8vw, 96px);
}
.offres__intro-bg{
  position: absolute;
  top: calc(-1 * clamp(96px, 16vh, 176px));   /* remonte jusqu'au bord de la section, sous la banderole */
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  background-image: url("../public/images/geometric-pattern.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .25;
  pointer-events: none;
}

.offres{
  padding: clamp(96px, 16vh, 176px) var(--side-margin-wide) clamp(72px, 11vh, 132px);
}

/* Banderole et pied de page assortis à la marge élargie, sur
   cette page uniquement — sinon le logo/nav paraîtrait moins
   en retrait que le contenu en dessous. */
.services-page .nav__inner,
.services-page .site-footer,
.home-page .nav__inner,
.home-page .site-footer{
  padding-left: var(--side-margin-wide);
  padding-right: var(--side-margin-wide);
}

.offres__title,
.offres__tagline,
.offres__lede{
  max-width: 640px;
}
.offres__tagline{
  margin-top: 1rem;
  font-family: var(--font-text);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--text-2);
}
.offres__title{
  font-size: var(--fs-section);
}
.offres__lede{
  margin-top: clamp(26px, 3.5vw, 40px);
  color: var(--text-2);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}

/* ---- Blocs de service (page Offres) ---- */
.svc-blocks{
  margin: clamp(72px, 10vw, 128px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.svc-block{
  background: var(--block-light);
  color: var(--block-text-2);
  padding: clamp(28px, 3.6vw, 38px);
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transform: translateY(0);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.svc-block:hover,
.svc-block:focus-within{
  transform: translateY(-8px);
  border-color: var(--white);
}
.svc-block__label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--block-text-2);
}
.svc-block__price{
  margin-top: .4rem;
  font-family: var(--font-title);
  font-size: clamp(23px, 2.6vw, 28px);
  font-variant-numeric: tabular-nums;
  color: var(--block-text);
}
.svc-block__unit{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--block-text-2);
}
.svc-block__name{
  margin-top: .85rem;
  font-size: 17px;
  color: var(--block-text);
}
.svc-block__desc{
  margin-top: .6rem;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.svc-block__list{
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.svc-block__list li{
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-body);
}
.svc-block__list li::before{
  content: "–";
  position: absolute;
  left: 0;
  color: var(--block-text-2);
  font-size: 8px;
}
.svc-block__link{
  margin-top: auto;
  padding-top: 1.25rem;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--block-text);
  text-decoration: none;
  border-bottom: 1px solid var(--block-text-2);
  transition: border-color var(--dur-fast) var(--ease);
}
.svc-block__link:hover,
.svc-block__link:focus-visible{
  border-color: var(--block-text);
}

.offres__banner{
  margin: clamp(80px, 11vw, 144px) 0;
  overflow: hidden;   /* contient le glissement de la parallaxe dans les bords de l'image */
}
.offres__banner img{
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  object-fit: cover;
  filter: grayscale(1);
}
.offres__banner figcaption{
  position: relative;
  z-index: 1;   /* la parallaxe (transform) crée un contexte d'empilement sur l'image — sans ça, elle finit peinte au-dessus du texte */
  margin-top: .75rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
}

.offres__step-label{
  display: block;
  font-family: var(--font-title);
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  margin: clamp(88px, 12vw, 152px) 0 1.25rem;
}
.offres__highlight-line{
  max-width: 62ch;
  margin-bottom: clamp(36px, 4.6vw, 56px);
  color: var(--white);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  line-height: 1.5;
}

/* ---- Tronc commun — bloc clair, comme les 3 blocs de service ---- */
.offres__common{
  background: var(--block-light);
}
.offres__common-head{
  padding: .9rem clamp(20px, 3vw, 28px);
  border-bottom: 2px solid var(--accent-on-light);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--block-text);
}
.offres__common-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--block-seam);
}
.offres__common-group{
  background: var(--block-light);
  padding: clamp(24px, 3.6vw, 34px);
}
.offres__group-label{
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--block-text);
  margin-bottom: 1rem;
}
.offres__common-group ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.offres__common-group li{
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-body);
  color: var(--block-text-2);
}
.offres__common-group li::before{
  content: "–";
  position: absolute;
  left: 0;
  font-size: 8px;
  color: var(--block-text-3);
}

/* ---- Les deux niveaux — bloc clair ---- */
.offres__tiers{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--block-seam);
  margin-top: 1px;
}
.offres__tier{
  background: var(--ink-3);
  border: 2px solid transparent;
  padding: clamp(32px, 4.6vw, 48px);
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-fast) var(--ease);
}
.offres__tier:hover{
  border-color: var(--accent-on-light);
}
.offres__tier-name{
  font-size: clamp(17px, 1.8vw, 21px);
  color: var(--block-text);
}
.offres__tier-name a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.offres__tier-name a:hover,
.offres__tier-name a:focus-visible{
  border-bottom-color: var(--accent-on-light);
}
.offres__tier-price{
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: .85rem;
}
.offres__tier-price .num{
  font-family: var(--font-title);
  font-size: clamp(28px, 3.8vw, 38px);
  font-variant-numeric: tabular-nums;
  color: var(--block-text);
  font-variation-settings: "wdth" 110;
}
.offres__tier-price .cur{
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--block-text-2);
}
.offres__tier-promise{
  margin-top: 1rem;
  color: var(--block-text-2);
  font-size: var(--fs-body);
}
.offres__tier-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  padding: .9rem 1.75rem;
  border: 2px solid var(--accent-on-light);
  color: var(--block-text);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.offres__tier-cta:hover,
.offres__tier-cta:focus-visible,
.offres__tier-cta--signature:hover,
.offres__tier-cta--signature:focus-visible{
  background: var(--accent-on-light);
  color: var(--bg);
}
.offres__diff-label{
  display: block;
  margin-top: clamp(26px, 3.5vw, 36px);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-on-light);
}
.offres__tier-diff{
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.offres__tier-diff li{
  position: relative;
  padding-left: 18px;
  color: var(--block-text);
  font-size: var(--fs-body);
}
.offres__tier-diff li::before{
  content: "–";
  position: absolute;
  left: 0;
  font-size: 9px;
  color: var(--accent-on-light);
}
.offres__choose{
  margin-top: auto;
  padding-top: clamp(26px, 3.5vw, 36px);
}
.offres__choose-label{
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  margin-bottom: .6rem;
}
.offres__choose p{
  color: var(--block-text-2);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.offres__proof{
  margin-top: 1rem;
  font-size: var(--fs-micro);
  color: var(--block-text-3);
}

/* ---- Détail dépliable — le détail concret sans dupliquer les
   listes en permanence dans les deux colonnes ---- */
.offres__detail{
  margin-top: clamp(26px, 3.5vw, 36px);
  border-top: 1px solid var(--block-line);
}
.offres__detail summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--block-text-2);
}
.offres__detail summary::-webkit-details-marker{
  display: none;
}
.offres__detail summary:hover,
.offres__detail summary:focus-visible{
  color: var(--block-text);
}
.offres__detail-icon{
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--block-text-3);
  transition: transform var(--dur-fast) var(--ease);
}
.offres__detail[open] .offres__detail-icon{
  transform: rotate(45deg);   /* le + devient visuellement un × */
}
.offres__detail-body{
  padding: 0 0 clamp(26px, 3.5vw, 36px);
}
.offres__detail-body ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.offres__detail-body li{
  position: relative;
  padding-left: 16px;
  color: var(--block-text-2);
  font-size: var(--fs-body);
}
.offres__detail-body li::before{
  content: "–";
  position: absolute;
  left: 0;
  font-size: 8px;
  color: var(--block-text-3);
}

@media (max-width: 700px){
  .offres__tiers{ grid-template-columns: 1fr; }
}

/* ---- Votre visibilité — bloc clair ---- */
.offres__visibility{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--block-seam);
}
.offres__vcard{
  background: var(--block-light);
  padding: clamp(28px, 3.8vw, 42px);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.offres__vcard-freq{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-on-light);
}
.offres__vcard-name{
  font-size: 17px;
  color: var(--block-text);
}
.offres__vcard-price{
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--block-text);
  font-variant-numeric: tabular-nums;
}
.offres__vcard-summary{
  color: var(--block-text-2);
  font-size: var(--fs-body);
}
.offres__vcard ul{
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.offres__vcard li{
  position: relative;
  padding-left: 16px;
  color: var(--block-text-2);
  font-size: var(--fs-body);
}
.offres__vcard li::before{
  content: "–";
  position: absolute;
  left: 0;
  font-size: 8px;
  color: var(--block-text-3);
}
.offres__vcard-note{
  margin-top: auto;
  padding-top: .75rem;
  color: var(--block-text-3);
  font-size: var(--fs-micro);
}

/* ---- Budget publicitaire ---- */
.offres__budget{
  border-left: 2px solid var(--accent);
  background: var(--ink-2);
  padding: clamp(30px, 4vw, 42px) clamp(30px, 4vw, 46px);
  margin-top: clamp(72px, 10vw, 128px);
}
.offres__budget p{
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.offres__budget strong{
  color: var(--white);
  font-weight: 600;
}

/* ---- Tableau récapitulatif — un seul panneau, même système que
   le reste de la page (fond --ink-2, pas deux blocs disjoints) ---- */
.offres__recap{
  background: var(--ink-2);
  padding: 0 clamp(24px, 3.6vw, 34px);
}
.offres__table-wrap{
  overflow-x: auto;
}
.offres__table{
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
}
.offres__table th,
.offres__table td{
  text-align: left;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.offres__table th{
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.offres__table td{
  font-size: var(--fs-body);
  color: var(--text);
  font-weight: 700;
}
.offres__table td.price{
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 400;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.offres__table .sub{
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  margin-top: .2rem;
}

/* ---- En plus du site — suite du même panneau ---- */
.offres__extra{
  border-top: 1px solid var(--line);
  padding-top: .5rem;
}
.offres__extra-head{
  padding: 1.25rem 0 .75rem;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.offres__extra-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--text);
}
.offres__extra-row:last-child{
  padding-bottom: 1.25rem;
}
.offres__extra-row .val{
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--white);
  text-align: right;
}

/* ---- CTA — entre le tableau récapitulatif et la clôture ---- */
.offres__cta{
  margin: clamp(56px, 8vw, 88px) 0;
  text-align: center;
}
.offres__cta-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .9rem 2rem;
  border: 2px solid var(--accent-on-light);
  color: var(--block-text);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.offres__cta-link:hover,
.offres__cta-link:focus-visible{
  background: var(--accent-on-light);
  color: var(--bg);
}

/* ---- Clôture ---- */
.offres__closing{
  border-left: 2px solid var(--accent);
  background: var(--ink-2);
  padding: clamp(34px, 4.6vw, 48px);
  margin-top: clamp(72px, 10vw, 128px);
}
.offres__closing p{
  color: var(--text-2);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
}
.offres__closing-cta{
  margin-top: .75rem;
  color: var(--text);
}

.offres__end{
  margin-top: clamp(72px, 10vw, 128px);
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-body);
}

/* ---------- Avis clients (désactivée) ----------
   Section correspondante commentée dans index.html — voir la note
   juste avant #contact pour l'activer. CSS prêt à l'emploi. */
.avis{
  padding: clamp(96px, 16vh, 176px) var(--side-margin);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.avis__photo{
  grid-column: 1 / 6;
  aspect-ratio: 1 / 1;
}
.avis__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.avis__quote{
  grid-column: 6 / 13;
}
.avis__quote blockquote{
  margin: 0;
  font-family: var(--font-title);
  font-variation-settings: "wdth" 108;
  font-weight: 600;
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.3;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.avis__author{
  margin-top: 1.5rem;
  font-size: var(--fs-body);
  color: var(--text);
}
.avis__role{
  display: block;
  margin-top: .25rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-2);
}
@media (max-width: 900px){
  .avis{ display: flex; flex-direction: column; }
  .avis__photo, .avis__quote{ grid-column: auto; }
}

/* ---------- Nous contacter ----------
   Centrée, sur demande — seule section du site dans ce cas.
   Pas de formulaire. E-mail et téléphone au même poids visuel,
   réunis puis séparés des horaires par un filet. */
.contact{
  padding: clamp(96px, 16vh, 176px) var(--side-margin-wide) clamp(120px, 16vh, 180px);
}
.contact--centered{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.contact__title{
  font-size: var(--fs-section);
}
.contact__tagline{
  margin-top: 1.25rem;
  max-width: 50ch;
  font-family: var(--font-text);
  font-size: clamp(19px, 2.2vw, 24px);
  color: var(--text-2);
}

.contact__grid{
  margin-top: clamp(56px, 8vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  width: 100%;
  max-width: 840px;
}
.contact__col{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.contact__col:first-child{
  border-right: 1px solid var(--line);
  padding-right: clamp(16px, 2.5vw, 32px);
}
.contact__col:last-child{
  padding-left: clamp(16px, 2.5vw, 32px);
  justify-content: center;
}

.contact__method{
  font-family: var(--font-title);
  font-size: clamp(22px, 2.8vw, 32px);
  color: var(--white);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease);
}
.contact__method:hover,
.contact__method:focus-visible{
  color: var(--text-2);
}
.contact__method--email{
  border-bottom: 2px solid var(--accent);
  padding-bottom: .1em;
  transition: border-bottom-width var(--dur-fast) var(--ease);
}
.contact__method--email:hover,
.contact__method--email:focus-visible{
  color: var(--white);
  border-bottom-width: 4px;
}

.contact__hours-label{
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.contact__hours-value{
  font-size: clamp(19px, 1.8vw, 22px);
  color: var(--text);
}
.contact__note{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}
.contact__devis{
  margin-top: .5rem;
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  color: var(--text-2);
}

@media (max-width: 560px){
  .contact__grid{
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 36px);
  }
  .contact__col:first-child{
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: clamp(24px, 6vw, 32px);
  }
  .contact__col:last-child{
    padding-left: 0;
  }
}

.contact__meta{
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-3);
}

/* ---------- Pied de page ---------- */
.site-footer{
  padding: clamp(32px, 5vh, 56px) var(--side-margin);
  border-top: 1px solid var(--line);
  text-align: center;
}
.site-footer__sig{
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-2);
}
.site-footer__meta{
  margin-top: .75rem;
  font-size: var(--fs-micro);
  color: var(--text-3);
}
.site-footer__meta a{
  color: var(--text-3);
  text-decoration: underline;
}
.site-footer__meta a:hover,
.site-footer__meta a:focus-visible{
  color: var(--text-2);
}

/* ---------- Mentions légales ----------
   Traitement volontairement pauvre : une colonne, pas de photo,
   pas d'animation, aucun lime sauf les liens de retour. */
.legal{
  max-width: 66ch;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 96px) var(--side-margin) clamp(96px, 14vh, 140px);
}
.legal__title{
  margin-top: 2rem;
  font-size: clamp(32px, 5vw, 52px);
}
.legal h2{
  margin-top: clamp(40px, 6vw, 56px);
  font-size: clamp(18px, 2vw, 22px);
}
.legal p{
  margin-top: 1rem;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.legal__updated{
  margin-top: clamp(40px, 6vw, 56px);
  color: var(--text-3);
  font-size: var(--fs-micro);
}
.legal__back{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.legal__back:hover,
.legal__back:focus-visible{
  text-decoration: underline;
}
.legal > .legal__back:last-child{
  margin-top: clamp(48px, 7vw, 64px);
}

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