/* =====================================================================
   Tapointé — site vitrine
   =====================================================================

   Le sujet, ce sont des heures. Des quarts d'heure, une semaine qui se
   ferme, un mois qui se verrouille pour la paie. Trois décisions en
   découlent, et elles tiennent ensemble :

   1. **Les nombres sont le motif graphique.** Chiffres à chasse fixe,
      cadratins alignés, un compteur qui monte dans le héros. Un site de
      pointage qui dessine des vagues et des dégradés parle d'autre chose
      que de ce qu'il vend.

   2. **Clair, avec deux bandes d'encre.** Le bleu de la marque est une
      couleur de texte, pas un fond. Deux sections seulement passent en
      encre — le coût, et le pied de page — et elles y gagnent d'autant
      plus de poids qu'elles sont seules.

   3. **L'ambre ne sert qu'à l'action.** C'est la règle du logiciel, et le
      site la tient : un ambre qui décore ne peut plus appeler.

   La police est celle du système. Un caractère acheté ajouterait un
   fichier à charger et un tiers à déclarer, pour un site qui vend de
   l'hébergement français et du « vous pouvez nous appeler ». Le caractère
   du dessin vient de la taille, du crénage et de la mise en page — pas
   d'une licence.
   ===================================================================== */

:root {
  /* --- Encre et papier --- */
  --encre: #1b2942;
  --encre-douce: #3a4760;
  --gris: #5f6e8a;
  --gris-clair: #8b9dbb;
  --trait: #dce2ee;
  --trait-fin: #eaeef6;
  --papier: #f7f8fb;
  --blanc: #ffffff;

  /* --- L'accent, réservé à l'action --- */
  /* L'ambre du logo, repris à l'identique. Le site tirait auparavant sur
     un orange plus saturé : deux ors voisins à trois centimètres l'un de
     l'autre se lisent comme un défaut d'impression, pas comme une nuance. */
  --ambre: #f8ae28;

  /* Deux ambres sombres, et ils ne servent pas à la même chose.
     `--ambre-fonce` habille les survols de bouton, où le texte est blanc et
     le fond coloré : 3,5:1 y suffit, la règle des 4,5 ne vise que le texte.
     `--ambre-lien` porte le texte sur fond clair, et doit donc passer le
     seuil — 5,3:1, contre 3,5 pour le précédent, qui était en dessous. */
  --ambre-fonce: #c97400;
  --ambre-lien: #a15a00;
  --ambre-voile: #fff8eb;

  /* --- Les domaines, repris du logiciel à l'identique --- */
  --dom-rh: #2f5bbf;
  --dom-pointage: #0e8c8c;
  --dom-entreprise: #c97400;

  --vert: #0f9d63;

  /* --- Mesures --- */
  --rayon: 14px;
  --rayon-petit: 9px;
  --largeur: 1220px;
  --barre: 72px;

  --ombre-douce: 0 1px 2px rgb(27 41 66 / 6%), 0 8px 24px -12px rgb(27 41 66 / 14%);
  --ombre-portee: 0 18px 50px -20px rgb(27 41 66 / 28%);

  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-chiffres: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
}

/* ---------- Remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 650; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

/* Le passage au clavier doit se voir. Sur un site qui parle de conformité,
   un anneau de focus retiré « parce qu'il est moche » est difficile à
   défendre. */
:focus-visible {
  outline: 2px solid var(--ambre-fonce);
  outline-offset: 3px;
  border-radius: 4px;
}

.evitement {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--encre);
  color: var(--blanc);
  border-radius: 0 0 var(--rayon-petit) 0;
}
.evitement:focus { left: 0; top: 0; }

