/* ═══════════════════════════════════════════════════════════
   ONYX AGENCY — HABILLAGE
   Décor, matière et ornements.

   Aucune couleur nouvelle : tout est construit sur --accent
   (terre cuite) et les trois sables du thème. Le fichier ne
   fait qu'ajouter des couches par-dessus onyx.css, il doit
   donc être chargé APRÈS lui.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── ornements : trois intensités de terre cuite ── */
  --orn:      rgba(var(--accent-rgb), .34);
  --orn-mid:  rgba(var(--accent-rgb), .17);
  --orn-soft: rgba(var(--accent-rgb), .085);

  /* ── grain de papier ── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E");

  /* ── résille de losanges (motif de fond) ──
     La taille est portée par la variable elle-même : on peut donc
     empiler la résille au-dessus d'un autre fond sans avoir à
     recompter les couches dans un background-size. */
  --resille:
    linear-gradient(45deg,  transparent 47.4%, var(--orn-soft) 47.4% 52.6%, transparent 52.6%) 0 0 / 16px 16px,
    linear-gradient(-45deg, transparent 47.4%, var(--orn-soft) 47.4% 52.6%, transparent 52.6%) 0 0 / 16px 16px;

  /* ── papier des cartes ── */
  --papier: linear-gradient(
      170deg,
      color-mix(in srgb, var(--bg-elev) 96%, transparent) 0%,
      color-mix(in srgb, var(--bg-elev) 78%, transparent) 100%);

  /* ── ombre chaude ── */
  --ombre-chaude: 0 14px 34px rgba(var(--accent-rgb), .07);
  --ombre-haute:  0 22px 52px rgba(var(--accent-rgb), .10);
}


/* ═══ 0. LIEN D'ÉVITEMENT ═══════════════════════════════════
   Invisible tant qu'on ne l'a pas au clavier. Il apparaît au
   premier Tab, en haut à gauche, et permet de sauter les sept
   entrées du menu. Il n'est pas caché par « display:none » :
   un élément masqué de cette façon n'est jamais focusable, et
   le lien ne servirait donc à rien. On le sort du cadre. */

.skip-link {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  transform: translateY(-120%);
  padding: 14px 26px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--fc);
  font-size: .88rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 6px 20px rgba(90, 65, 45, .3);
  transition: transform .2s var(--ease);
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--text);
  outline-offset: -6px;
}

/* La cible du lien reçoit le focus par programme : sans cette
   règle, un liseré s'afficherait autour de toute la page. */
#contenu:focus { outline: none; }


/* ═══ 1. MATIÈRE DES SECTIONS ═══════════════════════════════
   Chaque section reçoit deux couches : un lavis de terre cuite
   très dilué (z-index 0) puis le grain du papier (z-index 1).
   Le contenu repasse au-dessus (z-index 2).                  */

.sec {
  position: relative;
  overflow: hidden;
}

.sec > .wrap { position: relative; z-index: 2; }

/* lavis */
.sec::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 52% at 6% 4%,
      rgba(var(--accent-rgb), .085) 0%, transparent 62%),
    radial-gradient(ellipse 52% 55% at 96% 92%,
      rgba(var(--accent-rgb), .06) 0%, transparent 60%);
}

/* le lavis bascule d'un côté à l'autre d'une section à l'autre */
#realisations::before,
#methode::before,
#tarifs::before,
#contact::before {
  background:
    radial-gradient(ellipse 58% 50% at 94% 6%,
      rgba(var(--accent-rgb), .085) 0%, transparent 62%),
    radial-gradient(ellipse 55% 55% at 4% 94%,
      rgba(var(--accent-rgb), .06) 0%, transparent 60%);
}

/* grain */
.sec::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image: var(--grain);
  mix-blend-mode: multiply;
}

/* les sections alternées prennent un soleil bas, en haut et en bas */
.sec-alt {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 5%, var(--bg-2)) 0%,
      var(--bg-2) 26%,
      var(--bg-2) 74%,
      color-mix(in srgb, var(--accent) 4%, var(--bg-2)) 100%);
}

/* filets doubles aux jointures : la page cesse d'être une suite
   de blocs posés bout à bout */
.sec-alt {
  box-shadow:
    inset 0  1px 0 var(--orn-mid),
    inset 0  4px 0 rgba(var(--accent-rgb), .05),
    inset 0 -1px 0 var(--orn-mid),
    inset 0 -4px 0 rgba(var(--accent-rgb), .05);
}


