/* ============================================================
   THÈME « SIGNATURE » — SITE RÉEL (21/08/2026)
   ------------------------------------------------------------
   Applique la direction validée sur la maquette /signature/ à
   l'ensemble du site, SANS toucher au balisage : ce fichier
   redessine le vocabulaire de classes existant (.site-header,
   .btn, .section, .glass-card, .timeline…).

   Chargé APRÈS assets/css/styles.css, dont il prend le relais.
   Interrupteur de repli : flag `theme_signature` (feature_flags).

   Direction : canvas ivoire chaud, encre brun-noir, UN SEUL
   accent vif (azur #2377E8 du logo), serif Fraunces pour les
   titres, Instrument Sans pour le corps, IBM Plex Mono pour les
   étiquettes. Pas de glassmorphism, pas de dégradé bleu-violet,
   pas d'emoji.
   ============================================================ */

:root {
  --canvas: #F1EADD;
  --canvas-2: #E9E0CE;
  --papier: #FBF7EE;
  --ivoire: #F6EFE2;
  --encre: #272016;
  --encre-2: #6A5F4F;
  --filet: rgba(39, 32, 22, .16);
  --azur: #2377E8;
  --azur-sombre: #1B62C4;
  --ambre: #C49442;
  --alerte: #B4342A;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --marge: clamp(20px, 4vw, 56px);
  --ombre-douce: 0 24px 70px -30px rgba(63, 48, 26, .45);
  --ombre-carte: 0 30px 80px -38px rgba(63, 48, 26, .55);
  --rayon: 16px;
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--canvas);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

::selection { background: var(--azur); color: #fff; }

a { color: var(--encre); }
a:hover { color: var(--azur-sombre); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 380;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--encre);
}
h1 { font-size: clamp(34px, 5.4vw, 68px); }
h2 { font-size: clamp(28px, 3.9vw, 50px); }
h3 { font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; line-height: 1.25; }
h4 { font-size: 18px; font-weight: 500; }
p { max-width: 68ch; }
strong { font-weight: 600; }
em { font-style: italic; }

/* Focus clavier homogène */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--azur);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Ascenseur accordé */
html { scrollbar-color: rgba(39, 32, 22, .35) var(--canvas); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb {
  background: rgba(39, 32, 22, .3);
  border-radius: 999px;
  border: 3px solid var(--canvas);
}

/* Chiffres stables */
.result-pill, .price, .amount, .montant, dd, .mono { font-variant-numeric: tabular-nums; }

/* ---------- Utilitaires FONCTIONNELS ----------
   Ces classes pilotent l'affichage depuis le JS applicatif : sans
   elles, des champs conditionnels et des étapes du diagnostic
   s'afficheraient tous en même temps. À conserver impérativement. */
.hidden { display: none !important; }
[hidden] { display: none !important; }
.wizard-step[hidden], .modal-backdrop[hidden] { display: none !important; }
.preview-grid:empty { display: none; }
.medal { display: none; }
.site-footer.slim img { display: none; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre); color: var(--ivoire);
  padding: 10px 18px; z-index: 300;
}
.skip-link:focus { left: 0; }

/* ---------- En-tête : nav en pilule flottante ---------- */

.site-header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  width: min(1180px, calc(100% - 32px));
  background: rgba(251, 247, 238, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(39, 32, 22, .10);
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  box-shadow: 0 12px 34px -18px rgba(63, 48, 26, .5);
  transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
.site-header.entete-cachee { transform: translate(-50%, calc(-100% - 60px)); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
/* 22/08 : le fichier logo fourni contient DEUX propositions du
   monogramme cote a cote ; on sert la variante azur seule
   (logo-mark.png) et le nom redevient du texte. */
.brand img { width: 27px; height: auto; }
.brand span {
  font-family: var(--serif);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--encre);
}
.brand small {
  display: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
  font-weight: 400;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 500;
}
.main-nav a {
  text-decoration: none;
  color: var(--encre);
  opacity: .82;
  position: relative;
  white-space: nowrap;
}
.main-nav a:hover { opacity: 1; color: var(--encre); }
.main-nav a.actif::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -7px;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--azur);
}
.main-nav .btn { margin-left: 4px; }

/* sélecteur porté par l'en-tête : sinon la règle générique .btn,
   déclarée plus bas, l'emporterait et le bouton mobile resterait
   visible sur grand écran */
.site-header .header-cta { display: none; }
.nav-toggle {
  display: none;
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--filet);
  background: transparent;
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre);
  cursor: pointer;
}

@media (max-width: 979.98px) {
  .site-header { top: 12px; padding: 8px; gap: 8px; }
  .brand img { width: 25px; }
  .nav-toggle { display: block; }
  .site-header .header-cta { display: inline-block; }
  .main-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--papier);
    border: 1px solid rgba(39, 32, 22, .10);
    border-radius: 20px;
    padding: 14px;
    box-shadow: var(--ombre-carte);
    font-size: 16px;
  }
  .main-nav.open { display: flex; }
  .main-nav a {
    padding: 13px 12px;
    border-radius: 10px;
    opacity: 1;
  }
  .main-nav a + a { border-top: 1px solid var(--filet); }
  .main-nav .btn { margin: 8px 0 0; text-align: center; }
  .main-nav .btn + .btn, .main-nav a + .btn { border-top: 0; }
}
@media (max-width: 479.98px) {
  .header-cta { padding: 11px 15px; font-size: 14px; }
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn-primary, .btn-gold {
  background: var(--azur);
  color: #fff;
  border-color: var(--azur);
}
.btn-primary:hover, .btn-gold:hover {
  background: var(--azur-sombre);
  border-color: var(--azur-sombre);
  color: #fff;
}
.btn-secondary {
  background: rgba(251, 247, 238, .6);
  border-color: var(--filet);
  color: var(--encre);
}
.btn-secondary:hover { border-color: var(--encre); color: var(--encre); }
.btn-xl { padding: 18px 34px; font-size: 17px; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ---------- Rythme des sections ---------- */

.section {
  position: relative;
  padding: clamp(72px, 11vh, 150px) var(--marge);
  max-width: 1240px;
  margin: 0 auto;
}
.section-title { margin-bottom: clamp(34px, 5vw, 60px); max-width: 62ch; }
.section-title h2 { margin-top: 14px; }
.eyebrow, .badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.badge {
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 5px 13px;
  background: rgba(251, 247, 238, .7);
}
.lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--encre-2);
  max-width: 56ch;
}

/* ---------- Héros de la page d'accueil ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(150px, 20vh, 230px);
  padding-bottom: clamp(70px, 12vh, 130px);
  /* La section occupe TOUTE la largeur et recentre son contenu par
     son padding : la photo peut alors couvrir la section avec un
     simple inset:0. L'ancienne technique (calc(50% - 50vw)) rendait
     la page scrollable de quelques pixels, car « vw » compte la
     barre de défilement là où « % » ne la compte pas. */
  max-width: none;
  padding-inline: max(var(--marge), calc((100% - 1240px) / 2));
}
/* Photo cinématographique plein cadre (la force des références). */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero::before {
  background-image: url("/assets/img/hero-lin-1400.jpg");
  background-size: cover;
  background-position: center 42%;
  /* respiration lente pilotée par le JS (--zoom-hero) */
  transform: scale(var(--zoom-hero, 1.04));
  transform-origin: center 45%;
  will-change: transform;
}
.hero::after {
  background:
    linear-gradient(180deg,
      rgba(58, 42, 20, .58) 0%,
      rgba(58, 42, 20, .30) 38%,
      rgba(43, 30, 13, .48) 100%);
  box-shadow: inset 0 0 170px rgba(31, 22, 12, .35);
}
@media (max-width: 899.98px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 132px;
  }
  .hero::before { background-image: url("/assets/img/hero-lin-800.jpg"); }
}

/* le texte du héros passe en ivoire sur la photo. L'ombre portée
   n'est pas décorative : elle garantit la lisibilité sur les zones
   claires du cliché (rideau au soleil). */