.contenu-large { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.contenu-texte { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

/* Un SVG dans une boîte flexible se laisse écraser : sa largeur est une
   suggestion, pas une contrainte. Tous les pictos du site refusent de
   rétrécir. */
.ico { flex: none; }
.colonne__pastille, .carte__pastille, .moyen__ico, .apport__ico { flex: none; }

/* ---------- Le nombre, traité comme un dessin ----------
   Chasse fixe et cadratins alignés : une colonne de durées ne doit pas
   onduler, et « 38h12 » doit se lire comme une mesure, pas comme un mot. */
.nombre {
  font-family: var(--police-chiffres);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

/* =====================================================================
   Boutons
   ===================================================================== */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .72rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--rayon-petit);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s;
}
.bouton:active { transform: translateY(1px); }

.bouton--ambre { background: var(--ambre); color: #20160a; }
.bouton--ambre:hover { background: var(--ambre-fonce); color: var(--blanc); }

.bouton--encre { background: var(--encre); color: var(--blanc); }
.bouton--encre:hover { background: #0e1726; }

.bouton--fantome { border-color: var(--trait); background: var(--blanc); color: var(--encre); }
.bouton--fantome:hover { border-color: var(--gris-clair); }

.bouton--clair { border-color: rgb(255 255 255 / 28%); background: transparent; color: var(--blanc); }
.bouton--clair:hover { background: rgb(255 255 255 / 10%); }

.bouton--grand { padding: .95rem 1.7rem; font-size: 1.02rem; }
.bouton--plein-large { width: 100%; }

.lien-bouton {
  padding: 0; border: 0; background: none;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* =====================================================================
   En-tête et méga-menu
   ===================================================================== */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(247 248 251 / 88%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.entete.est-detachee {
  border-bottom-color: var(--trait);
  background: rgb(255 255 255 / 92%);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: var(--barre);
}

/* Le logo est une image, pas un titre mis en forme. Sa hauteur est fixée
   et sa largeur suit : le fichier a un rapport de 1223 sur 259, et le
   figer des deux côtés l'écraserait au premier changement de dessin. */
.marque { display: inline-flex; align-items: center; text-decoration: none; }
.marque img { height: 34px; width: auto; }
.pied .marque img { height: 32px; }

.nav { display: flex; align-items: center; gap: .3rem; margin-inline-start: auto; }

.nav__lien {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .8rem;
  border: 0;
  background: none;
  border-radius: var(--rayon-petit);
  color: var(--encre-douce);
  font-size: .95rem;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s, background-color .16s;
}
.nav__lien:hover, .nav__lien.est-actif { color: var(--encre); background: rgb(27 41 66 / 5%); }
.nav__chevron { transition: transform .2s; }
[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.entete__actions { display: flex; align-items: center; gap: .6rem; }

/* --- Le panneau --- */
.nav__element { position: static; }

.panneau {
  position: absolute;
  inset-inline: 0;
  top: var(--barre);
  padding: 2rem 0 2.2rem;
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  box-shadow: var(--ombre-portee);
  animation: panneau-entre .18s ease-out;
}
.panneau[hidden] { display: none; }

@keyframes panneau-entre {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.panneau__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 15rem;
  gap: 2.4rem;
}

.colonne__tete { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1rem; }

.colonne__pastille {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--teinte) 12%, transparent);
  color: var(--teinte);
}

.colonne__titre { font-size: .98rem; font-weight: 650; }
.colonne__phrase { margin-top: .15rem; color: var(--gris); font-size: .84rem; line-height: 1.45; }

.colonne__liste { display: grid; gap: .1rem; }

.entree {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .5rem .6rem;
  border-radius: var(--rayon-petit);
  text-decoration: none;
  transition: background-color .14s;
}
.entree:hover { background: color-mix(in srgb, var(--teinte) 7%, transparent); }
/* `flex: none` sur le conteneur, et pas seulement sur le SVG : c'est le
   `<span>` qui est l'élément flexible de la ligne, et sans cette règle il
   se laissait comprimer par le texte voisin. Les icônes étaient demandées à
   18 px et rendues entre 11 et 17 selon la longueur de la description — d'où
   l'impression qu'elles n'avaient pas toutes la même taille. */
.entree__ico { flex: none; color: var(--teinte); margin-top: 1px; }
.entree__nom { display: block; font-size: .9rem; font-weight: 550; }
.entree__quoi { display: block; color: var(--gris); font-size: .8rem; line-height: 1.4; }

.colonne--appel {
  padding: 1.3rem;
  border-radius: var(--rayon);
  background: var(--ambre-voile);
  border: 1px solid #fde08a;
}
.colonne--appel .colonne__phrase { margin-bottom: 1rem; }
.lien-tel {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .6rem;
  color: var(--ambre-lien);
  font-size: .9rem; font-weight: 600; text-decoration: none;
}

/* --- Téléphone --- */
.burger {
  display: none;
  flex-direction: column; gap: 4px;
  padding: .55rem;
  border: 1px solid var(--trait); border-radius: var(--rayon-petit);
  background: var(--blanc); cursor: pointer;
}
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--encre); }

.menu-mobile { border-top: 1px solid var(--trait); background: var(--blanc); }
.menu-mobile[hidden] { display: none; }
.menu-mobile__corps { padding: 1rem 1.25rem 1.6rem; max-height: calc(100dvh - var(--barre)); overflow-y: auto; }

.repli { border-bottom: 1px solid var(--trait-fin); }
.repli__tete {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 0; font-weight: 600; cursor: pointer; list-style: none;
}
.repli__tete::-webkit-details-marker { display: none; }
.repli__chevron { margin-inline-start: auto; color: var(--gris-clair); transition: transform .2s; }
.repli[open] .repli__chevron { transform: rotate(180deg); }
.repli__liste { padding: 0 0 .8rem 2.6rem; display: grid; gap: .1rem; }
.repli__liste a {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 0; color: var(--gris); font-size: .92rem; text-decoration: none;
}
.repli__liste a .ico { color: var(--teinte); }

.menu-mobile__lien {
  display: block; padding: .85rem 0;
  border-bottom: 1px solid var(--trait-fin);
  font-weight: 600; text-decoration: none;
}
.menu-mobile__actions { display: grid; gap: .6rem; margin-top: 1.3rem; }

/* =====================================================================
   Héros
   =====================================================================
   Pas de capture d'écran dans un cadre d'ordinateur portable : une semaine
   d'heures, dessinée. C'est ce que le produit fabrique, et c'est la seule
   image que personne d'autre ne peut avoir.
   ===================================================================== */
.heros { position: relative; padding: 4.5rem 0 5rem; overflow: hidden; }

/* Le halo ambré, très dilué. Le seul geste décoratif du site, et il est
   là pour poser le regard au bon endroit, pas pour faire joli. */
.heros::before {
  content: "";
  position: absolute;
  top: -22rem; right: -14rem;
  width: 46rem; height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(240 144 0 / 13%) 0%, transparent 62%);
  pointer-events: none;
}

.heros__grille {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 3.2rem;
  align-items: center;
}

.heros__origine {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .8rem .38rem .5rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  font-size: .84rem; font-weight: 550; color: var(--encre-douce);
}
.heros__origine .ico { color: var(--vert); }

.heros__titre {
  /* Deux lignes, et deux seulement. Au-delà de 3,4 rem le titre passait à
     quatre lignes sur un écran d'ordinateur portable, et « des TPE-PME »
     se retrouvait seul sur la sienne — l'inverse de ce qu'on veut lire. */
  font-size: clamp(2.2rem, 4.1vw, 3.4rem);
  letter-spacing: -.033em;
  text-wrap: balance;
  font-weight: 700;
}
.heros__titre span { display: block; }

.heros__chapeau {
  margin-top: 1.4rem;
  max-width: 30rem;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--encre-douce);
}
.heros__chapeau strong { font-weight: 650; color: var(--encre); }

.heros__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.heros__rassure {
  display: flex; flex-wrap: wrap; gap: 1.1rem;
  margin-top: 1.6rem;
  color: var(--gris); font-size: .88rem;
}
.heros__rassure li { display: flex; align-items: center; gap: .4rem; }
.heros__rassure .ico { color: var(--vert); }

/* =====================================================================
   Bandeaux de confiance
   ===================================================================== */
.confiance {
  padding: 1.6rem 0;
  border-block: 1px solid var(--trait);
  background: var(--blanc);
}
.confiance__liste {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 2.6rem;
  color: var(--gris); font-size: .88rem;
}
.confiance__liste li { display: flex; align-items: center; gap: .5rem; }
.confiance__liste .ico { color: var(--gris-clair); }

/* =====================================================================
   Sections
   ===================================================================== */
.section { padding: 5.5rem 0; }

/* La section de la plateforme coupe ce qui dépasse : la pile d'écrans sort
   volontairement du conteneur, et sans ce recadrage elle pousserait une barre
   de défilement horizontale sur toute la page. */
#plateforme { overflow: hidden; }
.section--serree { padding: 4rem 0; }

/* Quand une section commence par un encart et non par un titre, elle n'a pas
   besoin du souffle qui précède un titre : la bannière vient de s'achever. */
.section--colle-haut { padding-top: 2rem; }

.section__tete { max-width: 40rem; margin-bottom: 3rem; }
.section__tete--centree { margin-inline: auto; text-align: center; }

.section__titre { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.section__chapeau { margin-top: .9rem; color: var(--encre-douce); font-size: 1.06rem; }

/* --- La bande d'encre : le coût --- */
.cout {
  padding: 5.5rem 0;
  background: var(--encre);
  color: var(--blanc);
}
.cout__titre { font-size: clamp(1.85rem, 3.4vw, 2.6rem); max-width: 26ch; }
.cout__chapeau { margin-top: 1rem; max-width: 44rem; color: rgb(255 255 255 / 70%); }

.cout__grille {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 3.2rem;
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--rayon);
  overflow: hidden;
}
.cout__case { padding: 2rem 1.8rem; background: var(--encre); }
.cout__chiffre { display: flex; align-items: baseline; gap: .5rem; }
.cout__chiffre b { font-size: 2.6rem; font-weight: 700; color: var(--ambre); }
.cout__chiffre span { font-size: .82rem; color: rgb(255 255 255 / 55%); }
.cout__quoi { margin-top: .5rem; font-size: 1.02rem; font-weight: 600; }
.cout__texte { margin-top: .7rem; font-size: .92rem; line-height: 1.6; color: rgb(255 255 255 / 68%); }

.cout__chute {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  margin-top: 2.6rem;
}
.cout__chute p { color: rgb(255 255 255 / 78%); }