/* ═══ 2. ORNEMENTS RÉUTILISABLES ════════════════════════════ */

/* équerres d'angle — cadre de gravure */
.svc-grid,
.steps,
.prix-grid,
.faq,
.contact > div:first-child,
.prix-carte,
.avis {
  position: relative;
}

.svc-grid::before, .svc-grid::after,
.faq::before,     .faq::after,
.contact > div:first-child::before,
.contact > div:first-child::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  z-index: 3;
}

.svc-grid::before,
.faq::before,
.contact > div:first-child::before {
  top: -11px; left: -11px;
  border-top: 1px solid var(--orn);
  border-left: 1px solid var(--orn);
}
.svc-grid::after,
.faq::after,
.contact > div:first-child::after {
  bottom: -11px; right: -11px;
  border-bottom: 1px solid var(--orn);
  border-right: 1px solid var(--orn);
}


/* ═══ 3. HERO — la lumière après la pluie ═══════════════════ */

.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46vh;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 105% 100% at 50% 108%,
      rgba(var(--accent-rgb), .16) 0%,
      rgba(var(--accent-rgb), .05) 42%,
      transparent 72%);
}

/* le filet sous le logo devient un ornement */
.logo-rule {
  position: relative;
  width: 132px;
  height: 9px;
  background:
    linear-gradient(to right, transparent, var(--orn)) left center/50px 1px no-repeat,
    linear-gradient(to left,  transparent, var(--orn)) right center/50px 1px no-repeat;
}
.logo-rule::after {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .6rem;
  line-height: 1;
  color: var(--accent);
  opacity: .75;
}


/* ═══ 4. BANDEAU CONFIANCE ══════════════════════════════════ */

.trust {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 6%, var(--bg-2)),
      var(--bg-2) 55%,
      color-mix(in srgb, var(--accent) 5%, var(--bg-2)));
}
.trust::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--resille);
  opacity: .85;
}
.trust .wrap { position: relative; z-index: 1; }

/* le trait sec entre les chiffres devient un filet dégradé */
.trust-item { position: relative; }
.trust-item + .trust-item { border-left: none; }
.trust-item + .trust-item::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-hi), transparent);
}

/* petit losange au-dessus de chaque chiffre */
.trust-num::before {
  content: '✦';
  display: block;
  font-size: .5rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--accent);
  opacity: .45;
  margin-bottom: 12px;
}


/* ═══ 5. TÊTES DE SECTION ═══════════════════════════════════ */

/* les traits de l'exergue s'effacent au lieu de s'arrêter net */
.eyebrow::before {
  width: 34px;
  background: linear-gradient(to right, transparent, var(--accent));
  opacity: .6;
}
.eyebrow::after {
  width: 34px;
  background: linear-gradient(to left, transparent, var(--accent));
  opacity: .6;
}

/* ornement sous chaque titre de section */
.sec-head::after {
  content: '✦';
  display: block;
  width: 230px;
  margin: 22px auto 0;
  font-size: .62rem;
  line-height: 1;
  color: var(--accent);
  opacity: .6;
  background:
    linear-gradient(to right, transparent, var(--orn)) left center/92px 1px no-repeat,
    linear-gradient(to left,  transparent, var(--orn)) right center/92px 1px no-repeat;
}


/* ═══ 6. SERVICES ═══════════════════════════════════════════ */

.svc-grid {
  background: var(--orn-mid);
  border-color: var(--orn-mid);
  box-shadow: var(--ombre-chaude);
}

.svc {
  background: var(--papier);
  overflow: hidden;
}
.svc:hover {
  background: linear-gradient(170deg,
    var(--bg-elev) 0%,
    color-mix(in srgb, var(--bg-elev) 90%, transparent) 100%);
}

/* grand losange en filigrane dans l'angle — bien derrière le texte */
.svc > * { position: relative; z-index: 1; }
.svc::after {
  content: '✦';
  position: absolute;
  right: 14px; bottom: 2px;
  z-index: 0;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.svc:hover::after { opacity: .1; transform: translateY(-4px); }

/* le cadre de l'icône se dédouble */
.svc-ico {
  position: relative;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.svc-ico::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid var(--orn-soft);
  pointer-events: none;
}

/* le titre reçoit son filet */
h3.svc-title {
  position: relative;
  padding-bottom: 12px;
}
h3.svc-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 34px; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  opacity: .55;
}


