/* ============================================================================
   DEVISALY — v3 · « CRAFT »
   Passe de finition (2026-10-18, 5e). Trois choses, et rien de plus :

   1. ON RETIRE LES TICS. Le sur-titre en capitales espacées, le mot du titre en
      dégradé, la fausse barre de navigateur (trois pastilles + URL), les numéros
      de section 01/02/03 sur du contenu qui n'est pas une séquence, les flèches
      « → » collées aux liens : tout cela est le vocabulaire d'une page générée.
   2. UN SEUL MOMENT ORCHESTRÉ. Le titre du héros se lève ligne par ligne derrière
      un masque, pendant que l'appareil arrive. Le reste du page se contente de
      paraître (12 px, sans flou) — pas de montée-fondu sur chaque bloc.
   3. UN VRAI OBJET À MANIPULER : le comparateur. On tire la poignée, la page
      générique s'efface devant la nôtre. Souris, doigt, flèches du clavier.
   ========================================================================== */

/* --- 1. le sur-titre : une phrase, un filet, plus de capitales -------------- */
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 500; letter-spacing: .01em;
  text-transform: none;
  color: var(--encre-45);
}
.surtitre::before {
  content: ""; width: 16px; height: 1px;
  background: var(--ambre);
  box-shadow: none; border-radius: 0;
}
/* les titres de section, sans numéro décoratif */
.entete > .surtitre + .entete__titre { margin-top: 12px; }

/* --- 1 bis. plus de fausse barre de navigateur ----------------------------- */
.carte-3d__chrome { display: none !important; }
.carte-3d__ecran { padding: 0; }
.carte-3d__vue {
  border-radius: inherit;
  border-bottom: 1px solid var(--filet-2);
}

/* --- 1 ter. les en-têtes des pages : le filet remplace le numéro ------------ */
.entete { position: relative; }

/* --- 2. le héros : lignes masquées ---------------------------------------- */
.heros__titre .ligne { display: block; overflow: hidden; }
.heros__titre .ligne > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease-out);
}
.heros__titre[data-pose="1"] .ligne:nth-child(1) > span { transform: none; transition-delay: .05s; }
.heros__titre[data-pose="1"] .ligne:nth-child(2) > span { transform: none; transition-delay: .16s; }
.heros__titre[data-pose="1"] .ligne:nth-child(3) > span { transform: none; transition-delay: .27s; }
.heros__titre .souligne {
  position: relative;
  white-space: nowrap;
}
.heros__titre .souligne::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: .06em;
  height: .06em;
  background: var(--ambre);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out) .55s;
}
.heros__titre[data-pose="1"] .souligne::after { transform: scaleX(1); }

/* la lumière suit le pointeur, très discrètement */
.heros::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(420px 320px at var(--mx, 30%) var(--my, 40%), rgb(255 255 255 / .75), transparent 70%);
  opacity: 0; transition: opacity .5s var(--ease);
  z-index: 0;
}
.heros:hover::before { opacity: .55; }

