/* ============================================================================
   DEVISALY — v4 « SIMPLE » · 2026-10-18
   ---------------------------------------------------------------------------
   Reprise de la structure de `cruip/tailwind-landing-page-template` (« Simple »,
   MIT) : une seule colonne d'axe, un conteneur de 1 152 px, des filets qui
   s'effacent aux extrémités, et des blocs centrés.

   C'est la réponse au « manque de symétrie » : ici, TOUT partage la même largeur,
   le même axe et le même rythme. Trois colonnes, toujours trois. Un titre de
   section, toujours centré au-dessus. Aucune carte ne dépasse, aucune n'est
   plus haute : `align-items: stretch` et `height:100%` dans chaque grille.

   Ce qui vient du template : le conteneur, les filets dégradés, le héros centré
   avec bandeau d'avis, la carte produit 16/9, la bande de chiffres, la carte
   d'appel final avec sa lueur.
   Ce qui vient de nous : la palette, la typographie, la maquette, le comparateur.
   ========================================================================== */

:root {
  --conteneur: 1152px;
  --gouttiere: 24px;

  --fond: #ffffff;
  --fond-2: #f7f7f5;
  --encre: #14161c;
  --encre-2: #3d4149;
  --encre-3: #6b7079;
  --filet: rgb(20 22 28 / .10);
  --filet-fort: rgb(20 22 28 / .18);
  --ambre: #9a6a24;
  --succes: #15803d;

  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --ombre-s: 0 1px 2px rgb(20 22 28 / .06), 0 1px 3px rgb(20 22 28 / .04);
  --ombre-m: 0 10px 28px -12px rgb(20 22 28 / .22), 0 2px 6px -2px rgb(20 22 28 / .08);
  --ombre-l: 0 40px 80px -40px rgb(20 22 28 / .35);
}

*, *::before, *::after { box-sizing: border-box; }
/* ⚠️ `.ciel` (nappes ambre à gauche, bleu à droite) reste visible derrière une page
   blanche : sur le template, le fond est PLAT. On la coupe ici. */
.ciel { display: none !important; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; }

/* --- LE CONTENEUR ET LES FILETS ------------------------------------------ */
.grille {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
/* le filet du template : un trait qui s'efface aux deux bouts */
.filet {
  border: 0;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--filet-fort), transparent) 1;
  margin: 0;
}

/* --- LES BLOCS ------------------------------------------------------------ */
.sec { padding: clamp(56px, 8vw, 96px) 0; }
.sec--serre { padding: clamp(32px, 5vw, 56px) 0; }
.sec__tete { max-width: 720px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.sec__tete--gauche { margin-left: 0; text-align: left; }
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 600; color: var(--encre-3);
  padding: 4px 12px; border: 1px solid var(--filet); border-radius: 999px;
  background: #fff;
}
.kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--succes); }
.titre-sec { font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.035em; }
.dit { margin-top: 16px; font-size: 1.0625rem; color: var(--encre-2); line-height: 1.65; }

/* --- LES BOUTONS ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: 10px; border: 1px solid transparent;
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--primaire { background: var(--encre); color: #fff; box-shadow: var(--ombre-s); }
.btn--primaire:hover { background: #22252d; transform: translateY(-1px); box-shadow: var(--ombre-m); }
.btn--second { background: #fff; color: var(--encre); border-color: var(--filet); box-shadow: var(--ombre-s); }
.btn--second:hover { border-color: var(--filet-fort); background: #fafaf9; }
.btn__fleche { transition: transform .2s var(--ease); }
.btn:hover .btn__fleche { transform: translateX(2px); }

/* --- LE HÉROS ------------------------------------------------------------- */
/* ⚠️ `.heros` est aussi une grille à deux colonnes dans lumiere-clair.css : sans
   ce `display:block`, le contenu du héros se retrouvait enfermé dans la première
   colonne (592 px au lieu de 1 152). */