/* --- Le carrousel des fonctions --- */
.plateforme__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.6rem;
}
.filtres { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtre {
  padding: .45rem .9rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--blanc);
  font-size: .88rem; font-weight: 550; color: var(--encre-douce);
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
.filtre:hover { border-color: var(--gris-clair); }
.filtre.est-actif { border-color: var(--teinte, var(--encre)); color: var(--teinte, var(--encre)); background: color-mix(in srgb, var(--teinte, var(--encre)) 8%, transparent); }

.fleches { display: flex; gap: .4rem; }
.fleche {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--trait); border-radius: 50%;
  background: var(--blanc); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.fleche:hover:not(:disabled) { border-color: var(--encre); }
.fleche:disabled { opacity: .35; cursor: default; }
.fleche--gauche .ico { transform: rotate(180deg); }

.piste {
  display: grid;
  grid-auto-flow: column;
  /* Largeur fixe, et non `1fr` : avec quatre cartes, `1fr` leur donnait le
     quart de la piste sans déduire les trois écarts, et la dernière se
     retrouvait coupée alors qu'elle avait la place. Quatre colonnes de
     18 rem plus trois écarts d'un rem tiennent dans les 1 220 px. */
  grid-auto-columns: 18rem;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.piste::-webkit-scrollbar { display: none; }

.carte {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 1.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  transition: border-color .18s, transform .18s;
}
.carte:hover { border-color: color-mix(in srgb, var(--teinte) 45%, var(--trait)); transform: translateY(-2px); }

/* `display: flex` posé par la règle ci-dessus l'emportait sur le
   `display: none` que le navigateur applique à `[hidden]` : les cartes
   filtrées restaient à l'écran, et les filtres semblaient sans effet.
   Une feuille d'auteur bat toujours celle du navigateur. */
.carte[hidden] { display: none; }

.carte__pastille {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 1.1rem;
  border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--teinte) 12%, transparent);
  color: var(--teinte);
}
.carte__titre { font-size: 1.04rem; }
.carte__texte { margin-top: .6rem; color: var(--gris); font-size: .93rem; line-height: 1.6; }
.carte__domaine {
  margin-top: 1.2rem; padding-top: .9rem;
  border-top: 1px solid var(--trait-fin);
  font-size: .78rem; font-weight: 600; color: var(--teinte);
}

/* --- Moyens de pointage --- */
.moyens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 3rem; }
.moyen {
  display: flex; flex-direction: column;
  padding: 2rem 1.8rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
}
.moyen__ico {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 1.3rem;
  border-radius: var(--rayon-petit);
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait);
}
.moyen__titre { font-size: 1.14rem; }
.moyen__texte { margin-top: .7rem; color: var(--gris); font-size: .95rem; line-height: 1.6; }
.moyen__points { margin-top: 1.3rem; display: grid; gap: .55rem; }
.moyen__points li { display: flex; gap: .55rem; font-size: .9rem; color: var(--encre-douce); }
.moyen__points .ico { color: var(--vert); margin-top: 2px; flex: none; }

.moyens__note {
  margin-top: 1.6rem; padding: 1.2rem 1.5rem;
  border: 1px dashed var(--gris-clair); border-radius: var(--rayon);
  color: var(--encre-douce); font-size: .95rem;
}
.moyens__note b { color: var(--encre); }

/* Les mêmes cartes posées sur une bande d'encre. Elles servent aussi sur la
   page Fonctionnalités, où le fond est clair : habiller `.moyen` directement
   pour le sombre y rendait le texte blanc sur blanc. La variante appartient
   à la bande, pas à la carte. */
.cout .moyen { border-color: rgb(255 255 255 / 12%); background: rgb(255 255 255 / 5%); }
.cout .moyen__ico {
  background: rgb(255 255 255 / 8%);
  color: var(--ambre);
  border-color: rgb(255 255 255 / 12%);
}
.cout .moyen__titre { color: var(--blanc); }
.cout .moyen__texte { color: rgb(255 255 255 / 68%); }
.cout .moyen__points li { color: rgb(255 255 255 / 82%); }
.cout .moyen__points .ico { color: var(--ambre); }
.cout .moyens__note { border-color: rgb(255 255 255 / 22%); color: rgb(255 255 255 / 72%); }
.cout .moyens__note b { color: var(--blanc); }

/* --- Essai --- */
.essai {
  position: relative;
  padding: 3.2rem;
  border-radius: var(--rayon);
  background: var(--ambre-voile);
  border: 1px solid #fde08a;
  overflow: hidden;
}
.essai__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; align-items: center; }
.essai__titre { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.essai__texte { margin-top: 1rem; color: var(--encre-douce); }
.essai__liste { display: grid; gap: .7rem; margin-top: 1.6rem; }
.essai__liste li { display: flex; gap: .6rem; align-items: flex-start; }
.essai__liste .ico { color: var(--ambre-fonce); margin-top: 3px; }

/* --- FAQ --- */
.faq { display: grid; gap: .6rem; max-width: 52rem; margin-inline: auto; }
.question {
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  overflow: hidden;
}
.question summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-size: 1.02rem; font-weight: 600;
  cursor: pointer; list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question__signe { margin-inline-start: auto; color: var(--gris-clair); transition: transform .2s; }
.question[open] .question__signe { transform: rotate(45deg); }
.question__reponse { padding: 0 1.4rem 1.3rem; color: var(--gris); line-height: 1.65; }

/* --- Formulaire --- */
.contact__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 3.5rem; align-items: start; }

.formulaire {
  padding: 2rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre-douce);
}
.champs { display: grid; gap: 1.1rem; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

.champ { display: grid; gap: .35rem; }
.champ label { font-size: .88rem; font-weight: 600; }
.champ__aide { font-size: .8rem; color: var(--gris-clair); }

.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  font: inherit; font-size: .95rem;
  color: var(--encre);
  transition: border-color .15s, box-shadow .15s;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--ambre);
  box-shadow: 0 0 0 3px rgb(240 144 0 / 18%);
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--gris-clair); opacity: 1; }