/* ═══ 7. RÉALISATIONS ═══════════════════════════════════════ */

.work {
  position: relative;
  background: var(--papier);
  box-shadow: var(--ombre-chaude);
  transition: border-color .35s, transform .35s var(--ease), box-shadow .35s;
}
.work:hover { box-shadow: var(--ombre-haute); }

/* passe-partout : un filet intérieur, comme une gravure encadrée */
.work::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(var(--accent-rgb), .10);
  pointer-events: none;
  z-index: 2;
}

.work-shot { position: relative; }
/* voile chaud sur les vignettes, levé au survol */
.work-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--accent-rgb), .10) 0%,
    transparent 45%,
    rgba(var(--accent-rgb), .14) 100%);
  transition: opacity .55s var(--ease);
}
.work:hover .work-shot::after { opacity: .35; }

.work-body { position: relative; }
.work-body::before {
  content: '';
  position: absolute;
  top: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(to right, var(--orn), transparent 70%);
}

.work-anymetier {
  position: relative;
  padding-top: 30px;
}
.work-anymetier::before {
  content: '✦ ✦ ✦';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: .5rem;
  letter-spacing: 1.1em;
  text-indent: 1.1em;
  color: var(--accent);
  opacity: .4;
}


/* ═══ 8. À PROPOS ═══════════════════════════════════════════ */

.about-photo img { position: relative; z-index: 1; }

/* bloc de terre cuite décalé derrière le portrait */
.about-photo::before {
  content: '';
  position: absolute;
  left: -26px; bottom: -26px;
  width: 62%; height: 62%;
  z-index: 0;
  background: var(--resille), color-mix(in srgb, var(--accent) 9%, transparent);
  border-left: 1px solid var(--orn);
  border-bottom: 1px solid var(--orn);
  pointer-events: none;
}

/* le filet qui entoure la photo prend une seconde ligne */
.about-photo::after {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 60%, transparent),
              0 0 0 6px var(--orn-soft);
}

.about-sig {
  position: relative;
  padding-top: 22px;
}
.about-sig::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 90px; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  opacity: .6;
}


/* ═══ 9. MÉTHODE ═══════════════════════════════════════════ */

.steps {
  background: var(--orn-mid);
  border-color: var(--orn-mid);
  box-shadow: var(--ombre-chaude);
}
.step { background: var(--papier); }

/* le grand chiffre passe en filigrane derrière le texte */
.step > * { position: relative; z-index: 1; }
.step::before {
  position: absolute;
  top: 14px; right: 18px;
  z-index: 0;
  margin: 0;
  font-size: 3.4rem;
  opacity: .13;
  pointer-events: none;
}
.step {
  padding-top: 42px;
}
h3.step-title {
  position: relative;
  padding-bottom: 12px;
}
h3.step-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  opacity: .55;
}

/* perle sur le fil, entre deux étapes */
.step + .step::after {
  content: '';
  position: absolute;
  left: -5px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--bg-2);
  border: 1px solid var(--border-hi);
  pointer-events: none;
}

.step-when {
  position: relative;
  padding-left: 16px;
}
.step-when::before {
  content: '✦';
  position: absolute;
  left: 0; top: .05em;
  font-size: .5rem;
  color: var(--accent);
  opacity: .6;
}


/* ═══ 10. AVIS ══════════════════════════════════════════════ */

.avis {
  background: var(--papier);
  box-shadow: var(--ombre-chaude);
  transition: border-color .35s, box-shadow .35s, transform .35s var(--ease);
}
.avis:hover {
  box-shadow: var(--ombre-haute);
  transform: translateY(-3px);
}

/* guillemet d'ouverture plus présent */
.avis::before { opacity: .22; }

/* angle bas-droit */
.avis::after {
  content: '';
  position: absolute;
  right: 12px; bottom: 12px;
  width: 14px; height: 14px;
  border-right: 1px solid var(--orn);
  border-bottom: 1px solid var(--orn);
  pointer-events: none;
}

.avis-who {
  border-top: none;
  position: relative;
}
.avis-who::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(to right, var(--orn), transparent 78%);
}

.avis-disclaimer {
  position: relative;
  padding-top: 26px;
}
.avis-disclaimer::before {
  content: '✦ ✦ ✦';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: .5rem;
  letter-spacing: 1.1em;
  text-indent: 1.1em;
  font-style: normal;
  color: var(--accent);
  opacity: .4;
}