.hero h1, .hero .hero-copy h1 {
  color: var(--ivoire);
  text-shadow: 0 2px 26px rgba(31, 22, 12, .5);
}
.hero .lead {
  color: rgba(246, 239, 226, .96);
  text-shadow: 0 1px 14px rgba(31, 22, 12, .55);
}
.hero-trust {
  color: #F6EFE2;
  text-shadow: 0 1px 12px rgba(31, 22, 12, .8), 0 0 26px rgba(31, 22, 12, .6);
}
.hero .badge { text-shadow: none; }
.hero .badge {
  color: rgba(246, 239, 226, .92);
  border-color: rgba(246, 239, 226, .45);
  background: rgba(251, 247, 238, .12);
}
.hero .btn-secondary {
  background: rgba(251, 247, 238, .14);
  border-color: rgba(246, 239, 226, .5);
  color: var(--ivoire);
}
.hero .btn-secondary:hover { border-color: var(--ivoire); color: var(--ivoire); }

.hero h1 { margin: 18px 0 0; }
.hero h1 em { font-style: normal; display: inline-block; transform: skewX(-7deg); }
.hero .lead { margin-top: 22px; }
.hero .actions { margin-top: 30px; }
.hero-trust {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
}

/* ---------- Cartes ---------- */

.glass-card, .diagnostic-card, .gold-card, .result-card, .claim-card,
.locked-card, .modal-card, .radio-card, .preview-item,
.faq-item, .cta-panel, .insurer-question, .photo-tips, .summary-grid > div {
  background: var(--papier);
  border: 1px solid rgba(39, 32, 22, .08);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: clamp(22px, 2.6vw, 32px);
}
.glass-card h3, .gold-card h3 { margin-bottom: 10px; }
.glass-card p, .gold-card p { color: var(--encre-2); }

/* la carte « exemple » du héros : mise en scène papier */
.diagnostic-card { position: relative; }
.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--filet);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.card-header img { width: 78px; height: auto; }
.mini-list { display: grid; gap: 0; }
.mini-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(39, 32, 22, .08);
}
.mini-list dt { color: var(--encre-2); font-size: 14.5px; }
.mini-list dd { margin: 0; font-weight: 500; font-size: 14.5px; }
.result-pill {
  margin-top: 20px;
  background: rgba(35, 119, 232, .07);
  border: 1px solid rgba(35, 119, 232, .25);
  border-radius: 10px;
  padding: 16px 18px;
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 500;
  color: var(--azur-sombre);
}
.diagnostic-card small, .example-more {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--encre-2);
}

/* grilles */
.grid { display: grid; gap: 22px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 899.98px) {
  .cards-3, .cards-2 { grid-template-columns: 1fr; }
}

/* ---------- Étapes / timeline ---------- */

.timeline {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: clamp(26px, 4vh, 42px);
  counter-reset: etape;
}
.timeline-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899.98px) { .timeline-3 { grid-template-columns: 1fr; } }
.timeline li {
  position: relative;
  border-top: 1px solid var(--filet);
  padding-top: 20px;
  color: var(--encre-2);
  counter-increment: etape;
}
.timeline li::before {
  content: "0" counter(etape);
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--encre-2);
  margin-bottom: 8px;
}
.timeline li strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--encre);
  display: block;
  margin-bottom: 6px;
}

/* ---------- Offres ----------
   Balisage réel : .offer-grid > article.gold-card (+ .featured),
   .offer-badge, .price, .offer-terms, small.offer-path. */

.offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr);
  gap: 26px;
  align-items: center;
}
@media (max-width: 899.98px) {
  .offer-grid { grid-template-columns: 1fr; }
}

.gold-card { display: flex; flex-direction: column; }
.offer-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 5px 12px;
  color: var(--encre-2);
  margin-bottom: 20px;
}
.gold-card h3 { font-size: 24px; }
.price {
  font-family: var(--serif);
  font-size: clamp(52px, 5vw, 72px);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.gold-card ul { list-style: none; margin: 24px 0 0; padding: 0; flex: 1; }
.gold-card li {
  font-size: 15.5px;
  color: var(--encre-2);
  padding: 11px 0;
  border-top: 1px solid rgba(39, 32, 22, .1);
}
.gold-card li:last-child { border-bottom: 1px solid rgba(39, 32, 22, .1); }
.offer-terms {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin: 22px 0 20px;
}
.gold-card .btn { text-align: center; }
/* petit lien d'aperçu sous le bouton : pas une carte */
small.offer-path {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--encre-2);
  text-align: center;
}
small.offer-path a { color: inherit; text-underline-offset: 3px; }

/* survol : la carte vient vers l'utilisateur */
.gold-card {
  transform-origin: center;
  transition: transform .38s cubic-bezier(.2,.7,.2,1), box-shadow .38s ease, border-color .25s ease;
}
.gold-card:hover { transform: scale(1.03); z-index: 2; }
@media (prefers-reduced-motion: reduce), (hover: none) {
  .gold-card, .gold-card:hover { transform: none; }
}

/* la carte mise en avant : encre sombre, cerclée d'azur */
.gold-card.featured {
  background: var(--encre);
  color: var(--ivoire);
  border-color: rgba(35, 119, 232, .45);
  padding-block: clamp(30px, 3.4vw, 44px);
  box-shadow:
    0 0 0 1px rgba(35, 119, 232, .18),
    0 0 44px -8px rgba(35, 119, 232, .28),
    0 46px 110px -42px rgba(39, 32, 22, .85);
}
.gold-card.featured:hover { transform: scale(1.05); }
.gold-card.featured h3, .gold-card.featured .price { color: var(--ivoire); }
.gold-card.featured li {
  color: rgba(246, 239, 226, .85);
  border-top-color: rgba(246, 239, 226, .14);
}
.gold-card.featured li:last-child { border-bottom-color: rgba(246, 239, 226, .14); }
.gold-card.featured strong { color: var(--ivoire); }
.gold-card.featured .offer-terms,
.gold-card.featured small.offer-path { color: rgba(246, 239, 226, .6); }
.gold-card.featured .offer-badge {
  background: var(--azur);
  border-color: var(--azur);
  color: #fff;
}
.path-note, .pro-hint { font-size: 14px; color: var(--encre-2); margin-top: 18px; }

/* ---------- FAQ (accordéon : div.faq-item > button + div[hidden]) ---------- */

.faq { display: grid; gap: 14px; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item > button {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.3;
  color: var(--encre);
  padding: clamp(20px, 2.2vw, 26px) clamp(56px, 6vw, 64px) clamp(20px, 2.2vw, 26px) clamp(22px, 2.4vw, 30px);
  position: relative;
}
.faq-item > button::after {
  content: "";
  position: absolute;
  right: clamp(22px, 2.4vw, 30px);
  top: 50%;
  width: 11px; height: 11px;
  margin-top: -6px;
  border-right: 1.5px solid var(--encre-2);
  border-bottom: 1.5px solid var(--encre-2);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.faq-item > button[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  border-color: var(--azur);
}
.faq-item > div {
  padding: 0 clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 28px);
}
.faq-item > div p { color: var(--encre-2); margin: 0; }
.faq-item > div[hidden] { display: none; }

/* ---------- Formulaires (diagnostic, auth) ---------- */

label { display: block; font-size: 15px; margin-bottom: 8px; }

/* les fieldset natifs (bordure grise + légende encastrée) cassent
   la charte : on les remet à plat */
fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
  min-width: 0;
}
legend { padding: 0; }
.form-row, .champ { margin-bottom: 22px; }
.input-suffix {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--encre-2);
}
.input-suffix input { width: auto; min-width: 120px; }
.form-label, .groupe-label, legend {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 10px;
}
/* sélecteur par exclusion : beaucoup de champs du site n'ont pas
   d'attribut type (donc « text » implicite) et échappaient à une
   liste type="…" */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 10px;
  padding: 14px 16px;
  caret-color: var(--azur);
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--azur);
  box-shadow: 0 0 0 3px rgba(35, 119, 232, .14);
}
/* les contrôles sont souvent imbriqués DANS le <label> : on aère */
label > input, label > select, label > textarea { margin-top: 9px; }
label + label { margin-top: 20px; }
input[type="range"] { accent-color: var(--azur); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--azur); }