.champ--erreur input, .champ--erreur textarea, .champ--erreur select { border-color: #d64545; }
.erreur { color: #b02a2a; font-size: .82rem; }

/* Le pot de miel : invisible à l'œil, présent pour les robots. `hidden`
   seul ne suffit pas — certains remplissent quand même — mais un champ
   hors écran et hors tabulation ne sera jamais rempli par un humain. */
.pot-de-miel {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* L'étiquette du consentement hérite sinon du gras des autres champs, et
   une phrase de trois lignes en gras se lit comme un avertissement — alors
   qu'on demande seulement un accord. */
/* `label.consentement` et non `.consentement` seul : `.champ label` est plus
   spécifique, et la phrase restait en gras — trois lignes de gras se lisent
   comme un avertissement alors qu'on demande un simple accord. */
.champ label.consentement {
  display: flex; gap: .65rem; align-items: flex-start;
  font-size: .86rem; font-weight: 400; line-height: 1.5; color: var(--gris);
  cursor: pointer;
}
.consentement input { flex: none; width: 17px; height: 17px; margin-top: .1rem; accent-color: var(--ambre-fonce); }
.consentement a { color: var(--ambre-lien); }

.message {
  display: flex; gap: .8rem;
  padding: 1rem 1.2rem; margin-bottom: 1.4rem;
  border-radius: var(--rayon-petit);
  font-size: .93rem;
}
.message--succes { background: #e7f7f0; color: #0b5c3b; }
.message--echec { background: #fdecec; color: #9a2020; }
.message .ico { margin-top: 2px; }

.contact__apport { display: grid; gap: 1.6rem; }
.apport { display: flex; gap: 1rem; }
.apport__ico {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px;
  border-radius: var(--rayon-petit);
  background: var(--blanc); border: 1px solid var(--trait);
  color: var(--encre);
}
.apport__titre { font-size: 1rem; font-weight: 650; }
.apport__texte { margin-top: .25rem; color: var(--gris); font-size: .93rem; line-height: 1.55; }

/* =====================================================================
   Pied de page
   ===================================================================== */
.pied { background: var(--encre); color: rgb(255 255 255 / 72%); font-size: .92rem; }
.pied a { color: inherit; text-decoration: none; }
.pied a:hover { color: var(--blanc); }

.pied__haut {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: 3rem; padding: 3.5rem 0 2.5rem;
}
.pied__phrase { margin-top: 1.1rem; line-height: 1.65; }
.pied__contact { display: grid; gap: .5rem; margin-top: 1.4rem; }
.pied__contact a { display: inline-flex; align-items: center; gap: .5rem; }

.pied__colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pied__colonnes h2 { margin-bottom: .9rem; color: var(--blanc); font-size: .92rem; }
.pied__colonnes ul { display: grid; gap: .55rem; }
.pied__colonnes .lien-bouton { color: inherit; }

.pied__bas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.4rem 0 2.2rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: .85rem; color: rgb(255 255 255 / 55%);
}
.pied__mention { display: flex; align-items: center; gap: .5rem; }

/* =====================================================================
   Bandeau de consentement
   ===================================================================== */
.cookies {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: 80;
  padding: 1rem;
}
.cookies[hidden] { display: none; }

.cookies__boite {
  width: min(100%, 34rem);
  margin-inline: auto;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre-portee);
}
.cookies__titre { font-size: 1rem; }
.cookies__texte { margin-top: .6rem; font-size: .88rem; line-height: 1.6; color: var(--gris); }
.cookies__texte a { color: var(--ambre-lien); }

/* Refuser et accepter ont exactement le même poids. C'est une obligation,
   pas une élégance : un refus rendu plus coûteux qu'une acceptation vicie
   le consentement. */
.cookies__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.2rem; }

/* =====================================================================
   Pages de texte (mentions, confidentialité)
   ===================================================================== */
.texte { padding: 3.5rem 0 4.5rem; }
.texte h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); margin-bottom: .8rem; }
.texte__date { color: var(--gris-clair); font-size: .88rem; margin-bottom: 2.5rem; }
.texte h2 { margin: 2.6rem 0 .9rem; font-size: 1.28rem; }
.texte h3 { margin: 1.8rem 0 .6rem; font-size: 1.02rem; }
.texte p, .texte li { color: var(--encre-douce); line-height: 1.7; }
.texte p + p { margin-top: .9rem; }
.texte ul { margin: .9rem 0; display: grid; gap: .5rem; padding-inline-start: 1.2rem; list-style: disc; }
.texte a { color: var(--ambre-lien); }
.texte table { width: 100%; margin: 1.2rem 0; border-collapse: collapse; font-size: .93rem; }
.texte th, .texte td { padding: .7rem .8rem; border: 1px solid var(--trait); text-align: left; vertical-align: top; }
.texte th { background: var(--blanc); font-weight: 650; }

.encart {
  padding: 1.2rem 1.4rem; margin: 1.6rem 0;
  border-inline-start: 3px solid var(--ambre);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  background: var(--blanc);
}

/* =====================================================================
   Adaptation
   ===================================================================== */
@media (max-width: 1080px) {
  .panneau__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
  .cout__grille { grid-template-columns: 1fr; }
  .moyens { grid-template-columns: 1fr; }
  .contact__grille, .essai__grille { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 900px) {
  .heros__grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .pied__haut { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 820px) {
  .nav, .entete__actions { display: none; }
  .burger { display: flex; }
  .entete__barre { justify-content: space-between; gap: 1rem; }
  .section { padding: 3.5rem 0; }
  .cout, .heros { padding: 3.5rem 0; }
  .essai { padding: 2rem 1.5rem; }
  .pied__colonnes { grid-template-columns: 1fr 1fr; }
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .piste { grid-auto-columns: minmax(16rem, 84%); }
  .cookies__actions { grid-template-columns: 1fr; }
  .plateforme__barre { flex-direction: column; align-items: flex-start; }
  .fleches { display: none; }
}

/* =====================================================================
   Où ça sert — les trois terrains
   =====================================================================
   Des situations, pas des témoignages. Un témoignage inventé se repère,
   et un vrai se demande au client. Ces emplacements attendent des photos
   de terrain — l'atelier, le chantier, le bureau — et surtout pas des
   portraits de banque d'images, qu'on reconnaît d'un site à l'autre.
   ===================================================================== */
/* =====================================================================
   L'espace salarié — sous-section de la plateforme

   Deux colonnes, le texte à gauche et l'image à droite. Le texte d'abord
   dans le flux : sur téléphone, c'est lui qui porte l'argument, et une
   photo posée avant lui repousserait le premier mot sous la ligne de
   flottaison.

   L'image est en `sticky` sur grand écran. La liste est plus haute qu'elle,
   et une image qui remonte seule laisse un vide à droite pendant qu'on lit
   les deux derniers points.
   ===================================================================== */
.espace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 3rem;
  align-items: start;
  margin-top: 4.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--trait-fin);
}

.espace__surtitre {
  margin: 0 0 0.7rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--encre-douce);
}

.espace__titre {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--encre);
}

.espace__chapeau {
  margin: 0.9rem 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--gris);
}

.espace__liste {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.5rem;
}

.espace__point { display: flex; gap: 1rem; align-items: flex-start; }

/* `flex: none` n'est pas décoratif : sans lui, la pastille est un élément
   flexible et se laisse écraser par le texte voisin — les quatre icônes
   sortent alors à quatre tailles différentes. */
.espace__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--teinte) 10%, transparent);
  color: var(--teinte);
}

.espace__point-titre {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--encre);
}

.espace__point-texte {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gris);
}

.espace__note {
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem;
  border-inline-start: 3px solid var(--ambre);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  background: var(--papier);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--encre-douce);
}

.espace__note b { color: var(--encre); }

/* --- La pile d'écrans ---
   Cinq captures en cascade, coupées par le bord droit de la page.

   Le débordement est le sujet : une capture cadrée bien au centre se regarde
   comme une preuve qu'on présente, une pile qui sort du cadre se regarde
   comme un produit qui continue au-delà de ce qu'on montre. C'est aussi ce
   qui permet d'en aligner cinq sans doubler la hauteur de la section.

   La marge négative est calculée, pas devinée : elle vaut la moitié de ce
   qui dépasse du conteneur, plus une marge. La pile sort donc exactement
   jusqu'au bord de la fenêtre, quelle que soit la largeur de l'écran, et la
   section la coupe net. */