.heros {
  display: block;
  grid-template-columns: none;
  padding: clamp(104px, 9vw, 128px) 0 0;
  text-align: center;
  background:
    radial-gradient(56% 42% at 50% -6%, rgb(20 22 28 / .05), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fdfdfc 100%);
}
.heros__bandeau {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 0;
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--filet-fort), transparent) 1;
}
.heros__avis { display: flex; margin-right: 4px; }
.heros__avis img, .heros__avis span {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid #fff; margin-left: -10px;
  background: var(--encre); color: #fff;
  display: grid; place-items: center;
  font-size: .6875rem; font-weight: 600;
}
.heros__avis :first-child { margin-left: 0; }
.heros__avis-note { font-size: .8125rem; color: var(--encre-3); }
.heros h1 {
  margin: clamp(24px, 4vw, 40px) auto 0;
  max-width: 20ch;
  font-size: clamp(2.375rem, 5.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.heros__sous { margin: 20px auto 0; max-width: 620px; font-size: clamp(1rem, 1.5vw, 1.125rem); color: var(--encre-2); line-height: 1.6; }
.heros__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 32px auto 0; padding: 22px 0;
  max-width: 620px;
  border-top: 1px solid transparent; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--filet-fort), transparent) 1;
}
.heros__produit { margin: clamp(40px, 6vw, 64px) auto 0; max-width: 820px; padding-bottom: clamp(48px, 7vw, 88px); }
.produit {
  position: relative;
  border-radius: var(--r-m);
  background: #fff;
  border: 1px solid var(--filet);
  box-shadow: var(--ombre-l);
  overflow: hidden;
}
.produit__barre {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  background: #f6f6f4; border-bottom: 1px solid var(--filet);
}
.produit__barre i { width: 8px; height: 8px; border-radius: 50%; background: rgb(20 22 28 / .14); }
.produit__barre span { margin-left: 8px; font-size: .75rem; color: var(--encre-3); }
.produit__ecran { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; background: #fff; }

/* --- LA BANDE DE CHIFFRES ------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres > div {
  padding: 28px 24px; text-align: center;
  border-left: 1px solid var(--filet);
}
.chiffres > div:first-child { border-left: 0; }
.chiffres b { display: block; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.chiffres span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--encre-3); }

/* --- LES CARTES ----------------------------------------------------------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.carte {
  display: flex; flex-direction: column; gap: 10px;
  height: 100%;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  box-shadow: var(--ombre-s);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.carte:hover { border-color: var(--filet-fort); box-shadow: var(--ombre-m); transform: translateY(-2px); }
.carte__num {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--fond-2); border: 1px solid var(--filet);
  font-size: .8125rem; font-weight: 700; color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.carte h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }
.carte p { font-size: .9375rem; color: var(--encre-2); line-height: 1.6; }
.carte__pied { margin-top: auto; padding-top: 14px; font-size: .8125rem; color: var(--encre-3); }

/* --- LA GALERIE DE SITES -------------------------------------------------- */
.site { display: flex; flex-direction: column; height: 100%; }
.site__cadre {
  border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--filet); background: #fff;
  box-shadow: var(--ombre-s);
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.site:hover .site__cadre { box-shadow: var(--ombre-m); border-color: var(--filet-fort); transform: translateY(-3px); }
.site__vue { aspect-ratio: 16 / 10.5; overflow: hidden; }
.site__vue img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.site__pied { padding: 14px 4px 0; }
.site__nom { font-size: .9375rem; font-weight: 600; }
.site__quoi { font-size: .8125rem; color: var(--encre-3); margin-top: 2px; }

/* --- LE COMPARATEUR ------------------------------------------------------- */
.comparateur { --p: 52%; position: relative; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--filet); box-shadow: var(--ombre-m); user-select: none; touch-action: pan-y; background: #fff; }
.comparateur__panneau { position: relative; aspect-ratio: 16 / 7.6; }
.comparateur__couche { position: absolute; inset: 0; overflow: hidden; }
.comparateur__couche > * { width: 100%; height: 100%; }
.comparateur__couche--apres { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
/* ⚠️ La couche « avant » est visible sur sa MOITIÉ DROITE (la gauche est recouverte
   par la page Devisaly). Un contenu centré se faisait couper au milieu d'un mot :
   on le place dans la partie qui reste visible. */
.generique { background: #f1f0ec; display: grid; place-items: center; text-align: center; padding: 6% 8% 6% 52%; }
.generique__in { display: grid; gap: 10px; justify-items: center; max-width: 34ch; }
.generique__logo { width: 34px; height: 34px; border-radius: 8px; background: #d9d5cc; }
.generique__t { font-size: clamp(1rem, 2.2vw, 1.4rem); font-weight: 600; color: #6b6862; }
.generique__p { font-size: clamp(.6875rem, 1.1vw, .8125rem); color: #8d8a83; line-height: 1.6; }
.generique__b { margin-top: 6px; padding: 7px 14px; border-radius: 6px; background: #dad6cd; color: #7c7973; font-size: .6875rem; font-weight: 600; }
.devisaly-page { background: #fff; display: grid; grid-template-columns: 1fr; }
.devisaly-page__in { padding: 6% 8%; display: flex; flex-direction: column; height: 100%; }
.devisaly-page__marque { font-size: clamp(.5rem, .8vw, .6875rem); font-weight: 700; color: #14151a; }
.devisaly-page__kicker { margin-top: 14px; font-size: clamp(.5rem, .82vw, .6875rem); font-weight: 600; color: var(--ambre); }
.devisaly-page__t { margin-top: 6px; font-size: clamp(.95rem, 2.3vw, 1.7rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; color: #14151a; }
.devisaly-page__p { margin-top: 8px; font-size: clamp(.5625rem, .95vw, .75rem); color: #6a6b73; line-height: 1.5; max-width: 30ch; }
.devisaly-page__prix { margin-top: 12px; display: grid; max-width: 300px; }
.devisaly-page__prix p { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #ece7dd; font-size: clamp(.5rem, .9vw, .75rem); color: #55565e; }
.devisaly-page__cta { margin-top: auto; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #14151a; color: #fff; font-size: clamp(.5rem, .82vw, .6875rem); font-weight: 600; }
.comparateur__poignee {
  position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px;
  background: #fff; border: 0; padding: 0; cursor: ew-resize; z-index: 3;
  box-shadow: 0 0 0 1px rgb(20 22 28 / .14), 0 0 24px rgb(20 22 28 / .2);
}
.comparateur__poignee::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 10px rgb(20 22 28 / .22), 0 0 0 1px rgb(20 22 28 / .06);
}
.comparateur__poignee::before {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; font-size: .75rem; color: var(--encre-3); letter-spacing: .06em;
}
.comparateur__etq {
  position: absolute; top: 14px; z-index: 2; pointer-events: none;
  font-size: .6875rem; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: rgb(255 255 255 / .9); border: 1px solid var(--filet); color: var(--encre-3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.comparateur__etq--g { left: 14px; color: var(--encre); }
.comparateur__etq--d { right: 14px; }

/* --- L'APPEL FINAL -------------------------------------------------------- */
.appel {
  position: relative; overflow: hidden;
  border-radius: var(--r-l);
  background: var(--encre);
  color: #fff;
  text-align: center;
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 64px);
  box-shadow: var(--ombre-l);
}
.appel::before {
  content: ""; position: absolute; left: 50%; bottom: -40%; transform: translateX(-50%);
  width: 620px; height: 320px; border-radius: 50%;
  border: 18px solid rgb(154 106 36 / .5); filter: blur(56px);
  pointer-events: none;
}
.appel h2 { position: relative; font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -.035em; }
.appel p { position: relative; margin: 14px auto 0; max-width: 46ch; color: rgb(255 255 255 / .72); }
.appel__actions { position: relative; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.appel .btn--primaire { background: #fff; color: var(--encre); }
.appel .btn--primaire:hover { background: #f2f1ee; }
.appel .btn--second { background: transparent; color: #fff; border-color: rgb(255 255 255 / .28); box-shadow: none; }
.appel .btn--second:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .45); }

/* Pas d'entrée en fondu : chaque bloc est là. La seule animation de la page est
   le mouvement du comparateur, qui répond à la main. */

/* --- ÉCRANS ÉTROITS ------------------------------------------------------- */
@media (max-width: 960px) {
  .grille-3 { grid-template-columns: 1fr; }
  .grille-2 { grid-template-columns: 1fr; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffres > div:nth-child(3) { border-left: 0; }
  .chiffres > div { border-top: 1px solid var(--filet); }
  .chiffres > div:nth-child(-n+2) { border-top: 0; }
  .sec__tete--gauche { text-align: center; margin-inline: auto; }
  .comparateur__etq { display: none; }
}
@media (max-width: 620px) {
  :root { --gouttiere: 20px; }
  /* la barre sur deux lignes fait 110 px : le héros commençait dessous */
  .heros { padding-top: 132px; }
  .heros__avis-note { display: none; }
  .heros__actions .btn { width: 100%; }
  .chiffres b { font-size: 1.375rem; }
  .carte { padding: 20px; }
}


/* --- 10. LE PIED, DANS LA GRILLE DU SITE ---------------------------------- */
/* `.pied a` est en display:block (hérité de la v3) : la ligne du bas cassait
   « Mentions légales · CGV » sur trois lignes. */
.pied__bas a { display: inline; padding: 0; }
.pied__bas span { display: inline-flex; gap: 6px; align-items: baseline; }
.pied .bloc__int { width: 100%; max-width: calc(var(--conteneur) + 2 * var(--gouttiere)); padding-inline: var(--gouttiere); }

/* --- 11. LES BLOCS DE LA PAGE AGENCE -------------------------------------- */

/* le rapport d'audit, dans le héros */
.audit-carte {
  text-align: left;
  border-radius: var(--r-m);
  border: 1px solid var(--filet);
  background: #fff;
  box-shadow: var(--ombre-l);
  overflow: hidden;
}
.audit-carte__tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--filet);
  background: #fafaf8;
}
.audit-carte__no { font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; }
.audit-carte__etat {
  font-size: .75rem; color: var(--succes); font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: rgb(21 128 61 / .08);
}
.audit-carte__lignes { padding: 8px 22px; }
.audit-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px;
  align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--filet);
}
.audit-ligne:last-child { border-bottom: 0; }
.audit-ligne span { font-size: .9375rem; color: var(--encre-2); }
.audit-ligne b { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.audit-ligne i { font-size: .75rem; color: var(--encre-3); font-style: normal; min-width: 62px; text-align: right; }
.audit-ligne--total span { color: var(--encre); font-weight: 600; }
.audit-ligne--total b { color: #15803d; }
.audit-carte__note { padding: 0 22px 18px; font-size: .75rem; color: var(--encre-3); }

/* le duo « aujourd'hui / avec nous » */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.duo__col {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  padding: 28px;
}
.duo__col--avant { background: #f7f7f5; }
.duo__col--apres { background: #fff; box-shadow: var(--ombre-m); border-color: var(--filet-fort); }
.duo__titre { font-size: .8125rem; font-weight: 600; color: var(--encre-3); letter-spacing: .01em; }
.duo__col--apres .duo__titre { color: var(--encre); }
.duo ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.duo li { font-size: .9375rem; color: var(--encre-2); line-height: 1.5; padding-left: 18px; position: relative; }
.duo li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 1px; background: var(--encre-3); }
.duo__note { max-width: 68ch; margin: 24px auto 0; font-size: .875rem; color: var(--encre-3); line-height: 1.65; text-align: center; }

@media (max-width: 960px) {
  .duo { grid-template-columns: 1fr; }
  .audit-ligne { grid-template-columns: 1fr auto; }
  .audit-ligne i { display: none; }
}

/* les étiquettes du bandeau : des mots, pas des pastilles qui se chevauchent */
.heros__tags { display: inline-flex; gap: 6px; }
.heros__tags span {
  font-size: .6875rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--filet); color: var(--encre-3); background: #fff;
}
/* le titre de l'agence tient sur deux lignes, pas trois */
.heros--agence h1 { max-width: 26ch; }

/* --- 12. CARTES À LISTE ET RÉSULTAT DE RECHERCHE -------------------------- */
.carte--large { padding: 28px; }
.carte__liste { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.carte__liste li {
  position: relative; padding-left: 20px;
  font-size: .9375rem; color: var(--encre-2); line-height: 1.5;
}
.carte__liste li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 8px; height: 4px; border-left: 1.5px solid var(--ambre); border-bottom: 1.5px solid var(--ambre);
  transform: rotate(-45deg);
}

/* la fausse page de résultats, dans le héros */
.serp {
  text-align: left; background: #fff;
  border: 1px solid var(--filet); border-radius: var(--r-m);
  box-shadow: var(--ombre-l); overflow: hidden;
}
.serp__tete {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-bottom: 1px solid var(--filet); background: #fafaf8;
}
.serp__loupe { color: var(--encre-3); font-size: 1rem; }
.serp__req {
  flex: 1; font-size: .875rem; color: var(--encre);
  border: 1px solid var(--filet); border-radius: 999px; padding: 6px 14px; background: #fff;
}
.serp__liste { padding: 6px 20px 10px; }
.serp__res { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.serp__res:last-child { border-bottom: 0; }
.serp__site { font-size: .75rem; color: var(--encre-3); }
.serp__site span { color: var(--ambre); font-weight: 600; }
.serp__titre { margin-top: 3px; font-size: .9375rem; font-weight: 600; color: #1a0dab; letter-spacing: -.01em; }
.serp__dit { margin-top: 3px; font-size: .8125rem; color: var(--encre-3); line-height: 1.5; max-width: 78ch; }
.serp__res--nous { position: relative; }
.serp__res--nous::before {
  content: ""; position: absolute; left: -20px; top: 12px; bottom: 12px; width: 3px; background: var(--ambre);
}
.serp__note { padding: 0 20px 16px; font-size: .75rem; color: var(--encre-3); }

/* la marque en bas de casse, poids 600 : elle tient à côté du signe */
.nav__marque span { font-weight: 600; letter-spacing: -.02em; }

/* la description du pied, quand la page parle de l'agence et plus du seul produit */
.pied--agence .pied__dit { max-width: 34ch; }

/* --- 13. LA PROFONDEUR ---------------------------------------------------- */
/* Trois effets, et rien de plus : un objet en volume, une carte qui s'incline
   sous la main, une lumière qui suit le pointeur sur les cartes. */

/* l'objet : un globe de points, posé sur le fond, jamais devant le texte */
.globe-sec { position: relative; overflow: hidden; }
.globe-cadre {
  position: relative;
  width: min(100%, 620px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 58%, transparent 78%);
}
#globe { width: 100%; height: 100%; display: block; }
.globe-legende {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  margin-top: -18px; font-size: .75rem; color: var(--encre-3);
}
.globe-legende span { display: inline-flex; align-items: center; gap: 6px; }
.globe-legende i { width: 5px; height: 5px; border-radius: 50%; background: var(--ambre); }

/* la carte qui s'incline : 6° au maximum, ombre qui suit */
[data-incline] {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
[data-incline]:hover { box-shadow: var(--ombre-l); }
/* la lumière : un reflet qui suit le pointeur, posé au-dessus du contenu */
[data-incline]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgb(154 106 36 / .10), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
  pointer-events: none;
}
[data-incline]:hover::after { opacity: 1; }
.produit { position: relative; }

/* le relief du grand bloc d'appel : un plan incliné, pas un dégradé plat */
.appel { transform-style: preserve-3d; }
.appel::after {
  content: ""; position: absolute; left: 50%; top: -60%;
  width: 90%; height: 90%; transform: translateX(-50%) rotateX(62deg);
  background: radial-gradient(60% 60% at 50% 100%, rgb(154 106 36 / .28), transparent 70%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-incline] { transition: none; }
  [data-incline]:hover { transform: none; }
}

/* les ancres ne se cachent plus sous la barre */
#site, #reste, #comparer { scroll-margin-top: 96px; }

/* sous 620 px, la barre de l'agence garde trois entrées : la quatrième sortait
   de l'écran à moitié, ce qui se lit comme un défaut, pas comme un défilement. */
@media (max-width: 620px) {
  .nav__liens { gap: 14px; font-size: .8125rem; }
  .nav__liens a:last-child { display: none; }
}

/* le renvoi vers l'offre artisan, sur une seule ligne discrète */
.bandeau-produit {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 24px;
  border: 1px solid var(--filet); border-radius: var(--r-m);
  background: var(--fond-2);
}
.bandeau-produit p { font-size: .9375rem; color: var(--encre-2); max-width: 68ch; }
.bandeau-produit strong { color: var(--encre); font-weight: 600; }
@media (max-width: 800px) {
  .bandeau-produit { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ==========================================================================
   14. LES PAGES INTÉRIEURES, DANS LA LANGUE DE L'ACCUEIL
   --------------------------------------------------------------------------
   Les pages de l'intérieur gardent leur balisage (`.bloc`, `.entete`,
   `.registre`, `.panneau`…) : on ne réécrit pas 24 gabarits pour changer une
   échelle typographique. On redéfinit ces classes avec les jetons de la v5 —
   même conteneur, mêmes filets, mêmes boutons, mêmes rayons. C'est ce qui fait
   qu'on ne voit plus deux sites.
   ========================================================================== */

/* --- le conteneur et le rythme ------------------------------------------- */
.bloc { padding: clamp(40px, 6vw, 80px) 0; }
.bloc__int {
  width: 100%;
  max-width: calc(var(--conteneur) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* --- les en-têtes de page ------------------------------------------------- */
.entete { padding: 0 0 clamp(28px, 4vw, 48px); }
.entete__titre {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  max-width: 24ch;
}
.entete__dit { margin-top: 18px; max-width: 62ch; }
.surtitre {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--encre-3);
  padding: 4px 12px; border: 1px solid var(--filet); border-radius: 999px; background: #fff;
}
.chapeau { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; color: var(--encre-2); }
.titre-l { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.035em; }
.titre-m { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.2; letter-spacing: -.03em; }
.aide { font-size: .8125rem; color: var(--encre-3); }

/* --- les boutons : les mêmes que l'accueil, sans exception --------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: 10px; border: 1px solid transparent;
  background: var(--encre); color: #fff;
  font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  box-shadow: var(--ombre-s);
  transition: background-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.bouton:hover { background: #22252d; transform: translateY(-1px); box-shadow: var(--ombre-m); color: #fff; }
.bouton--verre {
  background: #fff; color: var(--encre);
  border-color: var(--filet); box-shadow: var(--ombre-s);
}
.bouton--verre:hover { background: #fafaf9; border-color: var(--filet-fort); color: var(--encre); }
.panneau__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- le registre : la pièce maîtresse des pages intérieures -------------- */
.registre {
  border: 1px solid var(--filet);
  border-radius: var(--r-m);
  background: #fff;
  box-shadow: var(--ombre-s);
  overflow: hidden;
}
.registre__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 24px;
  align-items: center;
  padding: 18px 24px;
  border-top: 1px solid var(--filet);
  background: #fff;
  transition: background-color .2s var(--ease);
}
.registre__ligne:first-child { border-top: 0; }
.registre__ligne:hover { background: #fcfcfb; }
.registre__nom { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.registre__dit { font-size: .8125rem; color: var(--encre-3); margin-top: 2px; }
.registre__prix { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.registre__chiffre { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.deux-col .registre__ligne { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.deux-col .registre__prix { align-items: flex-start; text-align: left; grid-column: 1; }

/* --- les preuves : la bande de chiffres ---------------------------------- */
.preuves {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--filet); border-radius: var(--r-m); overflow: hidden;
  background: #fff;
}
.preuves > div { padding: 22px 20px; border-left: 1px solid var(--filet); }
.preuves > div:first-child { border-left: 0; }
.preuves b { display: block; font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.preuves span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--encre-3); }

/* --- le panneau (offre, formulaire, prix) -------------------------------- */
.panneau {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  background: #fff; box-shadow: var(--ombre-s);
  padding: 28px;
}
.carte-form {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  background: #fff; box-shadow: var(--ombre-m);
  padding: 28px;
}
.formulaire { display: grid; gap: 16px; }
.champ { display: grid; gap: 6px; }
.champ > span, .champ > label { font-size: .8125rem; font-weight: 600; color: var(--encre-2); }

/* --- les métiers : les mêmes pastilles que le reste --------------------- */
.metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.metiers a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--filet); border-radius: var(--r-s);
  background: #fff; font-size: .9375rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.metiers a:hover { border-color: var(--filet-fort); box-shadow: var(--ombre-s); transform: translateY(-1px); }

/* --- les questions ------------------------------------------------------- */
.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--filet); border-radius: var(--r-m);
  background: #fff; padding: 18px 22px;
}
.faq summary { font-weight: 600; font-size: .9375rem; cursor: pointer; }
.faq details p { margin-top: 10px; font-size: .9375rem; color: var(--encre-2); line-height: 1.65; }

/* --- les étapes numérotées ---------------------------------------------- */
.etape {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px;
  padding: 20px 0; border-top: 1px solid var(--filet);
}
.etape:first-child { border-top: 0; }
.inclus { display: grid; gap: 8px; }
.inclus li { font-size: .9375rem; color: var(--encre-2); }

/* --- les états ---------------------------------------------------------- */
.succes {
  padding: 14px 18px; border-radius: var(--r-s);
  background: rgb(21 128 61 / .07); color: #14652f;
  border: 1px solid rgb(21 128 61 / .18); font-size: .9375rem;
}
.alerte {
  padding: 14px 18px; border-radius: var(--r-s);
  background: rgb(154 106 36 / .07); color: #7a5218;
  border: 1px solid rgb(154 106 36 / .2); font-size: .9375rem;
}

/* --- la colonne de lecture ---------------------------------------------- */
.lecture { display: grid; grid-template-columns: minmax(0, 68ch) 210px; gap: 48px; }
.prose { max-width: 68ch; }
.prose h2 { margin: 40px 0 12px; font-size: clamp(1.25rem, 1.8vw, 1.5rem); letter-spacing: -.025em; }
.prose p, .prose li { font-size: 1rem; line-height: 1.7; color: var(--encre-2); }
.prose p + p { margin-top: 14px; }

/* --- les deux colonnes des pages de vente ------------------------------- */
.deux-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: start; }
.appui { position: sticky; top: 96px; }

@media (max-width: 960px) {
  .deux-col { grid-template-columns: 1fr; gap: 32px; }
  .appui { position: static; }
  .lecture { grid-template-columns: 1fr; gap: 32px; }
  .preuves { grid-template-columns: 1fr 1fr; }
  .preuves > div:nth-child(3) { border-left: 0; }
  .registre__ligne { grid-template-columns: minmax(0,1fr) 140px; }
}
@media (max-width: 620px) {
  .registre__ligne { grid-template-columns: 1fr; gap: 4px; }
  .registre__prix { align-items: flex-start; text-align: left; }
  .preuves { grid-template-columns: 1fr; }
  .preuves > div { border-left: 0; border-top: 1px solid var(--filet); }
  .preuves > div:first-child { border-top: 0; }
}

/* ⚠️ Les boutons du registre étaient étirés à la largeur de la colonne par la
   feuille v3 (`width:100%`) : « Créer mon premier devis » passait sur deux
   lignes. Un bouton garde la largeur de son texte. */
.registre__ligne .bouton,
.registre__prix .bouton { width: auto; white-space: nowrap; }
/* la colonne de prix fixe ne vaut qu'au-dessus de 620 px — sinon elle écrasait
   le titre à 100 px, une syllabe par ligne */
@media (min-width: 621px) {
  .registre__ligne { grid-template-columns: minmax(0, 1fr) 230px; }
}
/* la pastille du sur-titre portait un trait décoratif (`<i>`) qui sortait en
   tiret devant le mot. */
.surtitre i { display: none; }
/* le tiret venait d'un `::before` posé par craft.css, pas d'un `<i>` */
.surtitre::before { content: none; display: none; }

/* --- 15. LE PREMIER BLOC D'UNE PAGE INTÉRIEURE ---------------------------- */
/* la barre fait 78 px sur téléphone et elle est fixe : sans cette réserve, le
   sur-titre passait dessous (la pastille « Les offres » disparaissait). */
@media (max-width: 620px) {
  main.page > .bloc:first-child { padding-top: 96px; }
}

/* --- 16. LA COULEUR, ET LE SECOND OBJET ----------------------------------- */
/* Trois teintes seulement, et jamais en surface : azur et jade dans les halos,
   l'ambre pour la marque. Tout le reste est encre. */
:root {
  --azur: #2f5d8a;
  --jade: #1f6f5c;
}

/* l'aurore du héros : trois lueurs très basses, qui donnent de la couleur sans
   colorer la page */
.heros {
  background:
    radial-gradient(50% 38% at 14% 2%, rgb(47 93 138 / .16), transparent 68%),
    radial-gradient(46% 36% at 86% 6%, rgb(31 111 92 / .14), transparent 68%),
    radial-gradient(60% 46% at 50% -8%, rgb(154 106 36 / .10), transparent 70%),
    linear-gradient(180deg, #fff 0%, #fdfdfc 100%);
}

/* le tore de la section « IA & audit » */
.noyau-cadre {
  width: min(100%, 460px);
  aspect-ratio: 1.5 / 1;
  margin: 0 auto clamp(28px, 4vw, 44px);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 55%, transparent 82%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 55%, transparent 82%);
}
#noyau { width: 100%; height: 100%; display: block; }

/* les cartes du « reste » gagnent un liseré coloré, un seul, très fin */
#reste .carte { position: relative; overflow: hidden; }
#reste .carte::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--jade), var(--azur) 55%, transparent);
  opacity: .5;
}

/* sur téléphone, le retour à la ligne forcé du titre cassait la phrase en trois
   morceaux (« Un site qui se / trouve. ») : on laisse le texte se replier seul. */
@media (max-width: 620px) {
  .heros h1 br { display: none; }
}

/* les notes d'une ligne du registre : petites, à droite, jamais plus larges que
   la colonne de prix — sinon elles prennent quatre lignes et écrasent le prix */
.registre__note {
  font-size: .75rem;
  line-height: 1.45;
  color: #6b6f7a;
  max-width: 224px;
  margin: 6px 0 0 auto;
  text-align: right;
}

/* --- 17. LES QUESTIONS : DENSITÉ DE LECTURE ------------------------------- */
/* Le gabarit posait 18 px de padding sur le <details> ET sur le <summary> :
   chaque ligne faisait 103 px de haut pour une question. Une ligne = 59 px. */
#questions .faq { margin-inline: auto; }   /* centré sous un titre centré */
#questions .faq details { padding: 16px 22px; border-radius: 14px; }
#questions .faq summary { padding: 0; font-size: 1.0625rem; font-weight: 500; }
#questions .faq details[open] summary { margin-bottom: 12px; }
#questions .faq summary::after { font-size: 20px; font-weight: 300; color: #8a8f99; }
#questions .faq details[open] summary::after { content: "−"; }
#questions .faq p { max-width: 70ch; color: #4a4e57; }

/* --- 18. LA BANDE DES MÉTIERS, EN PIED DE PAGE --------------------------- */
.pied__mots {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 18px;
  margin: clamp(28px,4vw,44px) 0 clamp(24px,3vw,36px);
  padding-top: clamp(22px,3vw,30px);
  border-top: 1px solid rgb(10 11 16 / .08);
}
.pied__mots-titre {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: #8a8f99; margin-right: 6px;
}
.pied__mots a { font-size: .8125rem; color: #4a4e57; text-decoration: none; }
.pied__mots a:hover { color: #0a0b10; text-decoration: underline; text-underline-offset: 3px; }
.pied__mots-plus { color: #9a6a24 !important; }

/* --- 19. LE TROISIÈME BLOC « IA & AUDIT » --------------------------------- */
/* Trois offres, trois cartes : en deux colonnes la troisième restait orpheline
   et la moitié droite de la section était vide. */
@media (min-width: 1024px) {
  #reste .grille-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 20. LA GALERIE DE CHANTIERS ----------------------------------------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.galerie figure { margin: 0; overflow: hidden; border-radius: 14px; background: #f1efea; display: flex; flex-direction: column; }
.galerie img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- 21. LONGUEUR DE LIGNE DES PAGES PRIX -------------------------------- */
/* La colonne faisait 1 070 px : 110 caractères par ligne. Au-delà de 75, l'œil
   perd la ligne suivante. Les blocs de texte des pages prix sont bornés. */
.bloc__int > .prose { max-width: 70ch; }
.galerie figcaption {
  font-size: .6875rem; color: #8a8f99; padding: 8px 12px 10px; letter-spacing: .01em;
  background: #f7f5f0; border-top: 1px solid rgb(10 11 16 / .06);
}

/* --- 22. LE MENU MOBILE --------------------------------------------------- */
.nav__burger {
  display: none; align-items: center; justify-content: center; flex-direction: column;
  gap: 5px; width: 44px; height: 44px; padding: 0; margin-left: 10px;
  background: none; border: 1px solid rgb(10 11 16 / .12); border-radius: 12px; cursor: pointer;
}
.nav__burger span {
  display: block; width: 18px; height: 1.5px; background: #0a0b10;
  transition: transform .22s ease, opacity .22s ease;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }

.menu-mobile {
  /* sous la barre (z-index 80) : la barre reste visible et le bouton devient
     une croix. Le panneau commençait par-dessus, donc on ne pouvait plus fermer
     autrement qu'avec Échap. */
  position: fixed; inset: 0; z-index: 70;
  background: #fbfaf6;
  padding: calc(env(safe-area-inset-top) + 74px) 22px calc(env(safe-area-inset-bottom) + 26px);
  overflow-y: auto;
}
.menu-mobile nav { display: flex; flex-direction: column; }
.menu-mobile a {
  display: flex; align-items: center; min-height: 56px;
  font-size: 1.1875rem; font-weight: 500; letter-spacing: -.01em;
  color: #0a0b10; text-decoration: none;
  border-bottom: 1px solid rgb(10 11 16 / .07);
}
.menu-mobile a:active { background: rgb(10 11 16 / .03); }
.menu-mobile__tel { color: #9a6a24 !important; }
.menu-mobile__cta {
  justify-content: center; margin-top: 22px; min-height: 54px !important;
  background: #0a0b10; color: #fffdf6 !important; border-radius: 999px; border: 0 !important;
  font-weight: 500;
}
html.menu-ouvert, html.menu-ouvert body { overflow: hidden; }

@media (max-width: 899px) {
  .nav__liens, .nav__actions { display: none !important; }
  .nav__burger { display: flex; }
  .nav { justify-content: space-between; }
}
@media (min-width: 900px) { .menu-mobile { display: none !important; } }

/* la barre translucide laissait lire le texte qui défilait dessous : illisible
   sur téléphone. En dessous de 900 px, elle est opaque. */
@media (max-width: 899px) {
  .nav { background: #fbfaf6 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

/* la barre d'onglets mobile appliquait `saturate(2)` à ce qu'elle floutait :
   un fond crème légèrement chaud ressortait magenta sur certaines captures.
   Une saturation douce garde le verre sans inventer de couleur. */
.n-tabs, .n-tabs::before, .n-tabs * {
  -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
}
.n-tabs { background: rgba(251, 250, 246, .82) !important; }