.radio-card {
  display: block;
  padding: 16px 18px;
  cursor: pointer;
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.radio-card:hover { border-color: rgba(35, 119, 232, .5); }
.radio-card input:checked ~ *, .radio-card.selected {
  color: var(--encre);
}
.radio-card:has(input:checked) {
  border-color: var(--azur);
  background: rgba(35, 119, 232, .07);
}

/* progression du diagnostic */
.wizard-progress { display: flex; flex-wrap: wrap; gap: clamp(12px, 3vw, 28px); }
.wizard-progress li, .wizard-progress > * {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
  padding-bottom: 10px;
  border-bottom: 1px solid transparent;
}
.wizard-progress .active, .wizard-progress [aria-current] {
  color: var(--encre);
  border-bottom-color: var(--azur);
}
.progress {
  height: 2px;
  background: var(--filet);
  border-radius: 999px;
  overflow: hidden;
}
.progress > * { background: var(--azur); height: 100%; display: block; }

/* dépôt de photos */
.dropzone {
  /* SANS `display`, ce <span> reste EN LIGNE : son remplissage ne
     pousse pas les lignes voisines, il passe par-dessus. C'est ce qui
     empilait le libellé, la zone et le bouton les uns sur les autres à
     l'étape 3 du tunnel (constaté le 23/08). L'ancienne charte le
     déclarait en grille ; la reprise ne l'a pas repris, et le lien
     vers styles.css est retiré par le thème. */
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 132px;
  border: 1px dashed rgba(39, 32, 22, .35);
  border-radius: var(--rayon);
  background: rgba(251, 247, 238, .5);
  padding: clamp(26px, 4vw, 42px);
  text-align: center;
  transition: border-color .2s ease, background-color .2s ease;
}
.dropzone strong { color: var(--encre); font-weight: 500; }
/* .is-over : classe posée par wizard.js pendant un glisser-déposer */
.dropzone:hover, .dropzone.dragover, .dropzone.is-over {
  border-color: var(--azur);
  background: rgba(35, 119, 232, .05);
}
.dropzone.is-over { border-style: solid; }
/* Le libellé porte la petite capitale mono des champs du tunnel.
   Mais `text-transform` et `font-family` DESCENDENT : la zone de
   dépôt, son bouton et la mention de format se retrouvaient eux
   aussi en capitales espacées — « GLISSEZ VOS PHOTOS ICI OU »,
   « 1 À 3 PHOTOS, JPG, JPEG… ». Le libellé garde donc son style,
   ses enfants reviennent à la typographie courante.
   `position: relative` était dans l'ancienne charte : le champ de
   fichier est en position absolue et doit s'ancrer ici. */
.dropzone-label {
  display: block;
  position: relative;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.dropzone-label > .dropzone,
.dropzone-label > small {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: normal;
}
.dropzone-label > .dropzone { margin-top: 10px; font-size: 15px; color: var(--encre-2); }
.dropzone-label > small {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--encre-3, var(--encre-2));
}
.preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
@media (max-width: 640px) { .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* La vignette d'aperçu CONTRAINT sa photo. Sans les règles qui
   suivent, l'image s'affichait à sa taille NATIVE et recouvrait la
   page (relevé client du 25/08) : la structure interne (img contrainte,
   bouton × positionné) ne vivait que dans styles.css, que le thème
   retire. La sonde des styles perdus ne voit pas ce cas : la classe
   .preview-item existe bien ici — c'est son contenu qui manquait. */
.preview-item { padding: 10px; box-shadow: none; position: relative; overflow: hidden; }
.preview-item img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
}
.preview-item button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(28, 24, 18, .72);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.preview-item button:hover { background: var(--encre); }
.photo-tips { box-shadow: none; background: rgba(233, 224, 206, .5); }

/* ---------- Résultat ---------- */

.result-card { text-align: left; }
.breakdown-list { list-style: none; margin: 16px 0 0; padding: 0; }
.breakdown-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(39, 32, 22, .1);
  color: var(--encre-2);
}
.breakdown-title, .doc-meta {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.insurer-question { background: rgba(233, 224, 206, .6); box-shadow: none; }
.locked-card { position: relative; }
.disclaimer, .iq-optional, .pro-hint {
  font-size: 13.5px;
  color: var(--encre-2);
  max-width: 74ch;
}

/* ---------- Pages d'authentification ---------- */

.auth-layout {
  min-height: 78vh;
  display: grid;
  place-items: center;
  padding-top: clamp(120px, 16vh, 180px);
}
.auth-card {
  width: 100%;
  max-width: 480px;
  padding: clamp(30px, 3.4vw, 44px);
}
.auth-card h1 { font-size: clamp(27px, 2.8vw, 36px); margin-bottom: 26px; }
.auth-card .btn { width: 100%; margin-top: 22px; text-align: center; }
.auth-card p { margin-top: 16px; font-size: 15px; color: var(--encre-2); }
.auth-card a { color: var(--azur-sombre); text-underline-offset: 3px; }
.error, .form-erreur, .flash-error {
  border-left: 2px solid var(--alerte);
  background: rgba(180, 52, 42, .06);
  color: #8C2A22;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 18px;
  font-size: 15px;
}
.success, .flash-success {
  border-left: 2px solid #2E7D4F;
  background: rgba(46, 125, 79, .07);
  color: #1F5A38;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 18px;
  font-size: 15px;
}

/* ---------- Espace client ---------- */

.dashboard { display: grid; gap: 22px; }
.claim-card { display: grid; gap: 10px; }
.claim-card h3 { font-size: 20px; }

/* ---------- Pages légales / prose ---------- */

.prose, .legal-doc {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(120px, 16vh, 190px) var(--marge) clamp(70px, 10vh, 120px);
}
.prose h1, .legal-doc h1 { margin-bottom: 12px; }
.prose h2, .legal-doc h2 {
  font-size: clamp(23px, 2.2vw, 30px);
  margin: 44px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--filet);
}
.prose p, .legal-doc p { color: var(--encre-2); margin-bottom: 14px; }
.prose ul, .legal-doc ul { color: var(--encre-2); margin: 0 0 16px 20px; }
.prose li, .legal-doc li { margin-bottom: 8px; }
/* :not(.btn) — sinon la règle de lien, plus spécifique que
   .btn-primary, repeindrait le texte des boutons en azur sur azur */
.prose a:not(.btn), .legal-doc a:not(.btn) {
  color: var(--azur-sombre);
  text-underline-offset: 3px;
}
.prose .actions, .legal-doc .actions { margin-top: 26px; }

/* ---------- Modale ---------- */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(39, 32, 22, .55);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--marge);
}
.modal-card { max-width: 560px; width: 100%; }
.modal-close {
  appearance: none;
  border: 1px solid var(--filet);
  background: transparent;
  border-radius: 999px;
  width: 38px; height: 38px;
  cursor: pointer;
  color: var(--encre);
  font-size: 18px;
  line-height: 1;
}

/* ---------- CTA fixe mobile ---------- */

/* CTA fixe : MOBILE UNIQUEMENT (il barrait toute la largeur sur
   grand écran) */
.sticky-cta { display: none; }
@media (max-width: 899.98px) {
  .sticky-cta { display: flex; }
}
.sticky-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  background: rgba(251, 247, 238, .94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(39, 32, 22, .12);
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 16px 40px -20px rgba(63, 48, 26, .6);
  align-items: center;
  gap: 10px;
}
.sticky-cta .btn { flex: 1; text-align: center; padding: 14px 18px; }

/* ---------- Pied de page ---------- */