.pile {
  position: relative;
  aspect-ratio: 5 / 4;
  margin-right: calc(-1 * max(1.5rem, (100vw - var(--largeur)) / 2 + 1.25rem));
}

.pile__ecran {
  position: absolute;
  height: auto;
  border-radius: 10px;
}

/* Le navigateur, au fond et tranché par le bord de la page. C'est lui qui
   porte l'effet : un écran coupé dit que le produit continue au-delà de ce
   qu'on montre. Estompé, il donne la profondeur sans disputer la lecture au
   portable posé devant. */
.pile__ecran--navigateur {
  top: 0;
  left: 44%;
  width: 62%;
  opacity: 0.6;
  filter: saturate(0.85);
}

/* Le portable porte l'essentiel : c'est la vue que le prospect se représente
   quand il pense « espace salarié ». Remonté et resserré pour dégager la
   bande du bas, où passent les téléphones. */
.pile__ecran--bureau {
  top: 4%;
  left: 0;
  width: 70%;
  filter: drop-shadow(0 26px 45px rgb(27 41 66 / 24%));
}

/* Les deux téléphones descendent en diagonale sous le portable, du centre
   vers la droite. Deux écrans bien alignés se lisent comme un catalogue ;
   décalés, ils prolongent la ligne que dessinent déjà le portable et le
   navigateur, et la composition se lit d'un seul mouvement. */
.pile__ecran--tel1,
.pile__ecran--tel2 {
  width: 25%;
  filter: drop-shadow(0 18px 32px rgb(27 41 66 / 28%));
}

.pile__ecran--tel1 { bottom: 0; left: 24%; }
.pile__ecran--tel2 { bottom: 11%; left: 55%; }

/* ---------------------------------------------------------------------
   La pile du héros

   Même construction, autres placements : la colonne du héros est plus
   large que haute, et l'écran d'administration y est net plutôt
   qu'estompé. Ailleurs il tient le second rôle derrière un portable ;
   ici c'est lui qu'on vient voir.

   Les trois appareils descendent en diagonale du coin haut-droit vers le
   bas-gauche. La borne ancre la composition : c'est le seul aplat sombre
   d'une page claire, et c'est aussi ce que le produit a de particulier. */
/* Deux appareils, pas trois. Le cadre se resserre d'autant : à trois, il
   réservait une hauteur que le planning seul occupait, et son départ aurait
   laissé une bande blanche au-dessus du portable. */
.pile--heros { aspect-ratio: 4 / 2.6; }

/* Le portable porte ce que le responsable regarde le matin : qui est en
   poste, qui a pointé, ce qu'il reste à trancher. Ses quatre chiffres sont
   les seuls éléments qui restent lisibles à cette taille.

   Remonté en haut du cadre et élargi maintenant qu'il n'a plus le planning
   derrière lui : c'est lui qui porte la profondeur, et il gagne à déborder
   davantage par la droite. */
.pile__ecran--portable {
  top: 0;
  left: 10%;
  width: 96%;
  filter: drop-shadow(0 28px 48px rgb(27 41 66 / 22%));
}

/* Le téléphone devant, et en entier.

   C'est lui qui porte le propos : trois notifications sur un écran
   verrouillé disent que le logiciel travaille sans qu'on l'ouvre. Réduites,
   elles deviennent illisibles et l'image ne dit plus rien — d'où cette
   largeur, qui est le minimum pour qu'on puisse les lire. */
/* Posé à droite, devant le portable.

   À gauche il touchait la colonne de texte et bouchait le début de l'écran
   d'administration — celui où se lisent les quatre chiffres du matin. À
   droite il couvre la colonne des demandes, moins parlante à cette taille,
   et il laisse respirer l'espace entre le texte et l'image.

   Calé sur la droite plutôt que sur la gauche : le cadre déborde du côté
   droit de la page, et une position mesurée depuis la gauche l'aurait
   poussé hors de l'écran sur les moniteurs étroits. */
.pile__ecran--notifications {
  bottom: 0;
  right: 6%;
  width: 29%;
  filter: drop-shadow(0 22px 40px rgb(27 41 66 / 30%));
}

@media (max-width: 900px) {
  /* Sur une colonne, la pile reprend la largeur du texte. */
  .pile--heros { margin-right: 0; aspect-ratio: 4 / 2.75; }
  .pile__ecran--portable { top: 0; left: 16%; width: 84%; }
  .pile__ecran--notifications { bottom: 0; left: auto; right: 0; width: 34%; }
}


@media (max-width: 900px) {
  .espace { grid-template-columns: 1fr; gap: 2.5rem; margin-top: 3.5rem; padding-top: 2.75rem; }

  /* Sur une colonne, la pile reprend la largeur du texte : un débordement
     n'a de sens qu'à côté de quelque chose. */
  .pile { margin-right: 0; aspect-ratio: 4 / 3; }
  .pile__ecran--navigateur { display: none; }
  .pile__ecran--bureau { width: 100%; top: 4%; }
  .pile__ecran--tel1 { left: 8%; width: 28%; }
  .pile__ecran--tel2 { left: 44%; width: 28%; }
}

.terrain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }

.terrain__case {
  margin: 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--papier);
}
.terrain__case img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.terrain__case figcaption { padding: 1.3rem 1.4rem 1.5rem; background: var(--blanc); }
.terrain__lieu { font-size: 1.05rem; }
.terrain__texte { margin-top: .5rem; color: var(--gris); font-size: .92rem; line-height: 1.6; }

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

/* =====================================================================
   La matière
   =====================================================================

   Un site de pointage posé sur des aplats unis ne dit rien de ce qu'il
   vend. Trois motifs, et un seul vocabulaire : **le papier réglé du relevé
   d'heures**. Des traits verticaux d'heure en heure, une hachure de plage
   en cours, un rail gradué. Rien qui ne vienne du sujet.

   Aucune vague, aucun dégradé décoratif, aucune forme organique : elles
   parleraient d'un autre produit.
   ===================================================================== */

/* --- Le papier réglé -----------------------------------------------------
   Un trait tous les 52 px, un plus marqué toutes les quatre colonnes —
   comme un relevé où l'heure pleine est plus appuyée que le quart. À 3 %
   d'opacité on ne le voit pas ; on sent que le fond n'est pas vide. */
/* `overflow: hidden` et non `overflow-x` seul : les ornements débordent du
   coin à dessein, et sans cette coupe ils élargissent le document — une
   barre de défilement horizontale apparaissait en bas de la page. La coupe
   est posée sur les sections, jamais sur le corps : sur le corps, elle
   casserait l'en-tête collant. */
.regle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.regle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(90deg, rgb(27 41 66 / 5%) 0 1px, transparent 1px 208px),
    repeating-linear-gradient(90deg, rgb(27 41 66 / 2.5%) 0 1px, transparent 1px 52px);
  /* Le motif s'éteint en haut et en bas : une trame qui s'arrête net sur
     une bordure fait grillage. */
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

