/* Tire Ton Plan : feuille de style unique.
   Direction : maquettes de ttp/maquettes (taste-skill 7/7/4), référence brand.dropbox.com pour l'entrée et le hub.
   Angles vifs partout (comme le logo). Une couleur par métier ; une page métier n'utilise que la sienne. */

@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #f3f4f1;
  --paper-2: #e9ebe6;
  --ink: #15171a;
  --ink-2: #4a4f55;
  --line: #d6d9d3;
  --grid: #e1e3de;
  --voile: rgb(243 244 241 / 0.92);

  --construction: #e9c84a;   --construction-t: #15171a;
  --immobilier: #9ec4a7;     --immobilier-t: #15171a;
  --hotels: #5a2b4f;         --hotels-t: #f3f4f1;
  --assurance: #20398f;      --assurance-t: #f3f4f1;
  --architectes: #bbd7ee;    --architectes-t: #15171a;
  --diagnostiqueurs: #a8492f; --diagnostiqueurs-t: #f3f4f1;

  /* Couleur de la page (la page métier la redéfinit) */
  --metier: var(--ink);
  --metier-t: var(--paper);
  --accent-trait: var(--ink);   /* icônes, petit carré : jamais une couleur claire sur fond clair */
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);

  --gutter: clamp(20px, 3.4vw, 48px);
  --max: 1360px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "General Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121416;
    --paper-2: #1a1d20;
    --ink: #eceee9;
    --ink-2: #a9aeb3;
    --line: #2c3035;
    --grid: #1f2226;
    --voile: rgb(18 20 22 / 0.92);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 16px; text-decoration: none; }
.saut:focus { top: 12px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 52px; padding: 0 1.25rem 0 1.4rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font: 500 1.0625rem/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 0; cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
.btn .ico { transition: transform 0.3s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }
.btn:active { transform: scale(0.98); }
.btn--petit { min-height: 44px; font-size: 0.95rem; padding: 0 1rem; }
.btn-note { margin-top: 0.75rem; font-size: 0.9rem; color: var(--ink-2); }
/* Bouton secondaire : contour, à côté d'un bouton plein */
.btn--trait { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--trait:hover { background: var(--paper-2); } }

/* ---------- En-tête ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 72px; padding: 0 var(--gutter);
  background: var(--voile);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.marque__mono { width: 34px; height: 34px; }
.marque__mot { width: 132px; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 40px); }
.nav__lien { position: relative; text-decoration: none; font-size: 0.98rem; color: var(--ink); padding: 8px 0; }
.nav__lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav__lien:hover::after { transform: scaleX(1); }
.menu-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink); cursor: pointer; }
.menu-btn .ico { width: 28px; height: 28px; }

/* Menu téléphone (popover natif) */
.menu-tel { margin: 0; inset: 0 0 auto auto; width: min(100%, 420px); height: 100dvh; max-height: none; border: 0; padding: 20px var(--gutter) 32px; background: var(--paper); color: var(--ink); }
.menu-tel::backdrop { background: rgb(0 0 0 / 0.4); }
.menu-tel__haut { display: flex; justify-content: space-between; align-items: center; height: 52px; margin-bottom: 16px; }
.menu-tel ul { list-style: none; margin: 0; padding: 0; }
.menu-tel li a { display: flex; align-items: center; gap: 14px; padding: 14px 0; text-decoration: none; font-size: 1.25rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.menu-tel .carre { width: 18px; height: 18px; flex: none; }
.menu-tel .btn { margin-top: 24px; width: 100%; justify-content: space-between; }

@media (max-width: 860px) {
  .nav__lien { display: none; }
  .menu-btn { display: inline-flex; }
  .marque__mot { width: 112px; }
  .topbar .btn { min-height: 42px; font-size: 0.92rem; padding: 0 0.9rem; }
  .topbar .btn .ico { display: none; }
}

/* ---------- Mise en page générale ---------- */
.section { padding: clamp(72px, 10vw, 140px) var(--gutter); }
.cadre { max-width: var(--max); margin: 0 auto; }
.h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.texte { font-size: 1.125rem; max-width: 62ch; color: var(--ink); }
.texte + .texte { margin-top: 1rem; }
.texte strong { font-weight: 600; }

/* ---------- HUB (accueil) ----------
   Mécanique reprise de brand.dropbox.com : entrée qui se construit (quadrillage, logo au trait, phrase),
   puis les tuiles arrivent des bords, deux fois plus grandes, et se rangent autour du logo central,
   pilotées par le défilement (animation-timeline), réversibles. Repli : écran d'entrée puis mosaïque. */
.hub { position: relative; }
.hub__ancre { position: absolute; left: 0; top: 100dvh; }
.hub__stage { position: relative; }

.hub__grille {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hub__grille::before, .hub__grille::after { content: ""; position: absolute; inset: 0; }
.hub__grille::before { background: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px calc(100% / 12)); }
.hub__grille::after { background: repeating-linear-gradient(180deg, var(--grid) 0 1px, transparent 1px calc(100% / 8)); }

.hub__intro {
  position: relative; min-height: 100dvh; z-index: 1;
  text-align: center;
}
.hub__haut {
  position: absolute; top: 0; left: 0; right: 0; height: 80px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter);
}
/* Au repos, les tuiles de gauche et de droite dépassent en bandes de couleur d'environ 4vw - 10px (agrandies 2 fois, décalées de 46vw) :
   le logo et le bouton restent sur le papier, à une marge de la bande */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .hub__haut { padding-inline: max(var(--gutter), calc(4vw + 14px)); }
} }
.hub__haut .marque__mot { width: 150px; }
/* Le grand logo est pile au centre de l'écran : c'est lui qui devient la case centrale du hub. */
.hub { --logo: clamp(130px, min(19vw, 30vh), 250px); }
.logo-trace { position: absolute; left: 50%; top: 50%; width: var(--logo); height: auto; translate: -50% -50%; color: var(--ink); overflow: visible; }
.hub__centre-intro { position: absolute; left: 0; right: 0; top: calc(50% + var(--logo) / 2 + clamp(20px, 4vh, 40px)); display: grid; justify-items: center; gap: clamp(16px, 2.6vh, 28px); padding: 0 var(--gutter); }
.logo-trace path { fill: currentColor; }
.hub__titre { font-size: clamp(2.1rem, 4.2vw, 3.6rem); max-width: 18ch; }
.hub__invite { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 1.125rem; color: var(--ink-2); text-decoration: none; }
.hub__invite .ico { width: 22px; height: 22px; }