/* --- 2 bis. entrées sobres ------------------------------------------------- */
.entree { opacity: 0; transform: translateY(14px); filter: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.entree.vu { opacity: 1; transform: none; }
.entree[data-retard="1"] { transition-delay: .06s; }
.entree[data-retard="2"] { transition-delay: .12s; }
.entree[data-retard="3"] { transition-delay: .18s; }

/* ⚠️ `overflow-x: clip` (et pas `hidden`) : `hidden` crée un conteneur de scroll
   et casse `position: sticky` — voir la séquence. `clip` rogne sans déplacer. */
html, body { overflow-x: clip; }

/* --- 3. LE COMPARATEUR ---------------------------------------------------- */
.comparateur {
  --p: 52%;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--filet-2);
  box-shadow: var(--lisere), var(--ombre-2);
  user-select: none;
  touch-action: pan-y;
}
.comparateur { max-width: 1120px; margin-inline: auto; }
.comparateur__panneau { position: relative; aspect-ratio: 16 / 8; }
.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 page générique (avant) — */
.generique { background: #f2f0ec; display: grid; place-items: center; text-align: center; padding: 6%; height: 100%; }
.generique__interieur { display: grid; gap: 10px; justify-items: center; max-width: 34ch; }
.generique__logo { width: 34px; height: 34px; border-radius: 8px; background: #d9d5cc; }
.generique__titre { font-size: clamp(1rem, 2.2vw, 1.5rem); font-weight: 600; color: #6b6862; letter-spacing: -.02em; }
.generique__texte { font-size: clamp(.6875rem, 1.1vw, .8125rem); color: #8d8a83; line-height: 1.6; }
.generique__bouton {
  margin-top: 6px; padding: 7px 14px; border-radius: 6px;
  background: #dad6cd; color: #7c7973; font-size: .6875rem; font-weight: 600;
}

/* — la page Devisaly (après) — */
.devisaly-page { background: #fff; display: grid; grid-template-columns: 1fr; height: 100%; }
.devisaly-page__gauche { padding: 6% 8% 5% 7%; display: flex; flex-direction: column; }
.devisaly-page__marque { font-size: clamp(.5rem, .8vw, .6875rem); font-weight: 700; letter-spacing: .02em; color: #14151a; }
.devisaly-page__kicker { margin-top: 16px; font-size: clamp(.5rem, .82vw, .6875rem); font-weight: 600; color: var(--ambre); letter-spacing: .04em; }
.devisaly-page__titre { margin-top: 6px; font-size: clamp(.95rem, 2.3vw, 1.75rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; color: #14151a; }
.devisaly-page__sous { margin-top: 8px; font-size: clamp(.5625rem, .95vw, .75rem); color: #6a6b73; line-height: 1.5; max-width: 28ch; }
.devisaly-page__cta {
  margin-top: auto; align-self: flex-start;
  padding: 6px 12px; border-radius: 99px; background: #14151a; color: #fff;
  font-size: clamp(.5rem, .82vw, .6875rem); font-weight: 600;
}
.devisaly-page__prix { margin-top: 12px; display: grid; gap: 0; 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__ligne { display: flex; justify-content: space-between; font-size: clamp(.5rem, .85vw, .6875rem); color: #55565e; padding: 5px 0; border-top: 1px solid #ece7dd; }
.devisaly-page__ligne:first-child { border-top: 0; }
.devisaly-page__ligne b { color: #14151a; font-weight: 600; }

/* — la poignée — */
.comparateur__poignee {
  position: absolute; top: 0; bottom: 0; left: var(--p);
  width: 2px; margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(10 11 16 / .14), 0 0 24px rgb(10 12 30 / .22);
  cursor: ew-resize;
  border: 0; padding: 0;
  z-index: 3;
}
.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(10 12 30 / .22), 0 0 0 1px rgb(10 11 16 / .06);
}
.comparateur__poignee::before {
  content: "‹ ›";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; font-size: .75rem; color: var(--encre-45); letter-spacing: .06em;
}
.comparateur__poignee:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
.comparateur__etiquette {
  position: absolute; top: 14px;
  font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
  padding: 5px 10px; border-radius: 99px;
  background: rgb(255 255 255 / .86);
  border: 1px solid rgb(10 11 16 / .07);
  color: var(--encre-45);
  z-index: 2; pointer-events: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.comparateur__etiquette--gauche { left: 14px; }
.comparateur__etiquette--droite { right: 14px; color: var(--encre); }

/* --- 3 bis. le bandeau défilant des métiers ------------------------------- */
.bandeau { overflow: hidden; border-top: 1px solid var(--filet-2); border-bottom: 1px solid var(--filet-2); padding: 16px 0; }
.bandeau__piste { display: flex; gap: 34px; width: max-content; animation: bandeau 64s linear infinite; }
.bandeau:hover .bandeau__piste { animation-play-state: paused; }
.bandeau span { font-size: .9375rem; color: var(--encre-45); white-space: nowrap; }
.bandeau span:nth-child(odd) { color: var(--encre); }
@keyframes bandeau { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau__piste { animation: none; } }

@media (max-width: 1080px) {
  .comparateur__panneau { aspect-ratio: 4 / 3.2; }
  .devisaly-page { grid-template-columns: 1fr; }
  .devisaly-page__droite { display: none; }
  .comparateur__etiquette { display: none; }
}


/* --- 4. les captures d'exemple : plus de fondu, un cadre plus haut ---------- */
/* ⚠️ le `mask-image` laissait une bande blanche au bas de chaque carte (le fond
   blanc de la carte apparaissait sous l'image). Une découpe nette dans un cadre
   arrondi se lit comme une capture, pas comme un dégradé raté. */
.carte-3d__vue { aspect-ratio: 16 / 11.5; }
.carte-3d__vue img { -webkit-mask-image: none; mask-image: none; }


/* ⚠️ On a retiré les numéros 01/02/03 du registre (ce n'est pas une séquence),
   mais la grille gardait sa première colonne de 52 px : les titres s'y écrasaient
   sur quatre lignes. Deux colonnes, tout simplement. */
.registre__ligne { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
.deux-col .registre__ligne { grid-template-columns: minmax(0, 1fr); }


/* --- 5. LA COLONNE DE LECTURE --------------------------------------------- */
/* CGV, confidentialité, mentions, articles : 68 caractères, interligne 1,68,
   titres à 1,25 rem qui respirent. Un texte long ne se lit pas dans du 17 px
   serré sur 110 caractères. */
.prose { max-width: 68ch; margin-top: clamp(28px, 4vw, 52px); }
.prose h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.2;
  margin: 44px 0 12px;
}
.prose h3 { font-size: 1.0625rem; font-weight: 600; margin: 28px 0 8px; letter-spacing: -.02em; }
.prose p { font-size: 1rem; line-height: 1.68; color: var(--encre-70); margin: 0 0 14px; }
.prose li { font-size: 1rem; line-height: 1.68; color: var(--encre-70); margin: 0 0 8px 18px; list-style: disc; }
.prose ul, .prose ol { margin: 0 0 18px; padding: 0; }
.prose strong, .prose b { color: var(--encre); font-weight: 600; }
.prose a { color: var(--encre); text-decoration: underline; text-decoration-color: rgb(154 106 36 / .45); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ambre); }
.prose h2:first-child { margin-top: 0; }
.prose > p:first-of-type { font-size: 1.0625rem; color: var(--encre); }
.prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .9375rem; }
.prose th, .prose td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--filet-2); color: var(--encre-70); }
.prose th { color: var(--encre); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--filet-2); margin: 34px 0; }


/* --- 6. LA LECTURE À DEUX COLONNES ---------------------------------------- */
.lecture { display: grid; grid-template-columns: minmax(0, 68ch) 210px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.sommaire { position: sticky; top: 96px; display: grid; gap: 2px; border-left: 1px solid var(--filet-2); padding-left: 18px; }
.sommaire__titre { font-size: .75rem; color: var(--encre-45); margin-bottom: 8px; }
.sommaire a {
  font-size: .8125rem; line-height: 1.4; color: var(--encre-45);
  padding: 5px 0; transition: color .2s var(--ease), transform .2s var(--ease);
}
.sommaire a:hover, .sommaire a.on { color: var(--encre); }
.sommaire a.on { transform: translateX(2px); }
@media (max-width: 1080px) { .lecture { grid-template-columns: 1fr; } .sommaire { display: none; } }


/* --- 7. LES ARTICLES, SANS CARTE ------------------------------------------ */
/* Un article n'est pas une carte : un titre, une phrase, un filet. */
.article {
  display: grid; align-content: start; gap: 8px;
  padding: 22px 0 20px;
  border-top: 1px solid var(--filet);
  transition: border-color .25s var(--ease);
}
.article:hover { border-top-color: var(--ambre); }
.article__titre { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.article__dit { font-size: .875rem; color: var(--encre-45); line-height: 1.55; }
.article__lire { font-size: .75rem; color: var(--encre-28); margin-top: 4px; transition: color .2s var(--ease); }
.article:hover .article__lire { color: var(--ambre); }
.lecture .prose { margin-top: 0; }


/* --- 8. LES PAGES DE COMPTE ----------------------------------------------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.auth__promesse { padding-top: 8px; }
.auth__carte { position: sticky; top: 96px; }
.plus-tard { margin-top: 14px; border-top: 1px solid var(--filet-2); padding-top: 14px; }
.plus-tard summary {
  list-style: none; cursor: pointer; font-size: .875rem; color: var(--encre-70);
  display: flex; align-items: center; gap: 8px;
}
.plus-tard summary::-webkit-details-marker { display: none; }
.plus-tard summary::before { content: "+"; font-size: 1rem; color: var(--ambre); }
.plus-tard[open] summary::before { content: "–"; }
.plus-tard__corps { margin-top: 14px; }

/* le champ mot de passe avec l'œil */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; color: var(--encre-45);
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.pw-toggle:hover { color: var(--encre); background: rgb(10 11 16 / .04); }

@media (max-width: 1080px) {
  .auth { grid-template-columns: 1fr; gap: 28px; }
  .auth__carte { position: static; }
}

.pw-wrap, .pw-wrap input { width: 100%; }
/* le pied de page n'écrit plus ses titres en capitales espacées */
.pied__titre { text-transform: none; letter-spacing: .01em; font-size: .8125rem; font-weight: 600; color: var(--encre); }

/* ⚠️ le champ MOT DE PASSE n'était pas dans la liste des champs stylés
   (`input[type=password]` manquait) : il apparaissait comme un rectangle gris
   sans contour, à côté d'un champ email noir. Mêmes règles, donc. */
input[type="password"] {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid rgb(10 11 16 / .12); border-radius: 12px;
  background: #fff; font-size: .9375rem; color: var(--encre);
  box-shadow: inset 0 1px 2px rgb(10 12 30 / .04);
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
input[type="password"]:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px rgb(10 11 16 / .07); }
input[type="password"]::placeholder { color: var(--encre-28); }


/* --- 9. CORRECTIONS D'ACCESSIBILITÉ ET DE CHROME -------------------------- */
/* lien d'évitement : premier élément focusable de la page */
.saut {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px; border-radius: 0 0 12px 0;
  background: var(--encre); color: #fff; font-size: .875rem; font-weight: 600;
}
.saut:focus { left: 0; }
/* l'entrée « Se connecter » de la barre */
.nav__compte { font-size: .8125rem; font-weight: 500; color: var(--encre-70); transition: color .2s var(--ease); }
.nav__compte:hover { color: var(--encre); }
.pied__dit { font-size: .875rem; color: var(--encre-45); max-width: 34ch; line-height: 1.55; }
@media (max-width: 1080px) { .nav__compte { display: none; } }