/* Sur l'encre, la même trame en clair. */
.cout::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 6%) 0 1px, transparent 1px 208px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 3%) 0 1px, transparent 1px 52px);
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  pointer-events: none;
}
.cout { position: relative; isolation: isolate; overflow: hidden; }
.cout > * { position: relative; }

/* --- La hachure de plage en cours ---------------------------------------
   Reprise telle quelle du logiciel, où elle signale une journée commencée
   et non finie. Sur le bloc d'essai, elle dit la même chose : c'est en
   cours, ça ne vous engage pas. */
.essai::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 42%;
  background: repeating-linear-gradient(
    115deg,
    rgb(240 144 0 / 9%) 0 6px,
    transparent 6px 14px
  );
  mask-image: linear-gradient(90deg, transparent, #000 75%);
  pointer-events: none;
}
.essai > * { position: relative; }

/* --- Le rail gradué -----------------------------------------------------
   Une règle de mesure en tête de section, avec ses graduations. C'est le
   haut de la frise du logiciel, réduit à son trait. */
.rail {
  position: relative;
  height: 18px;
  margin-bottom: 2.2rem;
  border-top: 1px solid var(--trait);
}
.rail::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 7px;
  background-image: repeating-linear-gradient(90deg, var(--trait) 0 1px, transparent 1px 52px);
}
/* Une graduation sur quatre descend plus bas : l'heure pleine. */
.rail::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 13px;
  background-image: repeating-linear-gradient(90deg, var(--gris-clair) 0 1px, transparent 1px 208px);
}
.cout .rail { border-top-color: rgb(255 255 255 / 18%); }
.cout .rail::before { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 18%) 0 1px, transparent 1px 52px); }
.cout .rail::after { background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / 38%) 0 1px, transparent 1px 208px); }

/* --- Le halo du héros, qui respire --------------------------------------
   Douze secondes par cycle, une amplitude de quatre pour cent. C'est sous
   le seuil où l'œil suit le mouvement : on ne le voit pas bouger, on voit
   que la page est vivante. */
@keyframes halo-respire {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .78; }
}
.heros::before { animation: halo-respire 12s ease-in-out infinite; }

/* =====================================================================
   L'apparition au défilement
   =====================================================================
   Une seule grammaire pour tout le site : dix pixels de montée et un
   fondu, en 520 ms. Pas de glissement latéral, pas de rotation, pas de
   zoom — trois effets différents dans une même page donnent l'impression
   que chaque section a été faite par quelqu'un d'autre.

   Le décalage entre voisins vient d'une variable posée par le script.
   ===================================================================== */
.parait {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .52s ease-out, transform .52s cubic-bezier(.22, .8, .3, 1);
  transition-delay: var(--retard, 0ms);
}
.parait.est-la {
  opacity: 1;
  transform: none;
}

/* Sans JavaScript, ou pour qui demande moins d'animation : tout est là
   d'emblée. Un contenu qui dépend d'une animation pour s'afficher est un
   contenu qu'on peut perdre. */
@media (prefers-reduced-motion: reduce) {
  .parait { opacity: 1; transform: none; transition: none; }
  .heros::before { animation: none; }
}
.sans-js .parait { opacity: 1; transform: none; }

/* =====================================================================
   Les survols qui répondent
   ===================================================================== */
.carte { position: relative; overflow: hidden; }

/* La couleur du domaine monte du bas de la carte au survol. Discrète —
   sept pour cent — mais elle confirme le geste sans déplacer le texte. */
.carte::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: var(--teinte);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, .8, .3, 1);
}
.carte:hover::after { transform: scaleX(1); }

.moyen { transition: border-color .2s, transform .2s, box-shadow .2s; }
.moyen:hover {
  border-color: var(--gris-clair);
  transform: translateY(-3px);
  box-shadow: var(--ombre-douce);
}

.terrain__case img { transition: transform .5s cubic-bezier(.22, .8, .3, 1); }
.terrain__case:hover img { transform: scale(1.03); }

/* La question qui s'ouvre : la réponse se déplie plutôt que d'apparaître
   d'un coup. `interpolate-size` est ignoré là où il n'est pas connu, et la
   question fonctionne alors exactement comme avant. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .question::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .3s ease, content-visibility .3s allow-discrete;
  }
  .question[open]::details-content { block-size: auto; }
}

/* --- Le chiffre qui monte -----------------------------------------------
   Les trois nombres du coût se comptent à l'arrivée à l'écran. Un chiffre
   posé se lit ; un chiffre qui se compte se retient. */
.cout__chiffre b { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Les ornements de coin
   =====================================================================
   Un cadran d'horloge, une semaine de barres. Ils débordent du coin — on
   n'en voit qu'un quartier — et restent sous 7 % d'opacité : à ce niveau
   ils ne se regardent pas, ils empêchent le fond d'être plat.

   Débordés à dessein : un motif entier posé dans un angle fait médaille.
   Coupé par le bord, il suggère qu'il continue.
   ===================================================================== */
.ornement {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  color: var(--encre);
  opacity: .055;
}
.ornement--droite { inset-block-start: -62px; inset-inline-end: -78px; }
.ornement--gauche { inset-block-start: -54px; inset-inline-start: -72px; }

/* Sur l'encre, le motif passe en clair.
   Sept pour cent suffisaient sur un fond clair, où l'encre tranche. Sur le
   bleu nuit, le même réglage donne un écart de luminosité d'environ cinq
   pour cent : le cadran est dans la page, et personne ne le voit. Quinze
   pour cent le rendent perceptible sans qu'il entre en concurrence avec le
   texte, qui est à cent. */
.cout .ornement { color: #fff; opacity: .15; }

/* La semaine se pose dans l'angle bas, où elle ne rencontre aucun titre. */
.ornement--semaine { inset-block-start: auto; inset-block-end: 2.2rem; }

/* --- L'ornement qui accompagne la descente ------------------------------
   Il ne reste pas cloué en haut de sa section : il la traverse à mesure
   qu'on la lit. `--suivi` va de 0 à 1 entre l'entrée et la sortie de la
   section à l'écran, et le script le tient à jour.

   Le déplacement se fait en `translate3d` : c'est la seule propriété que
   le navigateur sait animer sans recalculer la mise en page, et un
   ornement qui déclencherait un reflow à chaque pixel de défilement
   rendrait la page poisseuse. */
.ornement[data-suit] {
  --suivi: 0;
  --course: 0px;
  transform: translate3d(0, calc(var(--suivi) * var(--course)), 0);
  will-change: transform;
}

/* Et les aiguilles tournent avec. Un demi-tour sur la hauteur d'une
   section : l'horloge mesure la descente, ce qui est exactement ce que
   fait le produit. Le cadran, lui, ne bouge pas — une horloge dont le
   cadran tourne n'est plus une horloge. */
.ornement__aiguilles {
  transform: rotate(calc(var(--suivi) * 180deg));
  transform-origin: 160px 160px;
}

@media (prefers-reduced-motion: reduce) {
  .ornement[data-suit] { transform: none; }
  .ornement__aiguilles { transform: none; }
}

/* Sous 820 px, les ornements disparaissent : sur un téléphone ils mangent
   la marge du texte, et le peu qu'ils apportent ne le vaut pas. */
@media (max-width: 820px) {
  .ornement { display: none; }
}

/* =====================================================================
   Le calculateur de tarif
   =====================================================================
   Deux colonnes : le réglage à gauche, le montant à droite sur fond
   d'encre. Le contraste n'est pas décoratif — c'est la seule chose de
   cette page qu'on vient chercher, et elle doit se trouver sans lire.
   ===================================================================== */
.devis {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 0;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  overflow: hidden;
  box-shadow: var(--ombre-douce);
}

.devis__reglage { padding: 2.4rem; }
.devis__question { display: block; font-size: 1.02rem; font-weight: 650; }

.devis__ligne { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.4rem; }

.devis__compte {
  min-width: 4.4rem;
  padding: .45rem .7rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  background: var(--papier);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.devis__bornes {
  display: flex; justify-content: space-between;
  margin-top: .5rem; padding-inline-end: 5.8rem;
  color: var(--gris-clair); font-size: .8rem;
}

.devis__aide { margin-top: 1.1rem; color: var(--gris); font-size: .86rem; line-height: 1.55; }
.devis__aide a { color: var(--ambre-lien); }




/* --- Le curseur ---------------------------------------------------------
   Redessiné, parce que le curseur du système est gris sur gris et qu'on ne
   voit pas qu'il se déplace. La piste se remplit d'ambre à gauche du
   bouton : c'est la seule façon de lire une valeur sur un curseur sans
   regarder le nombre. */
input[type="range"] {
  flex: 1;
  height: 26px;
  margin: 0;
  background: none;
  appearance: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--ambre) 0 var(--rempli, 0%),
    var(--trait) var(--rempli, 0%) 100%
  );
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--trait);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--ambre);
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px; height: 22px;
  margin-top: -8px;
  border: 3px solid var(--blanc);
  border-radius: 50%;
  background: var(--ambre-fonce);
  box-shadow: 0 1px 6px rgb(27 41 66 / 28%);
  transition: transform .12s;
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 3px solid var(--blanc);
  border-radius: 50%;
  background: var(--ambre-fonce);
  box-shadow: 0 1px 6px rgb(27 41 66 / 28%);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