.site-footer {
  background: var(--encre);
  color: rgba(246, 239, 226, .85);
  padding: clamp(56px, 8vh, 90px) var(--marge) 34px;
  margin-top: clamp(60px, 9vh, 110px);
}
.site-footer a { color: rgba(246, 239, 226, .85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer h2, .site-footer h3 { color: var(--ivoire); font-size: 18px; }
.site-footer img {
  width: 130px; height: auto;
  background: #fff;
  border-radius: 8px;
  padding: 7px 11px;
}
.site-footer > p { max-width: 62ch; margin-top: 18px; }
/* les liens légaux sont une suite de <a> sans séparateur : sans
   cette grille ils se collent (« Mentions légalesCGUCGV… ») */
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 30px 0 26px;
  padding: 22px 0;
  border-top: 1px solid rgba(246, 239, 226, .18);
  border-bottom: 1px solid rgba(246, 239, 226, .18);
  font-size: 15px;
}
.site-footer .legal, .site-footer small, .site-footer .disclaimer {
  color: rgba(246, 239, 226, .6);
  font-size: 13px;
  max-width: 92ch;
}
.site-footer.slim { padding-block: clamp(40px, 6vh, 64px) 30px; }

/* ============================================================
   Classes restantes du site (relevé exhaustif du balisage réel)
   ============================================================ */

/* mises en page de pages */
.result-layout {
  padding-top: clamp(120px, 16vh, 180px);
  max-width: 1060px;
}
.diagnostic-intro { margin-bottom: clamp(26px, 4vh, 42px); }
.diagnostic-intro p { color: var(--encre-2); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* quand un .split ouvre la page, il doit dégager la nav flottante */
main > .split:first-child, main > .section:first-child {
  padding-top: clamp(130px, 17vh, 190px);
}
@media (max-width: 899.98px) { .split { grid-template-columns: 1fr; } }
.dashboard-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* assistant : barre et navigation */
.wizard-bar {
  height: 3px;
  background: var(--filet);
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 clamp(20px, 2.4vh, 30px);
}
.wizard-progress p { margin: 0; font-size: 15px; color: var(--encre-2); }
.wizard-progress strong { color: var(--encre); }
.wizard-bar > * { display: block; height: 100%; background: var(--azur); transition: width .35s ease; }
.wizard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: clamp(26px, 4vh, 38px);
}
.wizard-recap-title {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 10px;
}

/* dépôt de photos : bouton et champ natif */
.dropzone-btn {
  appearance: none;
  border: 1px solid var(--filet);
  background: var(--papier);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--encre);
  cursor: pointer;
}
.dropzone-btn:hover { border-color: var(--azur); }
.dropzone-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* « Prendre une photo » : l'appareil photo du téléphone en un geste, parce
   que le sélecteur de fichiers du système ne le propose pas. Le bouton
   n'existe que sur un écran tactile (classe posée par app.js) et s'efface
   quand la pièce a déjà ses trois photos. */
.photo-camera { display: none; }
html.tactile .photo-camera:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  appearance: none;
  border: 1px solid var(--filet);
  background: var(--papier);
  border-radius: 999px;
  padding: 12px 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--encre);
  cursor: pointer;
}
html.tactile .photo-camera:not([hidden]):hover { border-color: var(--azur); }
.photo-camera svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.surface-warning, .form-status, .notice, .trust-note {
  font-size: 14px;
  color: var(--encre-2);
  margin-top: 12px;
}
.notice {
  border-left: 2px solid var(--ambre);
  background: rgba(196, 148, 66, .08);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  color: var(--encre);
}
.form-status[data-state="error"] { color: var(--alerte); }

/* question « proposition de l'assureur » sur la page résultat */
.iq-choices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.iq-choices .btn { padding: 12px 20px; font-size: 15px; }
.iq-amount { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.iq-amount input { max-width: 200px; }

/* recommandation d'offre */
.reco-note { margin-top: 16px; font-size: 15px; color: var(--encre-2); }
.reco-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--azur);
  color: #fff;
  border-radius: 999px;
  padding: 4px 11px;
  margin-right: 8px;
}

/* aperçu de livrable */
.apercu { max-width: 900px; }
.apercu-banner {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
  border: 1px solid var(--filet);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 30px;
  background: rgba(233, 224, 206, .5);
}

/* formulaires secondaires */
/* flux simple (et non grille) : le formulaire contient des étapes
   masquées et un bloc de progression ; une grille y accumulait des
   gouttières vides et creusait un grand trou sur mobile */
.estimate-form { max-width: none; }
.pro-form { display: grid; gap: 16px; max-width: 560px; }
.pro-form .btn { justify-self: start; }

/* divers */
.check { color: var(--azur); }
.small, .signature { font-size: 13.5px; color: var(--encre-2); }
.signature { font-style: italic; margin-top: 22px; }
/* .compact sert AUSSI de modificateur d'en-tête (« site-header
   compact ») : la règle doit rester cantonnée aux sections, sinon
   elle gonfle la pilule de navigation */
.section.compact { padding-block: clamp(50px, 7vh, 80px); }

/* ---------- Lumières dorées qui dérivent (JS) ----------
   Le halo est posé en débord volontaire : les sections qui en
   accueillent un DOIVENT le rogner, sinon la page devient
   scrollable latéralement (bande vide sur le côté). */
/* :not(.hero) — le héros déborde VOLONTAIREMENT jusqu'aux bords de
   l'écran ; le rogner ramènerait sa photo à la largeur de la colonne */