.hub__tuiles {
  position: relative; height: 100dvh; min-height: 560px;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
  gap: 10px; padding: 10px;
}
.tuile {
  --c: var(--ink); --t: var(--paper);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(18px, 2.2vw, 34px);
  background: var(--c); color: var(--t); text-decoration: none;
}
.tuile--construction { --c: var(--construction); --t: var(--construction-t); view-transition-name: metier-construction; }
.tuile--immobilier { --c: var(--immobilier); --t: var(--immobilier-t); view-transition-name: metier-immobilier; }
.tuile--hotels { --c: var(--hotels); --t: var(--hotels-t); view-transition-name: metier-hotels; }
.tuile--assurance { --c: var(--assurance); --t: var(--assurance-t); view-transition-name: metier-assurance; }
.tuile--architectes { --c: var(--architectes); --t: var(--architectes-t); view-transition-name: metier-architectes; }
.tuile--diagnostiqueurs { --c: var(--diagnostiqueurs); --t: var(--diagnostiqueurs-t); view-transition-name: metier-diagnostiqueurs; }
.tuile__nom { font-size: clamp(1.3rem, 2.1vw, 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; padding-right: 2.5rem; max-width: 16ch; }
.tuile__ligne { font-size: clamp(0.95rem, 1.15vw, 1.125rem); line-height: 1.4; max-width: 26ch; }
.tuile__fleche { position: absolute; top: clamp(18px, 2.2vw, 34px); right: clamp(18px, 2.2vw, 34px); width: 26px; height: 26px; transition: transform 0.35s var(--ease); }
.tuile__img {
  position: absolute; z-index: -1; right: 3%; bottom: 3%;
  width: 74%; height: 66%; object-fit: contain; object-position: 100% 100%;
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .tuile:hover .tuile__img { transform: translateY(-6px) scale(1.03); }
  .tuile:hover .tuile__fleche { transform: translate(3px, -3px); }
}
.tuile:active { transform: scale(0.995); }
.tuile:focus-visible { outline: 3px solid var(--t); outline-offset: -9px; }

.hub__centre {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: clamp(92px, 10vw, 150px); aspect-ratio: 1;
  translate: -50% -50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  border: clamp(6px, 0.7vw, 10px) solid var(--paper);
}
.hub__centre svg { width: 56%; height: auto; }
/* La tuile sous le logo central : son texte commence sous la case du logo pour ne jamais être masqué. */
@media (min-width: 761px) { .tuile:nth-child(5) { padding-top: calc(clamp(92px, 10vw, 150px) / 2 + clamp(22px, 2.4vw, 36px)); } .tuile:nth-child(5) .tuile__img { height: 54%; } }

@media (max-width: 760px) {
  .hub__tuiles { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; padding: 6px; min-height: 620px; }
  .tuile { padding: 16px; }
  .tuile__nom { font-size: 1.15rem; padding-right: 1.8rem; }
  .tuile__ligne { display: none; }
  .tuile__fleche { top: 16px; right: 14px; width: 20px; height: 20px; }
  .tuile__img { width: 92%; height: 64%; right: 4%; }
  .hub__haut .btn { display: none; }
}

/* Entrée animée au chargement (temps) */
@media (prefers-reduced-motion: no-preference) {
  .hub__grille::before { animation: trace-v 1s var(--ease) both; }
  .hub__grille::after { animation: trace-h 1s 0.15s var(--ease) both; }
  .logo-trace path {
    fill: transparent; stroke: currentColor; stroke-width: 1.1;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: trace-logo 1.5s 0.35s cubic-bezier(0.65, 0, 0.35, 1) forwards, remplit 0.6s 1.75s ease forwards;
  }
  .hub__titre, .hub__invite, .hub__haut > * { animation: monte 0.8s var(--ease) both; }
  .hub__titre { animation-delay: 1.9s; }
  .hub__invite { animation-delay: 2.15s; }
  .hub__haut > * { animation-delay: 2.3s; }
  .hub__invite .ico { animation: rebond 1.8s 3s ease-in-out infinite; }
}
@keyframes trace-v { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
@keyframes trace-h { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@keyframes trace-logo { to { stroke-dashoffset: 0; } }
@keyframes remplit { to { fill: currentColor; stroke-width: 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rebond { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }

/* Hub piloté par le défilement : seulement si le navigateur sait faire et si le mouvement est accepté */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hub { height: 300vh; view-timeline: --hub block; }
    .hub__ancre { top: 165vh; }
    .hub__stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
    .hub__intro { position: absolute; inset: 0; min-height: 0; z-index: 3; pointer-events: none; }
    .hub__intro a, .hub__intro .btn { pointer-events: auto; }
    .hub__tuiles { position: absolute; inset: 0; height: auto; min-height: 0; }

    .tuile, .hub__centre, .hub__retrait {
      animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --hub;
    }
    .tuile { animation-name: arrive; animation-range: contain 0% contain 55%; }
    .tuile:nth-child(1) { --dx: -46vw; --dy: -48vh; }
    .tuile:nth-child(2) { --dx: 0vw;   --dy: -82vh; }
    .tuile:nth-child(3) { --dx: 46vw;  --dy: -48vh; }
    .tuile:nth-child(4) { --dx: -46vw; --dy: 48vh; }
    .tuile:nth-child(5) { --dx: 0vw;   --dy: 82vh; }
    .tuile:nth-child(6) { --dx: 46vw;  --dy: 48vh; }

    /* le texte d'entrée s'efface, le grand logo se réduit vers la case centrale */
    .hub__retrait { animation-name: efface; animation-range: contain 0% contain 16%; }
    /* le haut part plus tôt : effacé avant que les tuiles qui entrent ne l'atteignent */
    .hub__haut.hub__retrait { animation-range: contain 0% contain 4%; }
    .hub__centre { animation-name: centre; animation-range: contain 30% contain 55%; }
    .hub__intro .logo-trace { animation: vers-centre linear both; animation-timeline: --hub; animation-range: contain 0% contain 50%; }

    @media (max-width: 760px) {
      .tuile:nth-child(1) { --dx: -40vw; --dy: -60vh; }
      .tuile:nth-child(2) { --dx: 40vw;  --dy: -60vh; }
      .tuile:nth-child(3) { --dx: -70vw; --dy: 0vh; }
      .tuile:nth-child(4) { --dx: 70vw;  --dy: 0vh; }
      .tuile:nth-child(5) { --dx: -40vw; --dy: 60vh; }
      .tuile:nth-child(6) { --dx: 40vw;  --dy: 60vh; }
    }
  }
}
@keyframes arrive { from { transform: translate(var(--dx), var(--dy)) scale(2); } to { transform: none; } }
@keyframes efface { to { opacity: 0; transform: translateY(-24px); visibility: hidden; } }
@keyframes centre { from { opacity: 0; scale: 1.6; } to { opacity: 1; scale: 1; } }
@keyframes vers-centre { to { transform: scale(0.3); opacity: 0; } }

/* ---------- Accueil : sections sous le hub ---------- */
.quoi { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.visite { margin: 0; }
.visite__cadre { position: relative; border: 1px solid var(--ink); aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.visite__cadre img { width: 100%; height: 100%; object-fit: cover; }
.visite__mesure { position: absolute; left: 76.5%; top: 31%; width: 15%; height: 2px; background: #f3f4f1; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); }
.visite__mesure::before, .visite__mesure::after { content: ""; position: absolute; top: -5px; width: 2px; height: 12px; background: #f3f4f1; }
.visite__mesure::before { left: 0; } .visite__mesure::after { right: 0; }
.visite__etiquette { position: absolute; right: 0; top: -38px; background: #15171a; color: #f3f4f1; font-size: 0.85rem; padding: 4px 10px; white-space: nowrap; }
.visite figcaption:empty { display: none; }
.visite figcaption { margin-top: 12px; font-size: 0.9rem; color: var(--ink-2); }
.quoi .h2 { margin-bottom: 28px; }

.etapes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); }
.etape { padding: 40px clamp(20px, 3vw, 44px) 8px; border-left: 1px solid var(--line); }
.etape:first-child { padding-left: 0; border-left: 0; }
.etape .ico { width: 34px; height: 34px; color: var(--accent-trait); margin-bottom: 26px; }
.etape h3 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); margin-bottom: 12px; }
.etape p { color: var(--ink-2); max-width: 32ch; }

.verbes { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.verbe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.verbe b { font-size: clamp(2.2rem, 5.4vw, 4.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.verbe span { font-size: 1.2rem; max-width: 40ch; }

/* ---------- Page métier ---------- */
.page-construction { --metier: var(--construction); --metier-t: var(--construction-t); }
.page-immobilier { --metier: var(--immobilier); --metier-t: var(--immobilier-t); }
.page-hotels { --metier: var(--hotels); --metier-t: var(--hotels-t); --accent-trait: var(--hotels); --btn-bg: var(--hotels); }
.page-assurance { --metier: var(--assurance); --metier-t: var(--assurance-t); --accent-trait: var(--assurance); --btn-bg: var(--assurance); }
.page-architectes { --metier: var(--architectes); --metier-t: var(--architectes-t); }
.page-diagnostiqueurs { --metier: var(--diagnostiqueurs); --metier-t: var(--diagnostiqueurs-t); --accent-trait: var(--diagnostiqueurs); --btn-bg: var(--diagnostiqueurs); }
@media (prefers-color-scheme: dark) {
  .page-hotels, .page-assurance, .page-diagnostiqueurs { --accent-trait: var(--ink); --btn-bg: var(--metier); --btn-fg: var(--metier-t); }
  :root { --btn-fg: var(--paper); }
}

.diptyque { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: calc(100dvh - 72px); }
.diptyque__texte { padding: clamp(48px, 7vw, 120px) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: 24px; max-width: 680px; }
.etiquette-metier { display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; }
.carre { width: 22px; height: 22px; background: var(--metier); display: inline-block; }
.diptyque h1 { font-size: clamp(2.4rem, 4.2vw, 4rem); max-width: 20ch; }
.diptyque .sous { font-size: 1.2rem; max-width: 40ch; color: var(--ink); }
.diptyque__couleur { position: relative; background: var(--metier); color: var(--metier-t); display: grid; place-items: center; padding: clamp(24px, 4vw, 64px); overflow: hidden; }
.page-construction .diptyque__couleur { view-transition-name: metier-construction; }
.page-immobilier .diptyque__couleur { view-transition-name: metier-immobilier; }
.page-hotels .diptyque__couleur { view-transition-name: metier-hotels; }
.page-assurance .diptyque__couleur { view-transition-name: metier-assurance; }
.page-architectes .diptyque__couleur { view-transition-name: metier-architectes; }
.page-diagnostiqueurs .diptyque__couleur { view-transition-name: metier-diagnostiqueurs; }
/* le conteneur prend la taille de l'image : la maquette est centrée dans l'aplat (avant : image calée à gauche, 71 px de décalage) */
.diptyque__couleur > div { width: min(100%, 600px); container-type: inline-size; }
.diptyque__img { width: 100%; height: auto; }
/* Repère : --x = position du point en % de la largeur de l'image. L'étiquette passe à la ligne
   plutôt que de sortir de l'image (1cqw = 1 % de la largeur de l'image). */
.repere { position: absolute; left: calc(var(--x) * 1%); width: max-content; display: flex; align-items: center; gap: 0; }
.repere__point, .repere__trait { flex: none; }
.repere__point { width: 16px; height: 16px; border-radius: 50%; background: #f3f4f1; box-shadow: 0 0 0 4px rgb(21 23 26 / 0.35); }
.repere__trait { width: 64px; height: 1.5px; background: #f3f4f1; }
.repere__texte { background: #15171a; color: #f3f4f1; font-size: 0.9rem; padding: 6px 12px; text-wrap: balance; max-width: calc((100 - var(--x)) * 1cqw - 88px); }
/* point dans la moitié droite : l'étiquette part vers la gauche, là où il y a la place */
.repere--gauche { flex-direction: row-reverse; transform: translateX(calc(-100% + 16px)); }
.repere--gauche .repere__texte { max-width: calc(var(--x) * 1cqw - 88px); }

.constat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 5vw, 80px); align-items: baseline; }
.constat h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.constat p { font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.3; letter-spacing: -0.015em; font-weight: 400; max-width: 34ch; }

.reponse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.reponse .h2 { margin-bottom: 24px; }

.usages { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.usage { grid-column: span 2; padding: 34px clamp(18px, 2.4vw, 36px) 40px 0; border-bottom: 1px solid var(--line); }
.usage:not(:nth-child(3n + 1)) { padding-left: clamp(18px, 2.4vw, 36px); border-left: 1px solid var(--line); }
.usages--5 .usage:nth-child(4), .usages--5 .usage:nth-child(5) { grid-column: span 3; }
.usages--5 .usage:nth-child(5) { border-left: 1px solid var(--line); padding-left: clamp(18px, 2.4vw, 36px); }
.usages--5 .usage:nth-child(4) { border-left: 0; padding-left: 0; }
.usages--7 .usage:nth-child(7) { grid-column: span 6; border-left: 0; padding-left: 0; }
/* 4 usages (liste modifiable dans le CMS) : 2 + 2, jamais de case vide (taste §4.7). */
.usages--4 .usage { grid-column: span 3; }
.usages--4 .usage:nth-child(odd) { border-left: 0; padding-left: 0; }
.usages--4 .usage:nth-child(even) { border-left: 1px solid var(--line); padding-left: clamp(18px, 2.4vw, 36px); }
.usage .ico { width: 32px; height: 32px; color: var(--accent-trait); margin-bottom: 20px; }
.usage h3 { font-size: 1.3rem; letter-spacing: -0.015em; margin-bottom: 8px; }
.usage p { color: var(--ink-2); max-width: 34ch; }

/* Étapes en pile (pages métier) : titre à gauche, étapes empilées à droite, sur fond teinté. */
.section--teinte { background: var(--paper-2); }
.pile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.pile__etapes { list-style: none; margin: 0; padding: 0; }
.pile__etapes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); }
.pile__etapes li:first-child { padding-top: 6px; border-top: 0; }
.pile__etapes .ico { width: 32px; height: 32px; color: var(--accent-trait); }
.pile__etapes h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); margin-bottom: 8px; }
.pile__etapes p { color: var(--ink-2); font-size: 1.1rem; }
/* Parlons-en (repris de bdlv.fr) : invitation et coordonnées à gauche, formulaire à droite */
.parlons__grille { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.parlons__gauche { display: grid; gap: 24px; }
.parlons__coord { margin: 8px 0 0; display: grid; gap: 18px; border-top: 1px solid var(--ink); padding-top: 22px; }
.parlons__coord dt { font-size: 0.9rem; color: var(--ink-2); }
.parlons__coord dd { margin: 4px 0 0; font-size: 1.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.parlons__coord a { font-weight: 500; }
.copier { min-height: 32px; padding: 0 12px; background: transparent; color: var(--ink); border: 1px solid var(--line); font: 500 0.85rem/1 var(--font); cursor: pointer; transition: transform 140ms var(--ease), background-color 200ms ease; }
.copier:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .copier:hover { background: var(--paper-2); } }
.parlons .demande { margin: 0; }
.envoi-ok h3 { font-size: 1.6rem; margin: 0 0 8px; }

.faq { max-width: 900px; }
.faq .h2 { margin-bottom: 32px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: rotate 0.3s var(--ease); }
.faq details[open] summary .ico { rotate: 45deg; }
.faq details p { padding: 0 0 26px; max-width: 64ch; color: var(--ink-2); }

.appel { background: var(--metier); color: var(--metier-t); padding: clamp(56px, 7vw, 96px) var(--gutter); }
.appel .cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.appel h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); }
.appel p { margin-top: 12px; font-size: 1.1rem; }
.appel .btn { --btn-bg: var(--metier-t); --btn-fg: var(--metier); }
.page-accueil .appel, .page-simple .appel { --metier: var(--ink); --metier-t: var(--paper); }

/* ---------- Pages simples ---------- */
.simple { max-width: 860px; }
.simple h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 24px; }
.simple h2 { font-size: 1.4rem; margin: 40px 0 10px; }
.simple p { max-width: 64ch; }
.simple h3 { font-size: 1.15rem; margin: 28px 0 8px; letter-spacing: -0.01em; }
.simple .titre-politique { margin-top: 72px; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.liste-legale { max-width: 64ch; padding-left: 1.2em; display: grid; gap: 8px; }
.coord { display: grid; gap: 6px; font-size: 1.15rem; }
.coord a { font-weight: 500; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--line); padding: 64px var(--gutter) 40px; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.pied__logo { width: 64px; height: 64px; margin-bottom: 20px; }
.pied__signature { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; max-width: 16ch; line-height: 1.15; }
.pied h2 { font-size: 0.95rem; color: var(--ink-2); font-weight: 400; letter-spacing: 0; margin-bottom: 14px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied ul a { text-decoration: none; }
.pied ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pied__bas { margin-top: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 0.9rem; color: var(--ink-2); }

/* ---------- Téléphone ---------- */
@media (max-width: 860px) {
  .quoi, .reponse, .parlons__grille, .constat, .pile { grid-template-columns: minmax(0, 1fr); }
  .diptyque { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .diptyque__couleur { min-height: 72vw; }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .etape, .etape:first-child { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .usages { grid-template-columns: minmax(0, 1fr); }
  .usage, .usages--4 .usage:nth-child(n), .usages--5 .usage:nth-child(n), .usages--7 .usage:nth-child(n) { grid-column: auto; padding: 26px 0; border-left: 0; }
  .verbe { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pied__grille { grid-template-columns: minmax(0, 1fr); }
  .repere__trait { width: 28px; }
  .repere__texte { font-size: 0.8rem; padding: 5px 9px; max-width: calc((100 - var(--x)) * 1cqw - 52px); }
  .repere--gauche .repere__texte { max-width: calc(var(--x) * 1cqw - 52px); }
  .btn--plein-tel { width: 100%; justify-content: space-between; }
}

/* ---------- Passage d'une page à l'autre (la tuile devient l'aplat de la page) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Survol classique des maquettes (Guillaume, 06/10 : « une animation au hover un peu classique ») ----------
   emil-design-eng : survol fréquent ⇒ court et discret, ease-out fort ; seulement sur ordinateur (hover + pointeur fin). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .diptyque__img { transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); }
  .diptyque__couleur > div:hover .diptyque__img { transform: translateY(-6px) scale(1.015); }
}

/* ---------- Formulaire de contact (page rendez-vous ; repris de bdlv.fr) ----------
   taste §4.6 : libellé au-dessus, erreur en dessous ; §4.5 : contrastes AA, retour au clic ; angles vifs comme le reste du site. */
.demande { margin: 40px 0 48px; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.champ-f { display: grid; gap: 8px; }
.champ-f.large, .rgpd.large, .envoi.large { grid-column: 1 / -1; }
.champ-f label { font-weight: 500; }
.facultatif { font-weight: 400; color: var(--ink-2); }
.champ-f input, .champ-f select, .champ-f textarea {
  font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--ink-2); border-radius: 0;
  padding: 12px 14px; min-height: 48px; width: 100%;
}
.champ-f textarea { resize: vertical; }
.champ-f input:focus-visible, .champ-f select:focus-visible, .champ-f textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }
.champ-f.invalide input, .champ-f.invalide textarea { border-color: #a8492f; }
.err { color: #a8492f; font-size: 0.95rem; min-height: 0; }
@media (prefers-color-scheme: dark) { .err { color: #f09a80; } .champ-f.invalide input, .champ-f.invalide textarea { border-color: #f09a80; } }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rgpd { font-size: 0.9rem; color: var(--ink-2); max-width: 70ch; }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.statut { color: var(--ink-2); }
.envoi-ok, .envoi-ko { display: none; }
.envoi-ok.visible, .envoi-ok:target, .envoi-ko:target { display: block; }
.envoi-ok { border: 1px solid var(--line); background: var(--paper-2); padding: 24px 28px; }
.envoi-ok h2 { font-size: 1.6rem; margin: 0 0 8px; }
.envoi-ko { color: #a8492f; margin-bottom: 20px; }
.demande.envoye .champs, .demande:has(.envoi-ok:target) .champs { display: none; }
@media (max-width: 640px) { .champs { grid-template-columns: minmax(0, 1fr); } .envoi .btn { width: 100%; justify-content: space-between; } }

/* ---------- Prise de rendez-vous (agenda Calendly dans une fenêtre, reprise de bdlv.fr) ----------
   Une colonne de 640 px : sous 650 px de large, Calendly pose son agenda bord à bord au lieu d'une carte encadrée.
   Toujours en papier clair, même en mode sombre : l'agenda Calendly est réglé sur ces couleurs. */
.rdv-dlg {
  --paper: #f3f4f1; --ink: #15171a; --ink-2: #4a4f55; --line: #d6d9d3;
  width: min(640px, calc(100vw - 2 * var(--gutter))); height: fit-content; max-height: min(820px, calc(100dvh - 2 * var(--gutter))); max-width: none;
  padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: hidden; box-shadow: 0 30px 80px -30px rgb(21 23 26 / 0.45);
}
.rdv-dlg[open] { display: flex; flex-direction: column; animation: rdv-in 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.rdv-dlg.closing { animation: rdv-out 160ms ease-out forwards; }
.rdv-dlg::backdrop { background: rgb(21 23 26 / 0.55); animation: rdv-fondu 260ms ease-out; }
.rdv-dlg.closing::backdrop { opacity: 0; transition: opacity 160ms ease-out; }
@keyframes rdv-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes rdv-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes rdv-fondu { from { opacity: 0; } }
.rdv-haut { display: flex; align-items: center; gap: 1.2rem; padding: 0.55rem 0.55rem 0.55rem 1.4rem; border-bottom: 1px solid var(--line); }
/* « Nous écrire » : la porte vers le formulaire, à côté de la croix */
.rdv-ecrire { flex: none; min-height: 44px; }
.rdv-haut p { flex: 1; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.rdv-x { flex: none; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: transform 140ms var(--ease), background-color 200ms ease; }
.rdv-x:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .rdv-x:hover { background: var(--paper-2); } }
.rdv-main { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* En-tête : le monogramme TTP, qui, quoi, combien de temps */
.rdv-cote { flex: none; display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--line); }
.rdv-logo { display: block; flex: none; width: 40px; height: 40px; color: var(--ink); }
.rdv-logo svg { width: 100%; height: 100%; }
.rdv-qui { font-size: 0.9rem; color: var(--ink-2); }
.rdv-quoi { font-size: 1.3rem; font-weight: 500; margin-top: 0.15rem; }
.rdv-duree { margin-left: auto; font-size: 0.9rem; color: var(--ink-2); white-space: nowrap; }
.rdv-corps { position: relative; flex: 0 1 var(--cal-h, 600px); min-height: 0; min-width: 0; }
.rdv-attente { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 160ms ease-out; }
.cal-on .rdv-attente { opacity: 0; pointer-events: none; }
/* Chargement : le monogramme se dessine au trait, se remplit, tient, s'efface, recommence (2,4 s) ; même tracé que l'entrée du site */
.rdv-spin { display: block; width: 64px; height: 64px; color: var(--ink); }
.rdv-spin svg { width: 100%; height: 100%; overflow: visible; }
.rdv-dlg[open] .rdv-spin svg { animation: spin-efface 2.4s ease-out infinite; }
.rdv-dlg[open] .rdv-spin path { stroke: currentColor; stroke-dasharray: 1; animation: spin-trace 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes spin-trace {
  0% { stroke-dashoffset: 1; fill: transparent; stroke-width: 1.1; }
  45% { stroke-dashoffset: 0; fill: transparent; stroke-width: 1.1; }
  60%, 100% { stroke-dashoffset: 0; fill: currentColor; stroke-width: 0; }
}
@keyframes spin-efface { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* L'agenda apparaît quand il est prêt (entrée en ease-out, sous 300 ms) */
.rdv-corps iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity 220ms ease-out; }
.cal-on .rdv-corps iframe { opacity: 1; }
@media (max-width: 860px) {
  /* Plein écran ; l'encoche et la barre d'accueil des iPhone ne recouvrent ni la croix ni l'agenda.
     Bord à bord par inset et non 100vw (la place de la barre de défilement laissait une bande à droite sur BDLV) */
  .rdv-dlg { inset: 0; margin: 0; width: auto; height: 100dvh; max-height: none; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  .rdv-haut { padding-left: var(--gutter); }
  .rdv-cote { padding: 0.9rem var(--gutter); }
  .rdv-main, .rdv-corps { flex: 1 1 auto; }
  .rdv-org { display: none; }
  /* une seule ligne à côté de « Nous écrire » et de la croix */
  .rdv-long { display: none; }
  .rdv-haut { gap: 10px; }
  .rdv-haut p { white-space: nowrap; }
  .rdv-dlg[open] { animation-name: rdv-fondu; }
  .rdv-dlg.closing { animation: rdv-fondu 160ms ease-out reverse forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .rdv-dlg[open] .rdv-spin svg, .rdv-dlg[open] .rdv-spin path { animation: none; }
  .rdv-dlg[open] .rdv-spin path { fill: currentColor; stroke-width: 0; }
  .rdv-corps iframe, .rdv-attente { transition: none; }
  .rdv-dlg[open] { animation-name: rdv-fondu; }
  .rdv-dlg.closing { animation: rdv-fondu 160ms ease-out reverse forwards; }
}
#demande { scroll-margin-top: 104px; }
/* Page rendez-vous : l'appel en alternative au formulaire */
.agenda { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(32px, 5vw, 48px); border-top: 1px solid var(--line); display: grid; gap: 14px; justify-items: start; }
.agenda h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0; }
.agenda + .coord { margin-top: 32px; }
.agenda p { color: var(--ink-2); max-width: 52ch; }
.envoi-ok .btn { margin-top: 18px; }
/* Demande envoyée : le « Merci » propose déjà le créneau, le bloc d'appel ne le répète pas */
.simple:has(.envoi-ok.visible, .envoi-ok:target) .agenda { display: none; }