/* ═══ 11. TARIFS ════════════════════════════════════════════ */

.prix-grid {
  background: var(--orn-mid);
  border-color: var(--orn-mid);
  box-shadow: var(--ombre-chaude);
}
.prix { background: var(--papier); }
.prix:hover {
  background: linear-gradient(170deg,
    var(--bg-elev) 0%,
    color-mix(in srgb, var(--bg-elev) 90%, transparent) 100%);
}

/* la formule mise en avant reçoit sa résille et son bandeau */
.prix.star {
  background: var(--resille), var(--papier);
}
.prix.star::before { height: 3px; }
.prix.star::after {
  content: '✦';
  position: absolute;
  top: 12px; right: 16px;
  font-size: .62rem;
  color: var(--accent);
  opacity: .55;
}

.prix-nom {
  position: relative;
  padding-bottom: 14px;
}
.prix-nom::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  opacity: .5;
}

/* bandeaux : résille légère et angles marqués */
.prix-maint {
  position: relative;
  background:
    var(--resille),
    color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: var(--ombre-chaude);
}
.prix-sur-mesure {
  background:
    var(--resille),
    color-mix(in srgb, var(--accent) 12%, transparent);
}
.prix-maint::before {
  content: '';
  position: absolute;
  top: 7px; left: 7px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--orn);
  border-left: 1px solid var(--orn);
  pointer-events: none;
}
.prix-maint::after {
  content: '';
  position: absolute;
  bottom: 7px; right: 7px;
  width: 14px; height: 14px;
  border-bottom: 1px solid var(--orn);
  border-right: 1px solid var(--orn);
  pointer-events: none;
}

.prix-carte {
  background: color-mix(in srgb, var(--bg-elev) 55%, transparent);
}
.prix-carte::after {
  content: '✦';
  position: absolute;
  top: 14px; right: 18px;
  font-size: .58rem;
  color: var(--accent);
  opacity: .4;
}

.prix-note {
  position: relative;
  padding-top: 24px;
}
.prix-note::before {
  content: '✦ ✦ ✦';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: .5rem;
  letter-spacing: 1.1em;
  text-indent: 1.1em;
  font-style: normal;
  color: var(--accent);
  opacity: .4;
}


/* ─── 11 bis. LISIBILITÉ DES BANDEAUX ET DES OPTIONS ─────────
   Tout ce qui suit les trois formules tournait entre 11,8 px et
   15,4 px : illisible passé la cinquantaine, et c'est justement
   là que se lisent les conditions et les montants mensuels.
   Le texte courant repart de 18 px, les intitulés de 16 px, et
   les espacements suivent pour que rien ne se tasse.
   Les tailles sont en rem : elles ne rétrécissent pas sur
   téléphone et suivent la taille de police réglée par le
   visiteur dans son navigateur.                              */

/* ── bandeaux : sur mesure, maintenance, réseaux sociaux ── */
.prix-maint {
  padding: 26px 30px;
  gap: 18px 30px;
}
.prix-maint-txt { flex: 1 1 340px; }

.prix-maint-nom {
  font-size: 1rem;          /* 11,8 → 16 px */
  letter-spacing: .16em;
  margin-bottom: 10px;
}
.prix-maint-desc {
  font-size: 1.16rem;       /* 15,4 → 18,6 px */
  line-height: 1.72;
}
.prix-maint-prix { font-size: 2.15rem; }
.prix-maint-prix span { font-size: 1.06rem; }

/* le palier haut de gamme reste au-dessus des deux autres */
.prix-sur-mesure { padding: 32px 34px; }
.prix-sur-mesure .prix-maint-nom  { font-size: 1.12rem; }
.prix-sur-mesure .prix-maint-desc { font-size: 1.24rem; line-height: 1.7; }
.prix-sur-mesure .prix-maint-prix { font-size: 2.8rem; }

/* ── liste à la carte ── */
.prix-carte { padding: 26px 30px 28px; }
.prix-carte-nom {
  font-size: 1rem;
  letter-spacing: .16em;
  margin-bottom: 18px;
}
.prix-carte-liste { gap: 13px 30px; }
.prix-carte-liste li {
  font-size: 1.16rem;
  line-height: 1.6;
  padding-left: 24px;
}
.prix-carte-liste li::before { top: -.02em; }