main > .section:not(.hero) { position: relative; overflow: hidden; }
main > .section:not(.hero) > * { position: relative; z-index: 1; }
.lumiere-derive {
  position: absolute;
  width: clamp(240px, 56vw, 860px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(226, 180, 90, .22), rgba(226, 180, 90, 0) 70%);
  filter: blur(42px);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Révélations au défilement (JS) ---------- */

.reveal { will-change: opacity, transform; }

/* ---------- Transitions entre pages ---------- */

@view-transition { navigation: auto; }
/* En mouvement réduit on GARDE la transition, mais en fondu pur :
   c'est le déplacement qui gêne, pas le changement d'opacité. */
@media (prefers-reduced-motion: reduce) {
  @keyframes sig-sortie { to { opacity: 0; } }
  @keyframes sig-entree { from { opacity: 0; } }
}
::view-transition-old(root) {
  animation: sig-sortie .28s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: sig-entree .42s cubic-bezier(0, 0, .2, 1) both;
}
@keyframes sig-sortie {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes sig-entree {
  from { opacity: 0; transform: translateY(12px); }
}
/* le pied et l'en-tête ne bougent pas pendant la transition */
.site-header { view-transition-name: sig-entete; }

/* Repli JS pour les navigateurs sans View Transitions */
html.sig-navigue body { opacity: 0; transition: opacity .22s ease; }
html.sig-entrant body { animation: sig-entree .42s cubic-bezier(0, 0, .2, 1) both; }
/* fondu conservé en mouvement réduit, sans le déplacement */
@media (prefers-reduced-motion: reduce) {
  html.sig-entrant body { animation-name: sig-entree-fondu; }
}
@keyframes sig-entree-fondu { from { opacity: 0; } }

/* ---------- Tactile ---------- */

@media (hover: none) {
  .btn:active, .main-nav a:active, .site-footer a:active { opacity: .72; }
  .radio-card:hover { border-color: var(--filet); }
  .dropzone:hover { border-color: rgba(39, 32, 22, .35); background: rgba(251, 247, 238, .5); }
}
@media (pointer: coarse) {
  .btn { padding: 16px 28px; }
  .main-nav a { padding-block: 12px; }
}

/* ============================================================
   INTRO « La goutte » (accueil uniquement)
   Reprise a l'identique de la maquette /signature/ : une goutte
   azur tombe sur un filet, le compteur monte, puis une goutte
   geante s'ecrase en bas d'ecran et le site s'ouvre en iris.
   ============================================================ */
/* ---------- Prechargeur « la goutte » ---------- */
.prechargeur { display: none; }
/* verrou de defilement : sans lui, un swipe pendant l'intro fait
   defiler la page invisible et on atterrit au milieu du site */
html.precharge, html.precharge body { overflow: hidden; }
html.precharge .prechargeur {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--encre);
  align-items: center;
  justify-content: center;
  /* les anneaux font 100vmax (844 px sur un iPhone) : sans rognage
     ils elargissent la zone scrollable pendant toute l intro */
  overflow: hidden;
}
/* Revelation par l'onde : un trou circulaire s'ouvre dans le calque
   a l'impact de la goutte, EN BAS de l'ecran.
   IMPORTANT : le masque n'est applique QUE pendant l'iris (classe
   posee par le JS). Laisse en permanence avec --trou: 0, le degrade
   avait ses deux arrets a -1px et 0px — un cas degenere que Chrome
   bureau rend opaque mais que les moteurs mobiles rendent
   TRANSPARENT : le calque disparaissait, on voyait l'index, puis il
   resurgissait des que le rayon devenait positif (bug du 21/08).
   Le rayon de depart est non nul pour la meme raison. */
html.precharge .prechargeur.pre-iris {
  --trou: 0.5vmax;
  -webkit-mask-image: radial-gradient(circle at 50% 100%,
    transparent calc(var(--trou) - 1px), #000 var(--trou));
  mask-image: radial-gradient(circle at 50% 100%,
    transparent calc(var(--trou) - 1px), #000 var(--trou));
}
/* la goutte finale, enorme (x2 le 18/08), qui traverse l'ecran */
.pre-goutte-finale {
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(128px, 16vw, 240px);
  height: clamp(176px, 22vw, 330px);
  margin-left: calc(clamp(128px, 16vw, 240px) / -2);
  background: var(--azur);
  border-radius: 50% 50% 58% 58% / 38% 38% 72% 72%;
  box-shadow: 0 0 110px rgba(35, 119, 232, .55);
  opacity: 0;
  pointer-events: none;
}
/* anneaux d'eclaboussure au point d'impact (bas d'ecran) */
.pre-cercle {
  position: absolute;
  left: 50%; bottom: 0;
  width: 100vmax; height: 100vmax;
  margin: 0 0 -50vmax -50vmax;
  border: 2px solid rgba(246, 239, 226, .8);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
}
/* gouttelettes projetees par l'impact */
.pre-eclat {
  position: absolute;
  left: 50%; bottom: 6px;
  width: 22px; height: 28px;
  margin-left: -11px;
  background: var(--azur);
  border-radius: 50% 50% 58% 58% / 38% 38% 72% 72%;
  pointer-events: none;
}
.pre-scene {
  position: relative;
  text-align: center;
  color: var(--ivoire);
  padding: 0 24px;
  width: 100%;
}
.pre-marque {
  font-family: var(--serif);
  font-weight: 380;
  /* le plancher de 56 px débordait sur un écran de 390 px : la
     marque doit pouvoir descendre plus bas et se replier */
  font-size: clamp(38px, 10.5vw, 170px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  white-space: normal;
}
/* une seule ligne à partir du bureau seulement */
@media (min-width: 720px) {
  .pre-marque { white-space: nowrap; }
}
.pre-etiquette {
  font-family: var(--mono);
  font-size: clamp(12px, 1.2vw, 17px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(246, 239, 226, .6);
  margin-top: clamp(16px, 2.6vh, 30px);
}
.pre-ligne {
  position: relative;
  width: min(860px, 82vw);
  margin: clamp(48px, 8vh, 84px) auto 0;
  height: 90px;
}
.pre-goutte {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px; height: 22px;
  margin-left: -8px;
  background: var(--azur);
  border-radius: 50% 50% 60% 60% / 40% 40% 70% 70%;
  opacity: 0;
}
.pre-filet {
  position: absolute;
  left: 0; right: 0;
  top: 62px;
  height: 2px;
  background: rgba(246, 239, 226, .22);
  display: block;
  overflow: visible;
}
.pre-filet-plein {
  position: absolute;
  inset: 0;
  background: var(--azur);
  transform: scaleX(0);
  transform-origin: center;
  display: block;
  box-shadow: 0 0 18px rgba(35, 119, 232, .55);
}
.pre-onde {
  position: absolute;
  left: 50%; top: 62px;
  width: 170px; height: 170px;
  margin: -85px 0 0 -85px;
  border: 1.5px solid rgba(246, 239, 226, .5);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
}
.pre-compteur {
  font-family: var(--mono);
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .12em;
  color: rgba(246, 239, 226, .75);
  margin-top: clamp(24px, 4vh, 40px);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 719.98px) {
  /* 13vw frôlait le bord sur un écran de 390 px : on garde de la
     marge, le nom doit respirer et pouvoir se replier */
  .pre-marque { white-space: normal; font-size: clamp(32px, 11vw, 56px); }
  .pre-etiquette { font-size: 11.5px; letter-spacing: .16em; }
}
/* « Réduire les animations » ne supprime PLUS l'intro : elle est
   servie SANS MOUVEMENT — un écran de marque qui se fond. Les pièces
   animées (goutte, ondes, filet, compteur, iris) sont retirées ; il ne
   reste qu'un fondu d'opacité, geste accepté sous ce réglage. Sans
   cela, les visiteurs concernés — très nombreux sur iPhone — n'avaient
   ni intro ni la moindre animation sur le site (constat du 22/08). */
/* la règle globale « p { max-width: 68ch } » décentrait l'étiquette
   de l'intro : ici les paragraphes occupent toute la scène */
.pre-scene p { max-width: none; margin-inline: auto; }

html.mouvement-reduit .pre-goutte,
html.mouvement-reduit .pre-goutte-finale,
html.mouvement-reduit .pre-onde,
html.mouvement-reduit .pre-cercle,
html.mouvement-reduit .pre-ligne,
html.mouvement-reduit .pre-compteur { display: none; }
html.mouvement-reduit .prechargeur {
  transition: opacity .55s ease;
  -webkit-mask-image: none;
  mask-image: none;
}
html.mouvement-reduit .prechargeur.pre-sortie { opacity: 0; }
html.mouvement-reduit .pre-marque { opacity: 0; transition: opacity .5s ease; }
html.mouvement-reduit .pre-etiquette { opacity: 0; transition: opacity .5s ease .12s; }
html.mouvement-reduit .prechargeur.pre-entree .pre-marque,
html.mouvement-reduit .prechargeur.pre-entree .pre-etiquette { opacity: 1; }


/* ---------- Flèche « revenir en haut » (posée par le script) ---------- */
.haut-page {
  position: fixed;
  right: clamp(14px, 2.2vw, 30px);
  bottom: clamp(14px, 2.2vw, 30px);
  z-index: 95;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--filet);
  border-radius: 50%;
  background: rgba(251, 247, 238, .94);
  color: var(--encre);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, background-color .2s ease;
  box-shadow: 0 16px 32px -16px rgba(24, 18, 10, .7);
}
.haut-page.est-visible { opacity: 1; visibility: visible; transform: none; }
.haut-page:hover { background: #fff; }
.haut-page:focus-visible { outline: 2px solid var(--azur); outline-offset: 3px; }
.haut-page svg { width: 19px; height: 19px; display: block; }
@media (max-width: 899.98px) {
  .haut-page { bottom: 78px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .haut-page { transform: none; transition: opacity .2s ease, visibility .2s; }
}
/* ============================================================
   PAGE D'ESTIMATION (diagnostic.php) — refonte du 22/08/2026
   ------------------------------------------------------------
   Avant : une colonne étroite calée à gauche, 300 px de vide en
   haut, la moitié droite de l'écran inutilisée.
   Après : deux colonnes sur ordinateur — le contexte et le
   parcours à gauche (colonne collante), le formulaire dans une
   carte à droite. Tout s'empile sur téléphone.
   ============================================================ */
.diagnostic-layout {
  /* pas de width:100% : elle s ajouterait au padding et ferait
     deborder la page de deux fois la marge */
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(104px, 13vh, 148px) var(--marge) clamp(60px, 9vh, 100px);
}
.dg-grille {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 899.98px) {
  .dg-grille { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- Colonne de contexte ---------- */
.dg-contexte { position: sticky; top: 116px; }
@media (max-width: 899.98px) {
  .dg-contexte { position: static; }
  .dg-titre { font-size: clamp(27px, 7.6vw, 34px); }
  .dg-sous { max-width: none; }
  .dg-reassurance { margin-top: 20px; }
}
.dg-etiquette {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.dg-titre {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-top: 12px;
  text-wrap: balance;
}
.dg-sous {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--encre-2);
  max-width: 36ch;
}

/* le parcours : quatre repères, l'étape courante surlignée */
.dg-etapes {
  list-style: none;
  margin: clamp(26px, 3.4vh, 38px) 0 0;
  padding: 0;
  display: grid;
}
.dg-etapes li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--filet);
  font-size: 15px;
  color: var(--encre-2);
  transition: color .3s ease;
}
.dg-etapes li:last-child { border-bottom: 1px solid var(--filet); }
.dg-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--encre-2);
  transition: color .3s ease;
}
.dg-etapes li.est-faite { color: var(--encre); }
.dg-etapes li.est-faite .dg-num { color: rgba(35, 119, 232, .55); }
.dg-etapes li.est-active { color: var(--encre); font-weight: 600; }
.dg-etapes li.est-active .dg-num { color: var(--azur); }

.dg-reassurance {
  list-style: none;
  margin: clamp(22px, 3vh, 30px) 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--encre-2);
}
.dg-reassurance li { position: relative; padding-left: 18px; }
.dg-reassurance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--azur);
}

/* ---------- La carte du formulaire ---------- */
.dg-carte {
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 20px;
  padding: clamp(22px, 3vw, 40px);
  box-shadow: 0 34px 80px -54px rgba(39, 32, 22, .8);
}
.dg-carte .wizard-progress {
  display: block;
  padding-bottom: 20px;
  margin-bottom: clamp(22px, 3vw, 30px);
  border-bottom: 1px solid var(--filet);
}
.dg-carte .wizard-progress p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 14px;
}
.dg-carte .wizard-progress strong { color: var(--encre); }
/* la regle generique `.wizard-progress > *` (heritee d un balisage
   en liste d etapes) ajoutait 10 px de padding et un filet a la
   BARRE elle-meme : 14 px de haut au lieu de 3. */
