/* Accueil du site du cabinet (WEB.6), bâti avec scroll-craft. Chargé après site.css, sur l'accueil seulement.
   Le moteur (scrollcraft.css et .js) est copié tel quel ; ici, ses jetons prennent les couleurs du logo. */
.accueil {
  --sc-canvas: #ffffff;
  --sc-surface: var(--fond-doux);
  --sc-ink: var(--texte);
  --sc-ink-soft: var(--texte-doux);
  --sc-accent: var(--bleu);
  --sc-accent-ink: #ffffff;
  --sc-font-display: var(--serif);
  --sc-font-text: var(--sans);
  --entete: 78px;
  --vert-coche: #1f8a5b;
  font-size: 17px;
  letter-spacing: normal;
}
.accueil ::selection { background: var(--bleu-pale); color: var(--marine); }
.accueil h1, .accueil h2 { text-wrap: balance; }
.accueil p { text-wrap: pretty; }
.accueil .scene { padding-top: var(--entete); display: flex; align-items: center; }
.accueil .scene > .cadre { width: 100%; }
.lien-clair { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; text-underline-offset: .25em; }
.lien-clair:hover { color: var(--bleu-ciel); }
.lien-clair .icone { width: 1em; height: 1em; }

/* ---------- Ouverture : une photo en plein écran derrière, l'image encadrée devant (revue par Loup) ---------- */
.ouverture { position: relative; overflow: clip; min-height: calc(100svh - var(--entete)); display: flex; align-items: center; background: var(--marine); color: #dbe4f4; }
.ouverture-fond { position: absolute; inset: -12% 0 -12% 0; margin: 0; z-index: 0; }
.ouverture-fond img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* La photo reste entière à droite ; vers le texte, un dégradé marine qui ne couvre que la colonne du titre. */
.ouverture::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(15, 36, 70, .96) 0%, rgba(15, 36, 70, .9) 34%, rgba(15, 36, 70, .55) 58%, rgba(15, 36, 70, .2) 100%); }
.ouverture .scene { position: relative; z-index: 2; width: 100%; padding: 64px 0; }
.ouverture-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; align-items: center; }
.ouverture-texte { position: relative; z-index: 3; padding-right: 8px; }
.ouverture h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -.02em; margin-bottom: .45em; max-width: 12em; }
.ouverture h1 em { color: var(--bleu-ciel); }
.ouverture .chapeau { color: #d6e0f2; font-size: 1.16rem; max-width: 30em; }
.ouverture .boutons { align-items: center; gap: 22px; margin-top: 28px; }
.tel-lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; text-decoration: none; }
.tel-lien .icone { color: var(--bleu-ciel); }
.tel-lien:hover { color: var(--bleu-ciel); }
.ouverture-lieu { margin: 36px 0 0; color: #c7d3ea; font-size: .98rem; }
.ouverture-lieu span { color: #fff; font-weight: 600; }
.profondeur { position: relative; height: 580px; margin-left: -24px; perspective: 1200px; }
.plan { position: absolute; margin: 0; }
.plan-loin, .plan-milieu { background: #fff; border-radius: 20px; color: var(--texte); }
/* Derrière : la trésorerie, plus petite et plus pâle (la distance). */
.carte-tresorerie { top: 0; right: -10px; width: 66%; height: 132px; padding: 16px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; align-content: start; opacity: .94; box-shadow: 0 24px 50px rgba(4, 14, 34, .35); }
.carte-tresorerie .carte-titre { grid-column: 1 / -1; }
.carte-tresorerie .carte-gros span { display: none; }
.carte-tresorerie svg { display: block; width: 100%; height: 48px; align-self: start; margin-top: 4px; }
.carte-titre { margin: 0; font-size: .82rem; font-weight: 600; color: var(--texte-doux); }
.carte-titre span { color: var(--bleu); }
.carte-gros { margin: 2px 0 0; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--marine); font-variant-numeric: tabular-nums; }
.carte-gros span { font-family: var(--sans); font-size: .78rem; font-weight: 400; color: var(--texte-doux); }
/* Au milieu : les résultats du mois, la pièce principale. */
.apercu2 { left: 0; right: 30px; top: 96px; padding: 22px 24px 18px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 40px 80px rgba(4, 14, 34, .5), 0 4px 12px rgba(4, 14, 34, .15); z-index: 3; }
.apercu2-tete .pastille { white-space: nowrap; }
.apercu2-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.apercu2-tete .carte-titre { font-family: var(--serif); font-size: 1.15rem; color: var(--marine); }
.apercu2-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.apercu2-chiffres p { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--fond-doux); line-height: 1.25; }
.apercu2-chiffres span { display: block; font-size: .74rem; color: var(--texte-doux); }
.apercu2-chiffres strong { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--marine); font-variant-numeric: tabular-nums; }
.apercu2-chiffres em { font-style: normal; font-size: .72rem; color: #17704a; }
.apercu2-graph { display: block; width: 100%; height: auto; margin: 14px 0 6px; }
.apercu2-graph .barre { fill: #c9d7fb; }
.apercu2-graph .courant { fill: var(--bleu); }
.apercu2-graph rect { transform-box: fill-box; transform-origin: 50% 100%; animation: pousse .9s var(--sc-ease-out) both; animation-delay: calc(var(--i) * 60ms + 200ms); }
.apercu2-graph .budget { fill: none; stroke: var(--marine); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; stroke-dashoffset: 0; animation: trace 1.4s var(--sc-ease-out) .6s both; }
.apercu2-graph text { font: 500 11px var(--sans); fill: var(--texte-doux); text-anchor: middle; }
@keyframes pousse { from { transform: scaleY(0); } to { transform: none; } }
@keyframes trace { from { opacity: 0; } to { opacity: 1; } }
.apercu2-legende { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .76rem; color: var(--texte-doux); }
.apercu2-legende i { display: inline-block; width: 16px; height: 4px; border-radius: 2px; background: var(--bleu); }
.apercu2-legende .l-budget { margin-left: 10px; background: repeating-linear-gradient(90deg, var(--marine) 0 5px, transparent 5px 9px); }
.apercu2-legende span { margin-left: auto; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .apercu2-graph rect, .apercu2-graph .budget { animation: none; } }
.piece { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px rgba(4, 14, 34, .4), 0 3px 8px rgba(4, 14, 34, .12); font-size: .9rem; z-index: 4; color: var(--texte); }
.piece p { margin: 0; line-height: 1.35; }
.piece strong { display: block; color: var(--marine); }
.piece span { color: var(--texte-doux); }
.piece .icone { width: 2.2em; height: 2.2em; padding: 7px; border-radius: 10px; background: #e3f4ec; color: var(--vert-coche); }
.piece-bas .icone { background: var(--bleu-pale); color: var(--bleu); }
.piece-haut { top: 50px; left: -34px; z-index: 5; }
.piece-bas { bottom: -34px; right: 44px; z-index: 5; }
@media (max-width: 1240px) { .carte-tresorerie { right: 0; } .piece-haut { left: -8px; } }
@media (max-width: 920px) {
  .ouverture { align-items: flex-start; }
  .ouverture::before { background: linear-gradient(180deg, rgba(15, 36, 70, .95) 0%, rgba(15, 36, 70, .88) 52%, rgba(15, 36, 70, .5) 100%); }
  .ouverture .scene { padding: 32px 0 44px; }
  .ouverture-grille { grid-template-columns: 1fr; }
  .ouverture h1 { font-size: clamp(2rem, 8.4vw, 2.7rem); }
  .ouverture .chapeau { font-size: 1.04rem; margin-bottom: 0; }
  .ouverture .boutons { margin-top: 20px; }
  .ouverture-lieu { margin-top: 18px; font-size: .9rem; }
  .profondeur { height: auto; margin: 34px 0 0; padding-top: 58px; }
  .carte-tresorerie, .piece-haut { display: none; }
  .profondeur { padding-top: 0; }
  .apercu2-tete .carte-titre { font-size: 1rem; }
  .apercu2 { position: relative; top: auto; left: auto; right: auto; padding: 16px; }
  .apercu2-chiffres strong { font-size: 1.1rem; }
  .apercu2-chiffres em { display: none; }
  .piece { padding: 10px 13px; font-size: .8rem; }
  .piece-haut { top: -16px; left: auto; right: 8px; }
  .piece-bas { bottom: -18px; right: auto; left: 10px; }
}

/* Le bandeau de confiance, posé au bas de l'image (demande de Loup). */
.ouverture { flex-direction: column; align-items: stretch; }
.ouverture .scene { flex: 1; display: flex; align-items: center; }
.ouverture-bandeau { position: relative; z-index: 2; list-style: none; margin: 0; padding: 22px max(20px, calc((100vw - 1160px) / 2 + 20px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; background: rgba(10, 26, 52, .72); border-top: 1px solid rgba(255,255,255,.14); }
.ouverture-bandeau li { display: flex; gap: 14px; align-items: flex-start; }
.ouverture-bandeau .icone { width: 2.4em; height: 2.4em; padding: 9px; border-radius: 12px; background: rgba(143,176,255,.18); color: var(--bleu-ciel); }
.ouverture-bandeau p { margin: 0; font-size: .92rem; color: #c7d3ea; line-height: 1.45; }
.ouverture-bandeau strong { display: block; color: #fff; font-size: .98rem; }
@media (max-width: 900px) { .ouverture-bandeau { grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 18px; padding-bottom: 18px; } }
@media (max-width: 520px) { .ouverture-bandeau { grid-template-columns: 1fr; } .ouverture-bandeau p { font-size: .86rem; } }

/* ---------- Le moment fort : l'année qui se coche ---------- */
.annee .scene { background: var(--marine); color: #dbe4f4; }
.annee-cadre { display: grid; gap: 22px; }
.annee-tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; }
.annee .surtitre { color: var(--bleu-ciel); margin-bottom: .6em; }
.annee h2 { color: #fff; font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin: 0 0 .25em; }
.annee-etat { position: relative; display: grid; margin: 0; font-size: 1.05rem; color: #c7d3ea; }
.annee-etat > span { grid-area: 1 / 1; transition: opacity .35s var(--sc-ease-out), transform .35s var(--sc-ease-out); }
.annee-etat-apres { opacity: 0; transform: translateY(8px); color: #9fe0bf; font-weight: 600; }
.annee.finie .annee-etat-avant { opacity: 0; transform: translateY(-8px); }
.annee.finie .annee-etat-apres { opacity: 1; transform: none; }
.annee-reste { margin: 0; color: #c7d3ea; font-size: 1rem; }
.annee-reste strong { font-family: var(--serif); font-size: 2.4rem; color: #fff; font-variant-numeric: tabular-nums; margin-right: 6px; vertical-align: -4px; }
/* La frise : les mois défilent de côté ; les mois passés sortent par la gauche (demande de Loup). */
.calendrier-fenetre { position: relative; overflow-x: auto; margin: 0 calc(-1 * var(--marge-frise, 0px)); padding: 10px 0; mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.js .calendrier-fenetre { overflow: hidden; }
.aiguille { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; z-index: 2; background: var(--bleu-ciel); border-radius: 2px; box-shadow: 0 0 0 5px rgba(143,176,255,.14); transform: translateX(var(--x-aiguille, 0px)); opacity: calc(1 - var(--fini, 0)); transition: opacity .3s; }
.calendrier { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; transform: translateX(var(--x-frise, 0px)); will-change: transform; }
.calendrier > li { flex: none; width: var(--l-mois, 240px); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px 14px 14px; transition: opacity .4s var(--sc-ease-out), background .3s, border-color .3s; }
.calendrier > li.passe { opacity: .38; border-color: rgba(159, 224, 191, .28); }
.annee.finie .calendrier > li.passe { opacity: 1; }
.calendrier h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; color: #fff; margin: 0 0 12px; }
.calendrier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.calendrier ul li { position: relative; font-size: 1rem; line-height: 1.35; color: #dbe4f4; padding: 9px 10px 9px 36px; border-radius: 10px; background: rgba(255,255,255,.07); transition: background .25s var(--sc-ease-out), color .25s var(--sc-ease-out); }
.calendrier ul li::before { content: ""; position: absolute; left: 10px; top: 11px; width: 17px; height: 17px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.45); transition: background .25s var(--sc-ease-out), border-color .25s var(--sc-ease-out); }
.calendrier ul li.coche { background: rgba(159, 224, 191, .16); color: #fff; }
.calendrier ul li.coche::before { border-color: #9fe0bf; background: #9fe0bf url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314305e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.annee-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.annee-services a { display: flex; gap: 12px; align-items: center; height: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #dbe4f4; text-decoration: none; transition: background .2s, border-color .2s; }
.annee-services a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.annee-services .icone { width: 2.3em; height: 2.3em; padding: 8px; border-radius: 10px; background: rgba(143,176,255,.18); color: var(--bleu-ciel); transition: background .3s, color .3s; }
.annee-services strong { display: block; color: #fff; font-size: .95rem; line-height: 1.25; }
.annee-services em { font-style: normal; font-size: .82rem; color: #aebcd6; font-variant-numeric: tabular-nums; }
.annee-services em b { font-weight: 600; }
.annee-services li.complet .icone { background: #9fe0bf; color: var(--marine); }
.annee-services li.complet em { color: #9fe0bf; }
.annee-note { margin: 0; font-size: .86rem; color: #aebcd6; max-width: 62em; }
.annee-note a { color: #fff; }
@media (max-width: 1000px) { .annee-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .annee-cadre { gap: 12px; }
  .calendrier > li { width: 190px; padding: 12px 10px 10px; }
  .calendrier h3 { font-size: 1.1rem; margin-bottom: 8px; }
  .calendrier ul li { font-size: .88rem; padding: 7px 8px 7px 30px; }
  .calendrier ul li::before { left: 8px; top: 9px; width: 15px; height: 15px; }
  .annee .surtitre { display: none; }
  .annee h2 { font-size: 1.45rem; }
  .annee-etat { font-size: .92rem; }
  .annee-services { gap: 6px; }
  .annee-services a { padding: 7px 9px; gap: 8px; }
  .annee-services .icone { display: none; }
  .annee-services strong { font-size: .8rem; }
  .annee-services em { font-size: .74rem; }
  .annee-reste strong { font-size: 1.9rem; }
  .annee-note { font-size: .8rem; }
}

/* ---------- L'équipe, de côté ---------- */
.equipe-rail .scene { background: var(--fond-doux); }
.rail { gap: 22px; padding: 0 max(20px, calc((100vw - 1160px) / 2 + 20px)); align-items: center; width: max-content; }
.rail-tete { width: 340px; flex: none; padding-right: 24px; }
.rail-tete h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.rail-tete p { color: var(--texte-doux); font-size: 1.1rem; }
.visage { flex: none; width: 250px; margin: 0; }
.visage img, .visage-initiales { width: 250px; height: 290px; object-fit: cover; border-radius: 16px; box-shadow: 0 14px 34px rgba(16, 36, 72, .14); }
.visage:nth-of-type(even) { transform: translateY(34px); }
.visage-initiales { display: grid; place-items: center; background: linear-gradient(160deg, var(--bleu-pale), #d9e2f3); font-family: var(--serif); font-size: 3.4rem; color: var(--ardoise); }
.visage figcaption { padding: 14px 4px 0; font-size: .92rem; color: var(--texte-doux); line-height: 1.4; }
.visage figcaption strong { display: block; font-family: var(--serif); font-size: 1.12rem; color: var(--marine); }
@media (max-width: 760px) {
  .rail { gap: 14px; }
  .rail-tete { width: 78vw; }
  .visage { width: 200px; }
  .visage img, .visage-initiales { width: 200px; height: 230px; }
  .visage:nth-of-type(even) { transform: translateY(20px); }
}

/* ---------- Questions : le titre centré à la hauteur de la liste (demande de Loup) ---------- */
.accueil #faq { padding: 112px 0; }
.accueil #faq .faq-grille { align-items: center; }

/* ---------- La fin : la plaque ---------- */
.fin { padding: 0 0 112px; background: #fff; }
.plaque { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: end; background: linear-gradient(120deg, var(--marine) 0%, #1d4596 100%); color: #d6e0f2; border-radius: 24px; padding: 56px; box-shadow: 0 30px 60px rgba(16, 36, 72, .22); }
.plaque h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.plaque p { max-width: 32em; }
.plaque .boutons { align-items: center; gap: 22px; }
.plaque-adresse { font-style: normal; display: grid; gap: 8px; justify-items: start; border-left: 1px solid rgba(255,255,255,.2); padding-left: 32px; }
.plaque-adresse a { color: #fff; text-decoration: none; }
.plaque-adresse a:hover { text-decoration: underline; }
.plaque-tel { font-family: var(--serif); font-size: 1.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .fin { padding-bottom: 72px; } .plaque { grid-template-columns: 1fr; padding: 36px 26px; gap: 28px; } .plaque-adresse { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding-top: 24px; } }

/* Mouvement réduit : le moteur garde les fondus, on retire les déplacements maison. */
@media (prefers-reduced-motion: reduce) {
  .visage:nth-of-type(even) { transform: none; }
}