/* --- Le montant --------------------------------------------------------- */
.devis__montant {
  display: flex;
  flex-direction: column;
  padding: 2.4rem;
  background: var(--encre);
  color: var(--blanc);
}

.bascule {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
}
.bascule__choix {
  padding: .5rem 1.05rem;
  border: 0; border-radius: 999px;
  background: none;
  color: rgb(255 255 255 / 62%);
  font-size: .88rem; font-weight: 600;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}
.bascule__choix.est-actif { background: var(--blanc); color: var(--encre); }

.devis__economie { margin-top: .9rem; color: var(--ambre); font-size: .85rem; font-weight: 600; }

.devis__prix { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid rgb(255 255 255 / 14%); }

.devis__somme { display: flex; align-items: baseline; gap: .4rem; }
/* Chasse proportionnelle, pas la chasse fixe de `.nombre` : en monospace
   la virgule occupe une case entière et « 48,30 » se lit « 48 , 30 ».
   Les chiffres restent tabulaires — ils ne doivent pas sautiller quand le
   curseur bouge. */
.devis__somme b {
  font-family: var(--police);
  font-variant-numeric: tabular-nums;
  font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
}
.devis__euro { font-size: 1.6rem; font-weight: 600; }
.devis__par { margin-top: .3rem; color: rgb(255 255 255 / 60%); font-size: .88rem; }

.devis__conditions { display: grid; gap: .45rem; margin-top: 1.4rem; font-size: .89rem; color: rgb(255 255 255 / 76%); }
.devis__conditions li { display: flex; gap: .55rem; }
.devis__conditions li::before { content: "·"; color: var(--ambre); font-weight: 700; }

.devis__actions { display: grid; gap: .6rem; margin-top: auto; padding-top: 2rem; }
.devis__mention { margin-top: .9rem; text-align: center; color: rgb(255 255 255 / 48%); font-size: .8rem; }

/* --- Ce qui est compris --- */
.compris {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 2rem;
  max-width: 52rem;
  margin-inline: auto;
}
.compris__ligne { display: flex; align-items: flex-start; gap: .8rem; font-size: .97rem; }
.compris__coche {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e7f7f0; color: #0b7a4d;
}

/* =====================================================================
   La borne murale : deux offres
   =====================================================================
   Celle qu'on recommande est à droite, cerclée d'ambre et étiquetée. Une
   mise en page qui se veut neutre entre deux options n'aide personne à
   choisir — et le client finit par prendre la première, qui n'est pas
   forcément celle qui lui convient.
   ===================================================================== */
.borne {
  max-width: 58rem;
  margin: 3rem auto 0;
  padding-top: 2.6rem;
  border-top: 1px solid var(--trait);
}
.borne__titre { font-size: 1.5rem; text-align: center; }
.borne__intro {
  max-width: 44rem; margin: .9rem auto 0;
  color: var(--gris); text-align: center; line-height: 1.65;
}

.borne__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem;
  align-items: start;
}

.offre {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.8rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
}

/* Celle qu'on recommande : filet ambre, fond très pâle, et une étiquette
   qui dit pourquoi. Sans l'étiquette, l'encadré ambre passerait pour la
   plus chère plutôt que pour la plus simple. */
.offre--mise-en-avant {
  position: relative;
  border-color: var(--ambre);
  background: var(--ambre-voile);
  box-shadow: 0 0 0 3px rgb(240 144 0 / 10%);
}
/* `align-self` et non `display: inline-block` : dans un conteneur flexible
   en colonne, les enfants sont étirés sur toute la largeur quel que soit
   leur display. L'étiquette faisait une bannière. */
.offre__marque {
  align-self: flex-start;
  padding: .2rem .65rem;
  margin-bottom: .8rem;
  border-radius: 999px;
  background: var(--ambre);
  color: #20160a;
  font-size: .76rem; font-weight: 700;
}

.offre__quoi { font-size: 1.08rem; font-weight: 650; }
.offre__prix { display: flex; align-items: baseline; gap: .5rem; margin-top: .7rem; }
/* Chasse proportionnelle, comme le grand prix du calculateur : en
   monospace l'espace insécable avant l'euro fait une case entière. */
.offre__prix b {
  font-family: var(--police);
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em;
}
.offre__prix span { color: var(--gris); font-size: .85rem; }

.offre__texte { margin-top: .8rem; color: var(--gris); font-size: .93rem; line-height: 1.6; }

.offre__liste { display: grid; gap: .55rem; margin-top: 1.3rem; }
.offre__liste li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; }
.offre__liste .ico { margin-top: 2px; color: var(--vert); }

/* Le bouton se colle au bas de la carte : les deux offres n'ont pas le
   même nombre de lignes, et un bouton qui flotte au milieu de l'une des
   deux fait croire à un oubli. */