.dg-carte .wizard-progress > * { padding-bottom: 0; border-bottom: 0; }
.dg-carte .wizard-bar {
  height: 4px;
  margin: 0;
  background: rgba(39, 32, 22, .12);
}
.dg-carte .wizard-bar > span { border-radius: 999px; }
.dg-carte .wizard-progress small { letter-spacing: .06em; }

/* les deux choix de logement, côte à côte */
.dg-choix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 479.98px) { .dg-choix { grid-template-columns: 1fr; } }
.dg-choix .radio-card { margin: 0; }

/* la navigation de l'assistant : retour à gauche, suite à droite */
.dg-carte .wizard-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 34px);
  padding-top: clamp(20px, 2.6vw, 26px);
  border-top: 1px solid var(--filet);
}
.dg-carte .wizard-nav [data-wizard-next] { margin-left: auto; }
@media (max-width: 479.98px) {
  .dg-carte .wizard-nav { flex-direction: column-reverse; align-items: stretch; }
  .dg-carte .wizard-nav .btn { width: 100%; text-align: center; }
  .dg-carte .wizard-nav [data-wizard-next] { margin-left: 0; }
}

.dg-carte .wizard-step > label,
.dg-carte .wizard-step > fieldset { margin-bottom: clamp(20px, 2.6vw, 28px); }
.dg-carte .wizard-step > *:last-child { margin-bottom: 0; }
.wizard-recap-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 16px;
}
.dg-carte .photo-tips {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--encre-2);
  /* La liste figure dans la règle groupée des cartes (fond papier,
     bordure, rayon, ombre, gros padding) : dans le tunnel, ce cadre
     n'a pas lieu d'être, et comme le padding est remis à zéro ici, le
     texte se retrouvait collé à la bordure. On rend la liste nue —
     c'est ce que la refonte du 22/08 dessinait, avec ses puces en
     filet. */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.dg-carte .photo-tips li { position: relative; padding-left: 18px; }
.dg-carte .photo-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--filet);
}
.dg-carte .check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--encre-2);
  margin-bottom: 16px;
}
.dg-carte .check input { margin-top: 3px; flex: 0 0 auto; }
.dg-carte .btn-xl { width: 100%; text-align: center; margin-top: 8px; }
@media (max-width: 899.98px) {
  /* Sur telephone, le parcours fait doublon avec « Etape 1 sur 4 »
     affiche dans la carte, et repoussait le premier champ de 350 px.
     (Regle placee en FIN de feuille : plus haut, la declaration
     `.dg-etapes { display: grid }` la reprenait.) */
  .dg-etapes { display: none; }
}

/* Deconnexion en POST : le formulaire se fond dans la navigation */
.nav-deconnexion { display: inline; margin: 0; }
.nav-deconnexion button {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
.nav-deconnexion button:hover { color: var(--azur); }

/* ============================================================
   ESPACE PERSONNEL (dashboard.php) — refonte du 22/08/2026
   ------------------------------------------------------------
   Une LIGNE par dossier plutôt qu'une carte : date, pièce,
   montant, état, et les deux actions qui comptent. Le détail
   vit dans le repli d'un <details> natif — donc sans JS, et
   accessible au clavier.
   ============================================================ */
.espace-layout {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(104px, 13vh, 148px) var(--marge) clamp(64px, 9vh, 100px);
}
.espace-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: clamp(22px, 3vh, 32px);
  border-bottom: 1px solid var(--filet);
}
.espace-etiquette {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.espace-titre {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-top: 10px;
}
.espace-compte {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin: clamp(24px, 3.4vh, 34px) 0 12px;
}
.espace-avis {
  margin-top: 22px;
  padding: 14px 18px;
  border-left: 3px solid var(--azur);
  background: rgba(35, 119, 232, .07);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
}
/* le meme bandeau, quand la nouvelle n'est pas bonne */
.espace-avis-alerte {
  border-left-color: #b5472f;
  background: rgba(181, 71, 47, .07);
}
.espace-mention {
  margin-top: clamp(26px, 3.4vh, 36px);
  font-size: 13px;
  line-height: 1.6;
  color: var(--encre-2);
  max-width: 76ch;
}
.espace-vide {
  margin-top: clamp(30px, 4vh, 46px);
  padding: clamp(30px, 4vw, 52px);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 18px;
  text-align: center;
}
.espace-vide-titre {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 8px;
}
.espace-vide p { color: var(--encre-2); }
.espace-vide .btn { margin-top: 22px; }

/* ---------- La liste des dossiers ---------- */
.dossiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dossier-boite {
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 14px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.dossier-boite:hover { border-color: rgba(39, 32, 22, .24); }
.dossier-boite[open] {
  border-color: rgba(35, 119, 232, .4);
  box-shadow: 0 20px 50px -34px rgba(39, 32, 22, .8);
}

/* la ligne : tout tient sur un rang, aligné sur une grille */
.dossier-ligne {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  padding: 16px clamp(16px, 2vw, 22px);
  cursor: pointer;
  list-style: none;
}
.dossier-ligne::-webkit-details-marker { display: none; }
.dossier-ligne::marker { content: ""; }
.dossier-boite:focus-within .dossier-ligne { outline: 2px solid var(--azur); outline-offset: -2px; border-radius: 14px; }
.dossier-date {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.dossier-piece {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.2;
  min-width: 0;
}
.dossier-surface {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--encre-2);
  margin-left: 8px;
  white-space: nowrap;
}
.dossier-montant {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--azur);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dossier-etat {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--filet);
  color: var(--encre-2);
  white-space: nowrap;
}
.dossier-etat[data-ton="actif"] {
  border-color: rgba(35, 119, 232, .45);
  color: var(--azur);
  background: rgba(35, 119, 232, .07);
}
.dossier-etat[data-ton="attente"] {
  border-color: rgba(196, 149, 74, .5);
  color: #8A6A2F;
  background: rgba(196, 149, 74, .1);
}
.dossier-etat[data-ton="archive"] { opacity: .7; }
.dossier-actions { display: flex; align-items: center; gap: 10px; }
.dossier-telecharger { padding: 9px 16px; font-size: 14px; }
.dossier-infos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  font-size: 14px;
  color: var(--encre-2);
  white-space: nowrap;
}
.dossier-boite:hover .dossier-infos { border-color: rgba(39, 32, 22, .3); color: var(--encre); }
.dossier-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .25s ease;
}
.dossier-boite[open] .dossier-chevron { transform: rotate(-135deg) translate(-1px, -1px); }