/* ── les trois formules : elles doivent dominer le reste ──
   Ce sont elles que le visiteur vient chercher. Elles repassent
   donc au-dessus des bandeaux d'options : 48 px pour les
   montants, contre 40 px au « Sur devis » et 34 px aux
   mensualités. */
.prix { padding: 38px 30px 34px; }

.prix-nom {
  font-size: 1rem;          /* 11,8 → 16 px */
  letter-spacing: .16em;
}
.prix-avant   { font-size: 1.06rem; }
.prix-montant { font-size: 3rem; }        /* 40 → 48 px */
.prix-montant sup { font-size: 1.25rem; }

.prix-liste { gap: 12px; margin-top: 26px; }
.prix-liste li {
  font-size: 1.16rem;       /* 15,4 → 18,6 px */
  line-height: 1.6;
  padding-left: 24px;
}
.prix-pour {
  font-size: 1.06rem;       /* 14,4 → 17 px */
  line-height: 1.65;
  padding-top: 20px;
}

/* le palier sur mesure repasse sous les trois formules */
.prix-sur-mesure .prix-maint-prix { font-size: 2.5rem; }

/* ── mention de bas de section et bouton ── */
.prix-note { font-size: 1.14rem; }
#tarifs .btn {
  font-size: .95rem;        /* 13,1 → 15,2 px, capitales espacées */
  padding: 18px 40px;
}

@media (max-width: 620px) {
  .prix            { padding: 30px 24px 28px; }
  .prix-maint      { padding: 22px 22px; }
  .prix-sur-mesure { padding: 26px 24px; }
  .prix-carte      { padding: 22px 22px 24px; }
  .prix-montant    { font-size: 2.7rem; }
  .prix-sur-mesure .prix-maint-prix { font-size: 2.3rem; }
}


/* ═══ 12. FAQ ═══════════════════════════════════════════════ */

.faq {
  padding: 8px clamp(18px, 3vw, 34px);
  background: var(--papier);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-chaude);
}
.faq-item:last-child { border-bottom: none; }

.faq-q { padding-left: 28px; }
.faq-q::before {
  content: '✦';
  position: absolute;
  left: 2px; top: 27px;
  font-size: .55rem;
  color: var(--accent);
  opacity: .5;
  transition: opacity .25s;
}
.faq-item.open .faq-q::before { opacity: 1; }
.faq-a-in { padding-left: 28px; }


/* ═══ 13. CONTACT ═══════════════════════════════════════════ */

.contact > div:first-child {
  padding: clamp(22px, 3vw, 34px);
  background: var(--papier);
  border: 1px solid var(--border);
  box-shadow: var(--ombre-chaude);
}

.cd {
  background: var(--papier);
  position: relative;
}
.cd::after {
  content: '';
  position: absolute;
  right: 10px; bottom: 10px;
  width: 10px; height: 10px;
  border-right: 1px solid var(--orn-mid);
  border-bottom: 1px solid var(--orn-mid);
  pointer-events: none;
  transition: border-color .3s;
}
.cd:hover::after { border-color: var(--orn); }

.cd-ico { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.contact-promise {
  padding: 14px 18px;
  border: 1px solid var(--orn-mid);
  background:
    var(--resille),
    color-mix(in srgb, var(--accent) 5%, transparent);
}


/* ═══ 14. CRÊTE & PIED DE PAGE ══════════════════════════════ */

/* la crête devient un horizon : ciel chaud derrière les sommets */
.ridge {
  position: relative;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 4%, var(--bg-2)) 0%,
      color-mix(in srgb, var(--accent) 11%, var(--bg-2)) 100%);
}
.ridge::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 130% at 50% 118%,
    rgba(var(--accent-rgb), .22) 0%, transparent 70%);
}
.ridge svg { position: relative; z-index: 1; }
.ridge .far  { opacity: .3; }
.ridge .near { opacity: .62; }

.foot {
  position: relative;
  overflow: hidden;
  border-top-color: var(--orn-mid);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 9%, var(--bg-2)) 0%,
      var(--bg-2) 40%);
}
.foot::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--resille);
  opacity: .7;
}
.foot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .45;
  background-image: var(--grain);
  mix-blend-mode: multiply;
}
.foot .wrap { position: relative; z-index: 1; }