.offre .bouton { margin-top: auto; padding-top: .78rem; margin-block-start: 1.6rem; }

.borne__note {
  margin-top: 1.4rem;
  color: var(--gris);
  font-size: .87rem;
  line-height: 1.6;
  text-align: center;
}

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

@media (max-width: 900px) {
  .devis { grid-template-columns: 1fr; }
  .compris { grid-template-columns: 1fr; }
}

/* --- Le prix unitaire ----------------------------------------------------
   Une seule ligne, en gros. Le tableau de tranches qui occupait cette place
   demandait d'être lu et recalculé ; celui-ci se lit. */
/* --- L'encart ambre ---
   Un aplat très pâle plutôt qu'une bordure de couleur : sur une page qui
   aligne déjà trois teintes de domaine, une quatrième couleur franche se
   lirait comme un quatrième domaine. L'ambre reste l'accent de la marque,
   posé à 8 % il attire l'œil sans revendiquer une catégorie. */
.encart {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  /* C'est la boîte qu'on limite, pas le texte à l'intérieur.
     Une ligne de plus de 75 caractères fait perdre sa ligne à l'œil quand il
     revient à gauche : la contrainte est nécessaire. Mais la poser sur le
     texte seul, dans un encart à bordure visible, laissait cinq cents pixels
     de vide à droite — la règle passait alors pour un oubli. */
  max-width: 49rem;
  /* Marge haute remise à zéro : l'encart hérite d'une marge de paragraphe
     qui s'ajoutait au padding de la section, et l'écart montait à 90 px sous
     la bannière. */
  margin: 0 0 3.5rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid color-mix(in srgb, var(--ambre) 38%, transparent);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--ambre) 8%, var(--blanc));
}

/* `flex: none` : sans lui la pastille est un élément flexible et se laisse
   écraser par le texte, ce qui donne une icône plus petite que prévu. */
.encart__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--rayon-petit);
  background: var(--blanc);
  border: 1px solid color-mix(in srgb, var(--ambre) 45%, transparent);
  color: var(--ambre-lien);
}

.encart__titre { margin: .15rem 0 0; font-size: 1.16rem; color: var(--encre); }
.encart__texte { margin: .5rem 0 0; font-size: .97rem; line-height: 1.65; color: var(--encre-douce); }

@media (max-width: 520px) {
  .encart { flex-direction: column; gap: .9rem; padding: 1.3rem 1.4rem; }
}

/* =====================================================================
   Le blog
   ===================================================================== */
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem; }

.article__lien {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.9rem 1.8rem 1.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.article__lien:hover { border-color: var(--gris-clair); transform: translateY(-2px); }

.article__meta {
  margin: 0; display: flex; gap: .5rem; align-items: baseline;
  font-size: .82rem; color: var(--gris-clair);
}

.article__titre {
  margin: .7rem 0 0; font-size: 1.28rem; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--encre);
}

.article__resume { margin: .7rem 0 0; color: var(--gris); font-size: .96rem; line-height: 1.6; }

/* Poussé en bas de la carte : les résumés n'ont pas la même longueur, et
   trois « Lire l'article » à trois hauteurs différentes se remarquent. */
.article__suite {
  margin-top: auto; padding-top: 1.3rem;
  display: flex; align-items: center; gap: .35rem;
  font-size: .92rem; font-weight: 600; color: var(--ambre-lien);
}

.article__lien:hover .article__suite .ico { transform: translateX(3px); }
.article__suite .ico { transition: transform 160ms ease; }

/* --- La grille des paliers ---
   Cinq lignes, dont une allumée : celle que le curseur désigne. Un tableau
   figé se lit une fois et s'oublie ; celui-ci répond au geste, et c'est ce
   qui fait comprendre la dégressivité sans l'expliquer. */
.paliers { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.palier {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .6rem .85rem;
  border-radius: var(--rayon-petit);
  font-size: .95rem;
  color: var(--gris);
  transition: background-color 160ms ease, color 160ms ease;
}

.palier__prix { font-weight: 600; color: var(--encre-douce); font-variant-numeric: tabular-nums; }

.palier.est-actif { background: color-mix(in srgb, var(--ambre) 16%, transparent); color: var(--encre); }
.palier.est-actif .palier__prix { color: var(--encre); }

.paliers__note { margin-top: .8rem; font-size: .84rem; color: var(--gris-clair); }

.devis__prixUnitaire {
  display: flex; align-items: baseline; gap: .6rem;
  margin-top: 1.8rem; padding-top: 1.6rem;
  border-top: 1px solid var(--trait);
}
.devis__prixUnitaire b {
  font-family: var(--police);
  font-variant-numeric: tabular-nums;
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.035em;
}
.devis__prixUnitaire span { color: var(--gris); font-size: .92rem; }

/* Le second prix se pose sous le premier, sans le trait de séparation :
   c'est la suite de la même phrase, pas un autre sujet. */
.devis__prixUnitaire--second {
  margin-top: .4rem; padding-top: 0; border-top: 0;
}
.devis__prixUnitaire--second b { font-size: 1.5rem; color: var(--gris); }
.devis__prixUnitaire--second span { font-size: .86rem; }

/* =====================================================================
   La bannière des pages intérieures
   =====================================================================
   Claire, et non en encre : trois bandes sombres sur un site en font un
   site sombre. Le poids vient de la taille du titre et du filet qui ferme
   la bande — pas de la couleur du fond.

   Le dégradé va du blanc au papier, très court. Il ne se voit pas ; il
   évite que la bande et le contenu ne soient exactement du même gris, ce
   qui les ferait lire comme un seul bloc.
   ===================================================================== */
.entete-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2.6rem 0 2.8rem;
  background: linear-gradient(180deg, var(--blanc) 0%, var(--papier) 100%);
  border-bottom: 1px solid var(--trait);
}

/* --- Le fil d'Ariane --- */
.fil {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: 1.4rem;
  font-size: .84rem; color: var(--gris);
}
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.fil [aria-current] { color: var(--encre); font-weight: 550; }
/* Le chevron pointe vers la droite : posé tel quel, il désignerait le bas. */
.fil__chevron { transform: rotate(-90deg); color: var(--gris-clair); }

/* Le rail est plus court ici que sur l'accueil : il ponctue le titre, il
   ne coiffe pas une section entière. */
.rail--court { width: 12rem; margin-bottom: 1.5rem; }

/* Pas de `max-width` en caractères : les titres portent déjà leur propre
   coupe de ligne, et deux contraintes concurrentes donnaient un titre sur
   quatre lignes là où deux suffisaient. */
.entete-page__titre {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -.032em;
  max-width: 36rem;
}

.entete-page__chapeau {
  margin-top: 1rem;
  max-width: 46rem;
  color: var(--encre-douce);
  font-size: 1.06rem;
  line-height: 1.6;
}

/* Les pages de texte perdent leur propre titre : il est monté dans la
   bannière. Ce qui reste commence donc plus haut. */
.texte--sous-entete { padding-top: 2.8rem; }

@media (max-width: 820px) {
  .entete-page { padding: 1.8rem 0 2rem; }
  .rail--court { width: 8rem; margin-bottom: 1.1rem; }
}