/* ---------- Le détail, dans le repli ---------- */
.dossier-detail {
  padding: 4px clamp(16px, 2vw, 22px) 20px;
  border-top: 1px solid var(--filet);
  margin: 0 clamp(16px, 2vw, 22px) 0;
  padding-left: 0;
  padding-right: 0;
}
.dossier-faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px 20px;
  margin: 16px 0 0;
}
.dossier-faits > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--filet);
}
.dossier-faits dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.dossier-faits dd { margin: 0; font-size: 14.5px; text-align: right; }
.dossier-livrable {
  margin-top: 16px;
  font-size: 14px;
  color: var(--encre-2);
}
.dossier-livrable strong { color: var(--encre); font-weight: 500; }
.dossier-liens {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
  color: var(--encre-2);
}
.dossier-liens a { color: var(--encre); text-underline-offset: 3px; }

@media (max-width: 819.98px) {
  /* sur téléphone la ligne s'empile : date et état en tête, montant
     en gros, les actions en pleine largeur */
  .dossier-ligne {
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    padding: 15px 16px;
  }
  .dossier-date { order: 1; }
  .dossier-etat { order: 2; justify-self: end; }
  .dossier-piece { order: 3; grid-column: 1 / -1; font-size: 19px; }
  .dossier-montant { order: 4; grid-column: 1 / -1; font-size: 21px; }
  .dossier-actions { order: 5; grid-column: 1 / -1; margin-top: 6px; }
  .dossier-telecharger { flex: 1; text-align: center; }
  .dossier-faits { grid-template-columns: 1fr; }
}
/* ============================================================
   MESSAGERIE — page de contact et fil d'assistance (22/08/2026)
   ============================================================ */
.contact-layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(104px, 13vh, 148px) var(--marge) clamp(60px, 9vh, 100px);
}
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 899.98px) {
  .contact-grille { grid-template-columns: 1fr; gap: 26px; }
}
.contact-contexte { position: sticky; top: 116px; }
@media (max-width: 899.98px) { .contact-contexte { position: static; } }

.contact-identite {
  font-size: 14px;
  color: var(--encre-2);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--filet);
  margin-bottom: 4px;
}
.contact-identite strong { color: var(--encre); font-weight: 500; }

/* le champ leurre n'est pas « display:none » : certains robots le
   detectent. Il est simplement hors du champ de vision. */
.contact-leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-confirme { text-align: left; }
.contact-ref-etiquette {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
}
.contact-ref {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: .02em;
  color: var(--azur);
  margin: 8px 0 16px;
}
.contact-confirme p { color: var(--encre-2); max-width: 56ch; }
.contact-confirme .btn { margin-top: 18px; }
.contact-note { margin-top: 16px; font-size: 13.5px; }

/* la carte de la page d'estimation sert aussi ici */
.contact-colonne .dg-carte { display: grid; gap: 18px; }
.contact-colonne textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Le fil d'un échange ---------- */
.fil-ligne { grid-template-columns: 96px minmax(0, 1fr) auto auto auto; }
.fil-reference {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--encre-2);
  white-space: nowrap;
}
.fil {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.fil-message {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(39, 32, 22, .035);
  border: 1px solid var(--filet);
}
/* la réponse de l'équipe se distingue d'un coup d'œil */
.fil-message[data-auteur="support"] {
  background: rgba(35, 119, 232, .06);
  border-color: rgba(35, 119, 232, .28);
}
.fil-tete {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fil-auteur {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre);
}
.fil-message[data-auteur="support"] .fil-auteur { color: var(--azur); }
.fil-date { font-family: var(--mono); font-size: 11px; color: var(--encre-2); }
.fil-corps { font-size: 15px; line-height: 1.6; }
.fil-reponse { margin-top: 18px; }
.fil-reponse textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.5;
}
.fil-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.fil-clos {
  margin-top: 16px;
  font-size: 14px;
  color: var(--encre-2);
}
@media (max-width: 819.98px) {
  .fil-ligne { grid-template-columns: 1fr auto; }
  .fil-reference { order: 4; grid-column: 1 / -1; }
  .fil-actions .btn { flex: 1; text-align: center; }
}
/* Deux champs cote a cote (page de contact). La regle existait dans
   la feuille de l accueil seulement : les champs s empilaient ici. */
.contact-colonne .modale-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 559.98px) {
  .contact-colonne .modale-duo { grid-template-columns: 1fr; }
}

/* ============================================================
   CURSEUR PERSONNALISÉ (22/08/2026)
   Extrait de landing.css : il n'existait que sur l'accueil, si
   bien que le curseur changeait en entrant dans l'espace client.
   Le module qui l'anime : assets/js/curseur.js.
   ============================================================ */

html.curseur-actif,
html.curseur-actif a,
html.curseur-actif button,
html.curseur-actif input[type="range"],
html.curseur-actif label { cursor: none; }

.curseur-dot,
.curseur-anneau {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 700; /* au-dessus du prechargeur (600) */
  border-radius: 50%;
  mix-blend-mode: difference;
}
.curseur-dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: #F6EFE2;
}
.curseur-anneau {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
}
.curseur-anneau-int {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(246, 239, 226, .85);
  border-radius: 50%;
}
.curseur-onde {
  position: fixed;
  top: 0; left: 0;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border: 1.5px solid rgba(246, 239, 226, .9);
  border-radius: 50%;
  pointer-events: none;
  z-index: 699;
  mix-blend-mode: difference;
}


/* état viseur sur les zones photo, état azur sur les appels à l'action */
.curseur-coin {
  position: absolute;
  width: 8px; height: 8px;
  border: 1.5px solid rgba(246, 239, 226, .9);
  opacity: 0;
}
.curseur-coin:nth-child(2) { top: -2px; left: -2px; border-width: 1.5px 0 0 1.5px; }
.curseur-coin:nth-child(3) { top: -2px; right: -2px; border-width: 1.5px 1.5px 0 0; }
.curseur-coin:nth-child(4) { bottom: -2px; right: -2px; border-width: 0 1.5px 1.5px 0; }
.curseur-coin:nth-child(5) { bottom: -2px; left: -2px; border-width: 0 0 1.5px 1.5px; }
.curseur-anneau.viseur .curseur-anneau-int { border-radius: 26%; }
.curseur-anneau.viseur .curseur-coin { opacity: 1; }
.curseur-anneau.cta,
.curseur-anneau.cta ~ .curseur-dot { mix-blend-mode: normal; }
.curseur-anneau.cta .curseur-anneau-int { border-color: var(--azur); }
html.curseur-actif summary,
html.curseur-actif select { cursor: none; }

/* ---------- Récapitulatif de la page résultat -------------------
   `.summary-grid` figure dans la règle groupée des cartes, si bien
   que chacun de ses encarts reçoit fond, bordure, rayon, ombre et un
   grand remplissage — mais SA GRILLE, elle, vivait dans styles.css,
   que le thème retire. Les sept encarts s'empilaient donc en pleine
   largeur, chacun dans une grosse carte, sur la page qui précède le
   paiement (relevé par l'audit du 23/08).

   Placé en fin de feuille : la règle groupée des cartes est déclarée
   plus haut, et c'est la dernière déclaration qui l'emporte. */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 24px 0 0;
}
.summary-grid > div {
  padding: 14px 16px;
  box-shadow: none;
  background: var(--ivoire, rgba(246, 239, 226, .6));
}
.summary-grid dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 5px;
}
.summary-grid dd {
  margin: 0;
  font-size: 15px;
  color: var(--encre);
  overflow-wrap: anywhere;
}