.foot-brand {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.foot-brand::after {
  content: '✦';
  position: absolute;
  left: 0; bottom: -4px;
  font-size: .48rem;
  color: var(--accent);
  opacity: .5;
}

.foot-legal {
  border-top: none;
  position: relative;
}
.foot-legal::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(340px, 80%); height: 1px;
  background: linear-gradient(to right, transparent, var(--orn), transparent);
}


/* ═══ 15. PAGES LÉGALES ═════════════════════════════════════ */

.legal h2 {
  position: relative;
  padding-left: 22px;
}
.legal h2::before {
  content: '✦';
  position: absolute;
  left: 0; top: .1em;
  font-size: .5rem;
  opacity: .6;
}


/* ═══════════════════════════════════════════════════════════
   16. LISIBILITÉ GÉNÉRALE

   Tes clients sont commerçants et artisans : beaucoup ont entre
   45 et 70 ans, et lisent souvent sur téléphone, dehors, sans
   leurs lunettes. La feuille d'origine descendait jusqu'à
   9,6 px sur certaines mentions — c'est du décoratif, pas du
   lisible.

   Trois planchers, appliqués partout :
     · texte courant ............ 18 px
     · texte secondaire ......... 17 px
     · intitulés en capitales ... 13 px

   Tout est en rem : si le visiteur a agrandi la police par
   défaut de son navigateur, la page suit. Les proportions et
   la hiérarchie d'origine sont conservées — rien n'est
   uniformisé, tout est remonté du même geste.
   ═══════════════════════════════════════════════════════════ */

/* ── base ── */
body { font-size: 1.14rem; }          /* 17 → 18,2 px */

/* ── navigation ──
   Sept entrées à tenir sur une seule ligne : la taille monte,
   mais l'espacement des lettres et les écarts se resserrent
   d'autant, sinon le menu déborde avant le point de bascule
   du menu burger (900 px). */
.nav-links { gap: 21px; }
.nav-links a {
  font-size: .82rem;                  /* 11,8 → 13,1 px */
  letter-spacing: .13em;
}
.nav-cta {
  font-size: .8rem;
  letter-spacing: .12em;
  padding: 11px 20px;
}
.nav-brand { font-size: 1.2rem; letter-spacing: .34em; text-indent: .34em; }

/* ── hero ── */
.logo-sub    { font-size: .82rem; }
.hero-loc    { font-size: 1rem; }
.hero-scroll { font-size: .8rem; }    /* 9,3 → 12,8 px */

/* ── boutons, partout ── */
.btn { font-size: .92rem; padding: 17px 36px; }   /* 13,1 → 14,7 px */

/* ── bandeau confiance ── */
.trust-lab { font-size: .8rem; }      /* 10,6 → 12,8 px */

/* ── têtes de section ── */
.eyebrow  { font-size: .8rem; }       /* 10,9 → 12,8 px */
.sec-lead { font-size: 1.18rem; }     /* 17 → 18,9 px */

/* ── services ── */
.svc-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
h3.svc-title { font-size: 1.08rem; }  /* 15,4 → 17,3 px */
.svc p       { font-size: 1.12rem; }  /* 16 → 17,9 px */
.svc-list    { gap: 11px; }
.svc-list li { font-size: 1.1rem; padding-left: 22px; }   /* 15,2 → 17,6 px */
.svc-list li::before { font-size: .68rem; }

/* ── réalisations ── */
.work-badge  { font-size: .8rem; padding: 5px 12px; letter-spacing: .16em; }   /* 9 → 12,8 px */
h3.work-title { font-size: 1.12rem; }
.work-sector { font-size: 1.06rem; }  /* 14,9 → 17 px */
.work-more   { font-size: .78rem; }   /* 10,6 → 12,5 px */
.work-anymetier { font-size: 1.2rem; }

/* ── fenêtres de démonstration ── */
.modal-badge  { font-size: .8rem; letter-spacing: .16em; }
.modal-sector { font-size: 1.14rem; }
.modal-feats  { gap: 12px; }
.modal-feats li { font-size: 1.12rem; line-height: 1.65; padding-left: 24px; }

/* ── à propos ── */
.about-sig  { font-size: 1.14rem; }
.about-role { font-size: .8rem; }     /* 10,6 → 12,8 px */

/* ── méthode ── */
h3.step-title { font-size: 1rem; }    /* 14,1 → 16 px */
.step p       { font-size: 1.1rem; }  /* 15,5 → 17,6 px */
.step-when    { font-size: .8rem; }   /* 9,6 → 12,8 px */
.step-when::before { font-size: .6rem; }