/* ============================================================
   MULTI-PIÈCES — le répéteur de l'étape « Les dommages » (25/08)
   Une ligne = une pièce (sélecteur + surface). La première ligne
   seule est identique au formulaire historique ; les suivantes
   arrivent séparées d'un filet, avec leur bouton « Retirer » en
   texte souligné — pas de croix, pas de corbeille.
   ============================================================ */
/* Le texte d'aide d'un champ (« Indiquez la surface totale… ») est un
   <small>, inline par défaut : il coulait À CÔTÉ du champ de surface et
   du suffixe m², en drapeau coupé. Défaut antérieur au répéteur, mais
   trois fois plus visible avec lui : sous le champ, pleine largeur.
   La dropzone garde ses propres règles ; :not([hidden]) préserve les
   avertissements de surface masqués (display:block les rallumerait). */
#diagnostic-form label:not(.dropzone-label) small:not([hidden]) {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--encre-2);
}

.piece-ligne { position: relative; }
.piece-ligne + .piece-ligne {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
}
.piece-titre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin: 0 0 10px;
}
/* seule ligne = formulaire historique : pas de numérotation */
[data-pieces]:not([data-plusieurs]) .piece-titre { display: none; }
.piece-retirer {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--encre-2);
  cursor: pointer;
}
.piece-retirer:hover { color: var(--encre); text-decoration: underline; }
[data-pieces]:not([data-plusieurs]) .piece-retirer { display: none; }

.pieces-pied {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.piece-ajouter {
  appearance: none;
  background: transparent;
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--encre);
  cursor: pointer;
  transition: border-color .2s ease;
}
.piece-ajouter:hover { border-color: var(--encre); }
.piece-ajouter[disabled] { opacity: .45; cursor: not-allowed; }
.pieces-total {
  font-size: 13.5px;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
[data-pieces]:not([data-plusieurs]) ~ .pieces-pied .pieces-total,
.pieces-total[hidden] { display: none; }
.pieces-contexte {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--encre-2);
}

/* ============================================================
   DOSSIER COMPLET — 05/09/2026
   Photos rattachées à chaque pièce, questions sur le sinistre,
   retrait de pièce visible, page « Compléter mon dossier ».
   ============================================================ */

/* Retirer une pièce : un vrai bouton, plus un mot en gris que
   personne ne voyait. Toujours masqué tant qu'il n'y a qu'une ligne. */
.piece-retirer {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--encre-2);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.piece-retirer::before { content: "×"; font-size: 15px; line-height: 1; }
.piece-retirer:hover { border-color: var(--encre); color: var(--encre); text-decoration: none; }

/* Les questions sur le sinistre, en tête de l'étape « Les dommages » */
.dg-sinistre { display: grid; gap: 14px; margin-bottom: 22px; }
/* la date et la zone de texte débordaient de la colonne : le champ date
   et le textarea ne sont pas couverts par le box-sizing des autres champs */
.dg-sinistre input, .dg-sinistre select, .dg-sinistre textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.dg-sinistre textarea { min-height: 84px; resize: vertical; }
.dg-facultatif { font-size: 12.5px; color: var(--encre-2); font-weight: 400; }
.dg-sous-titre {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin: 0 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--filet);
  max-width: none; /* les paragraphes ont une largeur de lecture : pas ce filet */
}
.dg-bloc { margin-top: 22px; }
.reponse-assureur { display: grid; gap: 12px; margin-top: 14px; }
.reponse-assureur[hidden] { display: none; }

/* Étape 3 : un bloc de photos par pièce */
.dg-consigne { margin: 0 0 18px; color: var(--encre-2); font-size: 15px; line-height: 1.55; }
.dg-aide { display: block; margin-top: 18px; font-size: 13px; color: var(--encre-2); line-height: 1.55; }
.photos-piece { padding: 18px 0; border-top: 1px solid var(--filet); }
.photos-piece:first-child { border-top: 0; padding-top: 0; }
.photos-piece .dropzone-label { margin-bottom: 0; }
.photos-piece-compte {
  float: right;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--encre-2);
}
.photos-piece[data-manque] .dropzone { border-color: #b5472f; }
.photos-piece[data-manque] .photos-piece-compte { color: #b5472f; }
.piece-photos-label { margin-top: 6px; }

/* Page « Compléter mon dossier » */
.complement-intro { font-size: 16px; line-height: 1.6; color: var(--encre-2); max-width: 64ch; margin: 0 0 26px; }
.complement-bloc {
  background: var(--papier);
  border: 1px solid rgba(39, 32, 22, .08);
  border-radius: 18px;
  padding: clamp(20px, 2.6vw, 28px);
  margin-bottom: 18px;
}
.complement-bloc h2 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 12px; }
.complement-bloc h2 small {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-left: 10px;
}
.complement-liste { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.complement-liste li { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 15px; }
.complement-date { font-size: 13px; color: var(--encre-2); }
.complement-aide { font-size: 14px; color: var(--encre-2); line-height: 1.55; margin: 0 0 12px; }
.complement-form { display: grid; gap: 14px; }
.complement-form .btn { justify-self: start; }
.complement-form .btn[disabled] { opacity: .45; cursor: not-allowed; }
.complement-cadre {
  background: rgba(233, 224, 206, .45);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.complement-cadre p { margin: 0 0 10px; }
.complement-cadre p:last-child { margin: 0; }
.complement-valide { font-size: 15px; }
.complement-valide a { margin-left: 8px; }

/* Espace personnel : « À compléter » et la liste des documents (05/09) */
.dossier-completer.est-a-completer {
  border-color: var(--azur);
  color: var(--azur);
  font-weight: 600;
}
.dossier-documents { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.dossier-documents li { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.dossier-doc-date { font-size: 13px; color: var(--encre-2); }

/* Avis de netteté dans le navigateur (05/09) — indicatif, le serveur refuse */
.preview-avis {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(181, 71, 47, .9);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
}
.photos-avis { margin: 8px 0 0; font-size: 13px; color: #b5472f; }

/* Boite de dialogue du formulaire (06/09) — avertissement au locataire.
   <dialog> natif : le fond et la pile de focus sont geres par le
   navigateur, on ne redecrit que l'habillage. */
.dg-dialogue {
  max-width: 34rem;
  border: 1px solid var(--filet, rgba(39, 32, 22, .16));
  border-radius: 14px;
  padding: clamp(22px, 3vw, 32px);
  background: #fff;
  color: var(--encre, #272016);
  box-shadow: 0 24px 60px rgba(39, 32, 22, .22);
}
.dg-dialogue::backdrop { background: rgba(39, 32, 22, .45); }
.dg-dialogue h2 {
  margin: 0 0 14px;
  font-size: clamp(19px, 2.2vw, 23px);
  text-wrap: balance;
}
.dg-dialogue p { margin: 0 0 12px; font-size: 15px; line-height: 1.62; }
.dg-dialogue-question { font-weight: 600; margin-top: 18px; }
.dg-dialogue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.dg-dialogue-actions .btn { flex: 1 1 auto; }

/* Ouvrages abîmés par pièce (07/09) — chaque ouvrage s'ouvre par une
   case, ses questions n'apparaissent qu'ensuite. */
.ouvrages {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(39, 32, 22, .12);
}
.ouvrages-titre {
  margin: 0 0 12px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre-2, #6b6154);
}
.ouvrage + .ouvrage { margin-top: 10px; }
.ouvrage-bascule { margin: 0; }
.ouvrage-detail {
  margin: 10px 0 4px 26px;
  padding-left: 14px;
  border-left: 2px solid rgba(35, 119, 232, .35);
}
.ouvrage-detail > label { display: block; margin-bottom: 10px; }
.ouvrage-oui-non { border: 0; padding: 0; margin: 0 0 10px; }
/* la question de l isolant est un libelle comme les autres : sans ce
   rappel, elle heritait du style des legendes (mono, majuscules) et
   detonnait a cote de « Finition » et « Support » */
.ouvrage-oui-non legend {
  padding: 0;
  margin-bottom: 6px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}
.radio-inline { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; }
.radio-inline input { margin: 0; }
.murs-faience {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(35, 119, 232, .05);
  border-radius: 8px;
}
.murs-faience > label:last-child { margin-bottom: 0; }