/* ── avis ── */
.avis-grid > .avis { flex: 1 1 275px; max-width: 345px; }
.avis-txt  { font-size: 1.16rem; }    /* 16,6 → 18,6 px */
.avis-name { font-size: .94rem; }
.avis-meta { font-size: .8rem; }      /* 9,6 → 12,8 px */
.avis-disclaimer { font-size: 1.04rem; }
.avis-stars svg { width: 16px; height: 16px; }

/* ── FAQ ── */
.faq-q    { font-size: 1.24rem; }     /* 18,2 → 19,8 px */
.faq-a-in { font-size: 1.14rem; }

/* ── contact ── */
.field label { font-size: .8rem; }    /* 10,6 → 12,8 px */
.field input,
.field select,
.field textarea {
  font-size: 1.1rem;                  /* 16 → 17,6 px */
  padding: 15px 16px;
}
.field textarea { min-height: 148px; }
.form-legal { font-size: .96rem; line-height: 1.65; }
.form-msg   { font-size: 1.08rem; }
.cd-lab { font-size: .8rem; }         /* 9,9 → 12,8 px */
.cd-val { font-size: 1.08rem; }       /* 15,4 → 17,3 px */
.contact-promise { font-size: .8rem; }

/* ── pied de page ── */
.foot-brand   { font-size: 1.12rem; }
.foot-links a { font-size: 1.04rem; } /* 14,1 → 16,6 px */
.foot-legal   { font-size: .94rem; }  /* 12,8 → 15 px */

/* ── pages légales ── */
.legal h2    { font-size: 1.04rem; }
.legal-date  { font-size: .78rem; }
.legal p, .legal li { font-size: 1.14rem; }

/* ── téléphone ──
   La base ne redescend plus à 16 px : c'est justement là que
   la lisibilité compte le plus. */
@media (max-width: 620px) {
  body { font-size: 1.1rem; }         /* 17,6 px */
  .btn { font-size: .88rem; padding: 16px 26px; }
  .faq-q { font-size: 1.16rem; }
  .avis-txt { font-size: 1.12rem; }
}


/* ═══════════════════════════════════════════════════════════
   17. BASCULE DU MENU — 900 → 1040 px

   Constat de mesure, indépendant de l'habillage : entre 900 et
   environ 1000 px, les sept entrées du menu ne tiennent pas sur
   une ligne et repassent en dessous (859 px nécessaires pour
   817 disponibles à 905 px, feuille d'origine seule). Le menu
   burger doit donc prendre le relais plus tôt.

   Les règles reprennent à l'identique celles de onyx.css, à
   1040 px au lieu de 900 : rien de neuf, seul le seuil change.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 1040px) {
  .nav-burger { display: block; }

  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 82px 0 26px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    transform: translateY(-100%);
    transition: transform .4s var(--ease);
    z-index: -1;
  }
  .nav.open .nav-links { transform: none; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a {
    display: block;
    padding: 16px 0;
    font-size: .92rem;          /* menu déplié : on peut respirer */
    letter-spacing: .16em;
    border-top: 1px solid var(--border);
  }
  .nav-links a::after { display: none; }
  .nav-cta { display: none; }
}


/* ═══ 18. ADAPTATIONS ═══════════════════════════════════════ */

@media (max-width: 900px) {
  /* la perle des étapes n'a plus de fil à tenir en colonne */
  .step + .step::after {
    left: 50%;
    top: -5px;
    transform: translateX(-50%) rotate(45deg);
  }
  .about-photo::before { left: -16px; bottom: -16px; }
}

@media (max-width: 620px) {
  .svc-grid::before, .svc-grid::after,
  .faq::before,      .faq::after,
  .contact > div:first-child::before,
  .contact > div:first-child::after { display: none; }

  .svc::after { font-size: 3.4rem; }
  .work::after { inset: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc:hover::after { transform: none; }
  .avis:hover { transform: none; }
}

/* le décor ne s'imprime pas */
@media print {
  .sec::before, .sec::after,
  .hero::after, .trust::before,
  .foot::before, .foot::after,
  .svc::after, .work::after, .work-shot::after,
  .about-photo::before, .ridge::before { display: none !important; }
  .sec-alt { background: none; box-shadow: none; }
}