/* ==========================================================
   Wilfried Houssais — Conseiller en gestion de patrimoine
   Feuille de style commune à toutes les pages
   ========================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("polices/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("polices/fraunces-italique.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("polices/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --marine: #0f2238;
  --marine-clair: #1d4468;
  --or: #d6b16a;
  --or-fonce: #9a7430;
  --fond: #f8f6f1;
  --carte: #ffffff;
  --texte: #0f2238;
  --texte-doux: #55657a;
  --trait: #e7e2d7;
  --rayon: 18px;
  --ombre: 0 1px 2px rgba(15, 34, 56, .05), 0 6px 20px rgba(15, 34, 56, .05);
  --ombre-survol: 0 2px 4px rgba(15, 34, 56, .06), 0 14px 34px rgba(15, 34, 56, .12);
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --entete: 64px;
  /* Courbes : départ vif puis freinage doux (entrées, survols) */
  --sortie: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 16px);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.012em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }

.conteneur {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.icone {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: 3px;
  border-radius: 6px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
}
.lien-evitement:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: #fff;
  padding: 10px 14px;
  border-radius: 8px;
}

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

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 16px/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--sortie), background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bouton-or {
  background: var(--or);
  color: var(--marine);
}

.bouton-contour {
  background: transparent;
  color: var(--marine);
  border-color: #c9c2b2;
}

/* Survol : uniquement à la souris (sur écran tactile, il resterait « collé » après le toucher) */
@media (hover: hover) and (pointer: fine) {
  .bouton:hover { transform: translateY(-1px); }
  .bouton-or:hover { background: #e0bf80; }
  .bouton-contour:hover { border-color: var(--marine); background: #fff; }
}

/* Appui : le bouton s'enfonce légèrement, la réponse est immédiate */
.bouton:active { transform: scale(.97); }

/* ---------- En-tête fixe ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--entete);
}

.marque {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.marque strong {
  font: 600 18px/1.15 var(--serif);
  white-space: nowrap;
}
.marque span {
  font-size: 12px;
  color: var(--texte-doux);
  white-space: nowrap;
}

.menu {
  display: flex;
  gap: 4px;
}
.menu a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
  text-decoration: none;
  color: var(--texte);
}
.menu a:hover { background: #f1eee6; }
.menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--or); border-radius: 0; }

.entete .bouton {
  padding: 10px 18px;
  font-size: 15px;
  box-shadow: none;
  white-space: nowrap;
}

.bouton-menu {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--marine);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: transform .16s var(--sortie), background-color .15s ease;
}
.bouton-menu:active { transform: scale(.92); background: #f1eee6; }

@media (max-width: 860px) {
  .bouton-menu { display: inline-flex; }
  .marque span { display: none; }
  .marque strong { font-size: 16px; }
  .entete .conteneur { padding: 0 14px; gap: 6px; }
  .entete .bouton { padding: 9px 13px; font-size: 13.5px; }

  /* Le menu descend de l'en-tête ; il se referme plus vite qu'il ne s'ouvre */
  .menu {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .14s ease, transform .14s var(--sortie), visibility 0s .14s;
    position: absolute;
    top: var(--entete);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px 14px 14px;
    background: #fff;
    border-bottom: 1px solid var(--trait);
    box-shadow: 0 18px 30px rgba(15, 34, 56, .1);
  }
  .menu.ouvert {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s ease, transform .2s var(--sortie), visibility 0s;
  }
  .menu a { padding: 13px 8px; font-size: 16px; border-bottom: 1px solid #f1eee6; }
  .menu a:last-child { border-bottom: 0; }
}

/* ---------- Bandeau d'ouverture ---------- */

.ouverture {
  position: relative;
  overflow: hidden;
  background: var(--marine);
  color: #fff;
  padding: 72px 0 84px;
}
.ouverture h1 {
  font-size: clamp(32px, 5.6vw, 60px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.02em;
}
.ouverture h1 span { display: block; }
.ouverture p {
  margin: 22px 0 30px;
  max-width: 34em;
  font-size: 18px;
  color: #d5deea;
}
.ouverture .sous-bouton {
  margin: 16px 0 0;
  font-size: 14px;
  color: #a9b8cb;
}

/* Variante des pages dédiées */
.ouverture-page { padding: 44px 0 52px; }
.ouverture-page h1 { font-size: clamp(30px, 4.6vw, 44px); }
.ouverture-page p { margin-bottom: 0; }

.surtitre {
  display: inline-block;
  margin-bottom: 14px;
  font: 600 13px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  text-decoration: none;
}
a.surtitre:hover { text-decoration: underline; }

/* ---------- Bandeau des 3 arguments ---------- */

.arguments {
  background: #fff;
  border-bottom: 1px solid var(--trait);
}
.arguments ul {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.arguments li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 600;
  text-align: left;
}
.arguments .icone { color: var(--or-fonce); }
.arguments small {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--texte-doux);
}

@media (max-width: 640px) {
  .ouverture { padding: 36px 0 42px; }
  .ouverture p { margin: 16px 0 24px; font-size: 16.5px; }
  .ouverture-page { padding: 30px 0 36px; }
  .surtitre { font-size: 11.5px; letter-spacing: .09em; margin-bottom: 12px; }
  .arguments ul { gap: 6px; padding: 14px 0; align-items: start; }
  .arguments li {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.3;
  }
  .arguments small { font-size: 12px; }
}

/* ---------- Sections ---------- */

.section { padding: 60px 0; }
.section + .section { padding-top: 0; }

.section h2 {
  font-size: clamp(25px, 3.4vw, 34px);
  margin-bottom: 8px;
}
.section h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--or);
}
.section .chapeau {
  color: var(--texte-doux);
  margin: 14px 0 0;
}

/* ---------- Cases cliquables ---------- */

.cases {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cases.par-trois { grid-template-columns: repeat(3, 1fr); }

.case {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px 20px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  transition: transform .18s var(--sortie), border-color .18s ease;
}
.case:active { transform: scale(.98); }

.case .pastille {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: #f6efe0;
  color: var(--or-fonce);
  transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .case:hover { transform: translateY(-3px); border-color: var(--or); }
  .case:hover .pastille { background: var(--marine); color: var(--or); }
}

.case h3 {
  font-size: 18.5px;
  margin-bottom: 6px;
}
.case p {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--texte-doux);
}

@media (max-width: 900px) {
  .cases, .cases.par-trois { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section { padding: 32px 0; }
  #besoins, .ouverture-page + .section { padding-top: 32px !important; }
  .section h2::after { margin-top: 10px; }
  .cases { gap: 10px; margin-top: 18px; }
  .case { padding: 14px 13px; border-radius: 14px; }
  .case .pastille { width: 38px; height: 38px; margin-bottom: 10px; border-radius: 11px; }
  .case .pastille .icone { width: 21px; height: 21px; }
  .case h3 { font-size: 15.5px; margin-bottom: 4px; }
  .case p { font-size: 13px; line-height: 1.35; }
}

/* ---------- À propos (accueil) ---------- */

.apropos {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.portrait {
  position: relative;
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--marine);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px var(--or);
  display: grid;
  place-items: center;
  color: var(--or);
  font: 600 40px/1 var(--serif);
}
.portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apropos h2 { font-size: 24px; }
.apropos h2::after { display: none; }
.apropos p { margin-top: 8px; color: var(--texte-doux); }
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--or);
  padding-bottom: 2px;
}
.lien-fleche:hover { color: var(--marine-clair); }

@media (max-width: 640px) {
  .apropos { gap: 16px; padding: 18px; align-items: flex-start; }
  .portrait { width: 84px; height: 84px; font-size: 27px; }
  .apropos h2 { font-size: 20px; }
  .apropos p { font-size: 15px; }
}

/* ---------- Prise de rendez-vous ---------- */

.rdv {
  padding: 34px;
  background: var(--marine);
  border-radius: 24px;
  color: #fff;
  text-align: center;
}
.rdv h2 { font-size: clamp(25px, 3.4vw, 34px); }
.rdv h2::after { margin-left: auto; margin-right: auto; }
.rdv > p { margin-top: 14px; color: #d5deea; }

.rdv-choix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 560px;
  margin: 26px auto 0;
}
.rdv-choix button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: var(--rayon);
  color: #fff;
  font: 600 17px/1.25 var(--sans);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .rdv-choix button:hover { transform: translateY(-2px); border-color: var(--or); }
}
.rdv-choix button:active { transform: scale(.97); }
.rdv-choix button[aria-pressed="true"] {
  background: var(--or);
  border-color: var(--or);
  color: var(--marine);
}
.rdv-choix .icone { width: 28px; height: 28px; color: var(--or); }
.rdv-choix button[aria-pressed="true"] .icone { color: var(--marine); }
.rdv-choix small { font-size: 13.5px; font-weight: 400; opacity: .85; }

.rdv-calendrier {
  max-width: 760px;
  margin: 20px auto 0;
  background: #fff;
  border-radius: var(--rayon);
  overflow: hidden;
  color: var(--texte);
}
.rdv-calendrier iframe {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
}
.rdv-attente {
  margin: 10px;
  padding: 26px 18px;
  border: 2px dashed #c9c2b2;
  border-radius: 12px;
  font-size: 15px;
  color: var(--texte-doux);
}
.rdv-attente strong { display: block; color: var(--texte); margin-bottom: 4px; }

/* Le calendrier (ou le message d'attente) arrive en douceur au lieu de surgir */
.rdv-calendrier > * {
  transition: opacity .3s ease, transform .3s var(--sortie);
}
@starting-style {
  .rdv-calendrier > * { opacity: 0; transform: translateY(8px); }
}

.rdv-autres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.rdv-autres .bouton {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
}
.rdv-autres .bouton:hover { border-color: var(--or); color: var(--or); }
.rdv-ou { margin-top: 24px; font-size: 14px; color: #a9b8cb; }
.rdv-ou + .rdv-autres { margin-top: 12px; }

@media (max-width: 640px) {
  .rdv { padding: 26px 16px; border-radius: 20px; }
  .rdv-choix { gap: 10px; }
  .rdv-choix button { padding: 16px 8px; font-size: 15.5px; }
  .rdv-autres .bouton { width: 100%; }
}

/* ---------- Pages dédiées ---------- */

.situations {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.situations li {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--trait);
  border-left: 4px solid var(--or);
  border-radius: 14px;
  font: italic 18px/1.4 var(--serif);
}

.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 14px;
}
.etapes li::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--marine);
  color: var(--or);
  font: 600 19px/1 var(--serif);
}
.etapes strong { display: block; font-size: 17.5px; }
.etapes span { color: var(--texte-doux); font-size: 16px; }

.appel {
  padding: 40px 24px;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 24px;
  box-shadow: var(--ombre);
  text-align: center;
}
.appel h2 { font-size: clamp(23px, 3vw, 30px); }
.appel h2::after { margin-left: auto; margin-right: auto; }
.appel p { margin: 14px 0 24px; color: var(--texte-doux); }
.appel .retour {
  display: block;
  width: fit-content;
  margin: 20px auto 0;
  font-size: 15px;
  color: var(--texte-doux);
}
.appel .retour:hover { color: var(--marine); }

@media (max-width: 640px) {
  .situations { grid-template-columns: 1fr; gap: 10px; }
  .situations li { padding: 15px 16px; font-size: 16.5px; }
  .etapes li { grid-template-columns: 36px 1fr; gap: 12px; padding: 14px; }
  .etapes li::before { width: 36px; height: 36px; font-size: 16px; }
  .etapes strong { font-size: 16.5px; }
  .etapes span { font-size: 15px; }
  .appel { padding: 30px 18px; }
}

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

.pied {
  margin-top: 20px;
  padding: 40px 0 28px;
  background: var(--marine);
  color: #c6d1de;
  font-size: 14.5px;
}
.pied a { color: #fff; text-decoration: none; }
.pied a:hover { color: var(--or); text-decoration: underline; }
.pied-colonnes {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 28px;
}
.pied strong {
  display: block;
  margin-bottom: 8px;
  font: 600 17px/1.2 var(--serif);
  color: #fff;
}
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { padding: 3px 0; }
.avertissement {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.5;
  color: #a9b8cb;
}
.avertissement b { color: var(--or); font-weight: 600; }

@media (max-width: 640px) {
  .pied { padding: 30px 0 22px; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pied-colonnes > :first-child { grid-column: 1 / -1; }
}

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

/* ---------- Pages de texte (À propos, FAQ, pages légales) ---------- */

.texte { max-width: 780px; }
.texte h2 { font-size: clamp(21px, 2.6vw, 26px); margin-top: 38px; }
.texte h2:first-child, .texte .question:first-child h2 { margin-top: 0; }
.texte h2::after { width: 32px; height: 2px; margin-top: 10px; }
.texte p { margin-top: 14px; }
.texte a, .chapeau a { color: var(--marine-clair); text-underline-offset: 3px; }
.texte a { overflow-wrap: anywhere; }

.question {
  padding: 24px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.question h2 { margin-top: 0; }

.apropos p + p { margin-top: 10px; }

/* Passages que vous devez remplir avant la mise en ligne */
.a-completer {
  margin-top: 16px;
  padding: 14px 16px;
  background: #fff8e6;
  border: 2px dashed var(--or);
  border-radius: 12px;
  font-size: 15px;
  color: #6b5320;
}
.a-completer b {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or-fonce);
}


/* ==========================================================
   CARACTÈRE : en-tête animé, illustrations qui se dessinent
   ========================================================== */

/* ---------- Trait qui se dessine (illustrations et décors) ----------
   Chaque tracé porte la classe « t » et pathLength="1".
   --d = délai de départ, --t = durée du tracé. */

.t { stroke-dasharray: 1; }

@keyframes trace {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  6%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes monte {
  from { opacity: 0; transform: translateY(18px); }
}
@keyframes apparait {
  from { opacity: 0; }
}
@keyframes pulsation {
  0%   { box-shadow: 0 0 0 0 rgba(214, 177, 106, .55); }
  100% { box-shadow: 0 0 0 22px rgba(214, 177, 106, 0); }
}
@keyframes respire {
  to { transform: scale(1.07); }
}
@keyframes glisse {
  to { transform: translateX(-34px); }
}
@keyframes ouvre {
  from { transform: scaleX(.3); }
}

/* ---------- En-tête de l'accueil ---------- */

.ouverture .conteneur { position: relative; }

.fond-anime {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--or);
  stroke-width: 1;
  opacity: .3;
  pointer-events: none;
}
.fond-anime path { vector-effect: non-scaling-stroke; }
.fond-anime .t { animation: trace var(--t, 2.6s) cubic-bezier(.5, .1, .2, 1) var(--d, 0s) backwards; }
/* Les mouvements lents et continus portent sur le <svg> entier, pas sur un groupe
   intérieur : le navigateur les confie à la carte graphique au lieu de redessiner
   tout le bandeau à chaque image. */
.fond-anime { overflow: visible; will-change: transform; }
.fond-anime.cercles {
  transform-origin: 78% 100%;
  animation: respire 26s ease-in-out 3s infinite alternate;
}
.fond-anime.ondes { animation: glisse 34s ease-in-out 3s infinite alternate; }
/* Le décor se met en pause dès que l'en-tête sort de l'écran */
.ouverture.hors-champ .fond-anime,
.ouverture.hors-champ .fond-anime * { animation-play-state: paused; }

/* Texte d'accueil : les lignes s'enchaînent à 80 ms d'écart, le bouton est
   utilisable en moins d'une seconde (le décor, lui, peut prendre son temps). */
.accueil h1 span { animation: monte .7s var(--sortie) backwards; }
.accueil h1 span:nth-child(1) { animation-delay: .05s; }
.accueil h1 span:nth-child(2) { animation-delay: .13s; }
.accueil h1 span:nth-child(3) { animation-delay: .21s; }
.accueil .surtitre { animation: apparait .5s ease backwards; }
.accueil p { animation: monte .7s var(--sortie) .3s backwards; }
.accueil .bouton {
  animation:
    monte .7s var(--sortie) .38s backwards,
    pulsation 1.3s ease-out 1.5s 1;
}

.souligne {
  position: relative;
  width: fit-content;
  padding-bottom: .12em;
}
.trait-or {
  position: absolute;
  left: -1%;
  bottom: -.08em;
  width: 102%;
  height: .22em;
  overflow: visible;
  fill: none;
  stroke: var(--or);
  stroke-width: 3;
  stroke-linecap: round;
}
.trait-or path { vector-effect: non-scaling-stroke; }
.trait-or .t { animation: trace .8s cubic-bezier(.6, .1, .3, 1) .75s backwards; }

/* ---------- Illustrations des cases ---------- */

.dessin {
  display: block;
  width: 108px;
  height: 72px;
  margin: -2px 0 14px -6px;
  overflow: visible;
  fill: none;
  stroke: var(--marine);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dessin .or { stroke: var(--or); stroke-width: 2; }
.dessin .plein { fill: var(--marine); stroke: none; }
.dessin g { transform-box: view-box; transition: transform .5s var(--sortie); }

/* Avant d'arriver à l'écran : invisible. À l'arrivée : le trait se dessine. */
.js .dessin:not(.vu) .t,
.js .dessin:not(.vu) .plein { opacity: 0; }
.js .dessin.vu .t { animation: trace var(--t, .9s) cubic-bezier(.6, .1, .3, 1) var(--d, 0s) backwards; }
.js .dessin.vu .plein { animation: apparait .5s ease var(--d, 0s) backwards; }
/* Au survol d'une case photo, le dessin se retrace (voir script.js), plus vite que la première fois */
.js .dessin.vu.rejoue .t {
  animation-duration: calc(var(--t, .9s) * .55);
  animation-delay: calc(var(--d, 0s) * .55);
}
.js .dessin.vu.rejoue .plein { animation-delay: calc(var(--d, 0s) * .55); }

/* Retraite : le soleil se lève un peu plus au survol */
.d-retraite .soleil { transform-origin: 96px 30px; }
.d-retraite .rayons { transform-origin: 96px 30px; }

/* Famille : le parapluie s'ouvre, puis s'élargit au survol */
.d-famille .parapluie { transform-origin: 60px 10px; }
.js .d-famille.vu .parapluie { animation: ouvre 1s cubic-bezier(.2, .7, .2, 1) .1s backwards; }

@media (max-width: 640px) {
  .ouverture { padding: 44px 0 56px; }
  .fond-anime { opacity: .2; }
  .dessin { width: 84px; height: 56px; margin: 0 0 8px -4px; }
}

/* Mouvement réduit : plus aucun déplacement, mais les fondus de couleur restent */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-property: opacity, color, background-color, border-color !important;
  }
}

/* ===== ÉTAPE 2 ===== */

/* ---------- Illustrations : mouvement au survol ---------- */

.d-impots .barres { transform-origin: 60px 70px; }
.d-epargne .couronne { transform-origin: 60px 38px; }
.d-transmettre .pousses { transform-origin: 60px 50px; }
.d-dirigeant .aiguille { transform-origin: 60px 40px; transform: rotate(40deg); }
.d-liberal .pavillon { transform-origin: 86px 40px; }
.d-commerce .enseigne { transform-origin: 104px 42px; }
.d-agri .grappe { transform-origin: 60px 20px; }
.d-transat .soleil { transform-origin: 98px 20px; }

@keyframes vient-gauche { from { transform: translateX(-12px); } }
@keyframes vient-droite { from { transform: translateX(12px); } }
.js .d-contrats.vu .cle { animation: vient-gauche 1.4s cubic-bezier(.2, .7, .2, 1) backwards; }
.js .d-contrats.vu .coeur { animation: vient-droite 1.4s cubic-bezier(.2, .7, .2, 1) backwards; }

@media (hover: hover) and (pointer: fine) {
  a:hover .d-retraite .soleil { transform: translateY(-4px); }
  a:hover .d-retraite .rayons { transform: translateY(-4px) scale(1.18); }
  a:hover .d-famille .parapluie { transform: translateY(-3px) scale(1.08); }
  a:hover .d-impots .barres { transform: scaleY(.84); }
  a:hover .d-impots .fleche { transform: translate(2px, 5px); }
  a:hover .d-epargne .couronne { transform: scale(1.12); }
  a:hover .d-immo .toit { transform: translateY(-4px); }
  a:hover .d-transmettre .pousses { transform: scale(1.14); }
  a:hover .d-dirigeant .aiguille { transform: rotate(12deg); }
  a:hover .d-contrats .cle { transform: translateX(7px); }
  a:hover .d-contrats .coeur { transform: translateX(-7px); }
  a:hover .d-liberal .pavillon { transform: scale(1.2); }
  a:hover .d-commerce .enseigne { transform: rotate(-9deg); }
  a:hover .d-agri .grappe { transform: rotate(7deg); }
  a:hover .d-salarie .poignee { transform: translateY(-3px); }
  a:hover .d-transat .soleil { transform: scale(1.18); }
  a:hover .d-foyer .toit { transform: translateY(-4px); }
}

/* ---------- Grande illustration en haut des pages dédiées ---------- */

.ouverture-page .conteneur {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}
.dessin.grand {
  width: 270px;
  height: 180px;
  margin: 0 12px 0 0;
  stroke: #e6ecf4;
  stroke-width: 1;
}
.dessin.grand .or { stroke-width: 1.25; }
.dessin.grand .plein { fill: #e6ecf4; }

/* ---------- « Vous êtes » : une liste, pas une grille de cases ---------- */

.profils {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  border-top: 1px solid var(--trait);
}
.profil {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 100%;
  padding: 20px 4px;
  border-bottom: 1px solid var(--trait);
  text-decoration: none;
}
.profil .dessin { width: 84px; height: 56px; margin: 0; flex: none; }
.profil div { flex: 1; min-width: 0; }
.profil h3 { font-size: 19px; margin-bottom: 3px; transition: color .2s ease; }
.profil p { font-size: 14.5px; line-height: 1.4; color: var(--texte-doux); }
.profil .fleche {
  width: 20px;
  height: 20px;
  color: var(--or-fonce);
  transition: transform .25s var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .profil:hover .fleche { transform: translateX(6px); }
  .profil:hover h3 { color: var(--marine-clair); }
}
.profil:active .fleche { transform: translateX(6px); }
.profil:active h3 { color: var(--marine-clair); }

/* ---------- Étapes : un fil doré plutôt que des boîtes ---------- */

.etapes { gap: 0; }
.etapes li {
  position: relative;
  padding: 0 0 28px;
  background: none;
  border: 0;
  border-radius: 0;
  gap: 20px;
}
.etapes li:last-child { padding-bottom: 0; }
.etapes li::before {
  background: var(--fond);
  border: 1.5px solid var(--marine);
  color: var(--marine);
}
.etapes li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 50px;
  bottom: 6px;
  width: 1px;
  background: var(--or);
}
.etapes div { padding-top: 8px; }

.appel { box-shadow: none; }
.lien-fleche .icone { transition: transform .25s var(--sortie); }
@media (hover: hover) and (pointer: fine) {
  .lien-fleche:hover .icone { transform: translateX(4px); }
}

/* ---------- Photos ----------
   Déposez vos fichiers dans le dossier « images » avec le nom exact
   indiqué sur chaque emplacement. Un léger voile bleu marine les accorde au site. */

.photo {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--marine);
  aspect-ratio: 2 / 1;
}
.photo::before {
  content: "Photo à fournir : images/" attr(data-fichier);
  padding: 12px;
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
  color: #a9b8cb;
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marine-clair);
  mix-blend-mode: color;
  opacity: .4;
  pointer-events: none;
}
.photo.bande { aspect-ratio: 21 / 8; margin-bottom: 40px; }
.photo.portrait { aspect-ratio: 4 / 5; }
.photo.portrait::after { opacity: .14; }
.photo.travail { aspect-ratio: 4 / 3; }
.photo.travail::after { opacity: .22; }

/* À propos : portrait à gauche, texte à droite, sans boîte */
.apropos {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 44px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.apropos h2 { font-size: clamp(25px, 3.4vw, 34px); }
.apropos p { font-size: 18px; max-width: 32em; }

.duo {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 48px;
  align-items: start;
  margin-top: 28px;
}
.duo .etapes { margin-top: 0; }

/* ---------- Apparition au défilement ---------- */

.js .rev {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s var(--sortie);
}
.js .rev.vu { opacity: 1; transform: none; }

/* Le petit trait doré sous les titres se dessine aussi */
.js h2.rev::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--sortie) .2s;
}
.js .rdv h2.rev::after, .js .appel h2.rev::after { transform-origin: center; }
.js h2.rev.vu::after { transform: scaleX(1); }

/* ---------- Transition entre les pages ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation-duration: .15s; }
  ::view-transition-new(root) { animation-duration: .3s; }
  .entete { view-transition-name: entete; }
}

@media (max-width: 860px) {
  .profils { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; gap: 26px; }
  .dessin.grand { width: 210px; height: 140px; }
}

@media (max-width: 640px) {
  .ouverture-page .conteneur { grid-template-columns: 1fr; gap: 14px; }
  .dessin.grand { order: -1; width: 132px; height: 88px; margin: 0 0 0 -6px; stroke-width: 1.3; }
  .dessin.grand .or { stroke-width: 1.6; }

  .profils { margin-top: 18px; }
  .profil { gap: 14px; padding: 13px 0; }
  .profil .dessin { width: 66px; height: 44px; }
  .profil h3 { font-size: 16px; }
  .profil p { font-size: 13.5px; }

  .etapes li { padding: 0 0 22px; gap: 14px; }
  .etapes li:not(:last-child)::after { left: 17.5px; top: 42px; }
  .etapes div { padding-top: 5px; }

  .photo.bande { aspect-ratio: 2 / 1; margin-bottom: 24px; }
  .apropos { grid-template-columns: 104px 1fr; gap: 16px; align-items: start; }
  .apropos p { font-size: 15px; }
}

/* Le portrait n'est plus un rond : même forme que les autres photos */
.photo.portrait {
  width: auto;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: none;
  font: inherit;
  color: inherit;
}

/* ===== STYLE MAGAZINE ===== */

/* ---------- Bichromie bleu marine ----------
   La photo passe en noir et blanc, puis un voile bleu marine teinte les ombres. */

.bichro {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--marine);
  isolation: isolate;
}
.bichro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(1.04);
  transition: filter .4s ease, transform .7s var(--sortie);
}
.bichro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marine);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .4s ease;
}

/* ---------- En-tête : texte à gauche, photo en arche à droite ---------- */

.accueil .conteneur {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 56px;
}
.hero-photo {
  position: relative;
  justify-self: end;
  width: min(100%, 390px);
  animation: monte .9s var(--sortie) .15s backwards;
}
.arche {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--rayon) var(--rayon);
}
.arcs-devant {
  position: absolute;
  inset: -4% -14%;
  width: 128%;
  height: 108%;
  overflow: visible;
  fill: none;
  stroke: var(--or);
  stroke-width: 1.4;
  pointer-events: none;
  animation: glisse 30s ease-in-out 4s infinite alternate;
}
.arcs-devant path { vector-effect: non-scaling-stroke; }
.arcs-devant .t { animation: trace var(--t, 2s) cubic-bezier(.5, .1, .2, 1) var(--d, 0s) backwards; }
.ouverture.hors-champ .arcs-devant { animation-play-state: paused; }
.fond-anime { opacity: .26; }

/* ---------- « Vos besoins » : mosaïque de cases photo ---------- */

.mosaique {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 215px;
  grid-auto-flow: dense;
  gap: 14px;
}
.mosaique li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaique li:nth-child(5) { grid-column: 3 / span 2; grid-row: 3; }

.case-photo {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rayon);
  background: var(--marine);
  color: #fff;
  text-decoration: none;
  transition: transform .16s var(--sortie);
}
.case-photo:active { transform: scale(.985); }
.case-photo .bichro { position: absolute; inset: 0; }
/* voile sombre en bas, pour que le titre reste lisible */
.case-photo::after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(to top, rgba(15, 34, 56, .92), rgba(15, 34, 56, 0));
  pointer-events: none;
}
.case-texte {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
}
.case-texte h3 { font-size: 19px; color: #fff; }
.case-texte p { margin-top: 4px; font-size: 14px; line-height: 1.4; color: #dbe3ec; }
.grande .case-texte { left: 24px; right: 24px; bottom: 22px; }
.grande .case-texte h3 { font-size: clamp(22px, 2.6vw, 30px); }
.grande .case-texte p { font-size: 16px; }

/* Au survol : léger zoom, retour à la couleur, le trait doré se redessine */
@media (hover: hover) and (pointer: fine) {
  .case-photo:hover .bichro img, .choix:hover .bichro img { filter: none; }
  .case-photo:hover .bichro img { transform: scale(1.06); }
  .case-photo:hover .bichro::after, .choix:hover .bichro::after { opacity: 0; }
}

.dessin.sur-photo {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  width: 90px;
  height: 60px;
  margin: 0;
  stroke: var(--or);
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(15, 34, 56, .55));
}
.dessin.sur-photo .or { stroke-width: 2; }
.dessin.sur-photo .plein { fill: var(--or); }
.grande .dessin.sur-photo { top: 20px; left: 20px; width: 150px; height: 100px; stroke-width: 1.5; }
.grande .dessin.sur-photo .or { stroke-width: 1.5; }

/* ---------- Page provisoire de choix des photos ---------- */

.choix-rangee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.choix { margin: 0; }
.choix .bichro { aspect-ratio: 4 / 3; border-radius: 14px; }
.choix figcaption { margin-top: 8px; font-size: 14px; color: var(--texte-doux); }
.choix figcaption b { font-size: 17px; color: var(--marine); }
.choix-rangee + h2 { margin-top: 48px; }

@media (max-width: 900px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .mosaique li:nth-child(1) { grid-row: span 1; }
  .mosaique li:nth-child(5) { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 860px) {
  .accueil .conteneur { grid-template-columns: 1fr; gap: 34px; }
  .hero-photo { justify-self: center; width: min(74%, 300px); }
  .arche { aspect-ratio: 5 / 6; }
}

@media (max-width: 640px) {
  .mosaique { grid-auto-rows: 168px; gap: 10px; margin-top: 18px; }
  .mosaique li:nth-child(1), .mosaique li:nth-child(5) { grid-row: span 1; }
  .case-photo { border-radius: 14px; }
  .case-texte { left: 12px; right: 12px; bottom: 11px; }
  .case-texte h3 { font-size: 15.5px; }
  /* sur téléphone, la phrase n'apparaît que sur les deux grandes cases */
  .mosaique li:not(.grande) .case-texte p {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .grande .case-texte { left: 16px; right: 16px; bottom: 14px; }
  .grande .case-texte h3 { font-size: 21px; }
  .grande .case-texte p { font-size: 14px; }
  .dessin.sur-photo { top: 10px; left: 10px; width: 66px; height: 44px; }
  .grande .dessin.sur-photo { top: 12px; left: 12px; width: 96px; height: 64px; stroke-width: 1.8; }
  .choix-rangee { grid-template-columns: 1fr; }
}

/* ==========================================================
   DIRECTION « ARDOISE ET TUFFEAU »
   Le site prend ses couleurs et ses formes à Angers : l'ardoise
   des toits, le tuffeau des murs, et les tours du château, rayées
   de bandes sombres et claires. Angles presque vifs, comme la pierre
   taillée ; le laiton reste pour les seuls boutons.
   ========================================================== */

:root {
  --marine: #1c2733;        /* ardoise */
  --marine-clair: #34475a;  /* schiste */
  --or: #cba75c;            /* laiton */
  --or-fonce: #86672a;
  --fond: #eeece5;          /* tuffeau */
  --carte: #f8f7f3;
  --sable: #ddd6c6;         /* sable de Loire */
  --texte: #1c2733;
  --texte-doux: #55606b;
  --trait: #d6d1c4;
  --rayon: 3px;
}

/* ---------- Le haut de l'accueil : trois assises ---------- */

.tours { background: var(--fond); }

.assises {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-size: clamp(34px, 6.9vw, 122px);
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: nowrap;
}
.assise {
  display: block;
  padding: .24em 0 .3em;
  text-decoration: none;
  transition: background-color .25s ease;
}
.assise:nth-child(odd)  { background: var(--marine); color: var(--fond); }
.assise:nth-child(even) { background: var(--fond); color: var(--marine); }
.assise > span {
  display: block;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  transition: transform .35s var(--sortie);
}
.assise:focus-visible { outline-offset: -6px; border-radius: 0; }
@media (hover: hover) and (pointer: fine) {
  .assise:nth-child(odd):hover  { background: var(--marine-clair); }
  .assise:nth-child(even):hover { background: var(--sable); }
  .assise:hover > span { transform: translateX(.14em); }
}
.assise:active > span { transform: translateX(.14em); }

/* Le seul mouvement d'arrivée de la page : les trois assises se posent l'une après l'autre */
@keyframes pose { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.js .assise { animation: pose .8s var(--sortie) backwards; }
.js .assise:nth-child(2) { animation-delay: .12s; }
.js .assise:nth-child(3) { animation-delay: .24s; }
.js .socle { animation: apparait .6s ease .5s backwards; }

.socle {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 48px;
  padding-top: 40px;
  padding-bottom: 52px;
}
.socle-photo { margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--marine); }
.socle-photo img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 62%; }
.socle-texte p { margin-bottom: 24px; font-size: 19px; line-height: 1.5; max-width: 30em; }

@media (max-width: 860px) {
  .socle { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; padding-bottom: 36px; }
  .socle-photo img { aspect-ratio: 16 / 9; }
  .socle-texte p { font-size: 17px; margin-bottom: 20px; }
}
@media (max-width: 480px) {
  .assises { font-size: 9.4vw; }
}

/* ---------- La pierre taillée : angles, boutons, titres ---------- */

.bouton { border-radius: var(--rayon); }
.rdv, .appel { border-radius: var(--rayon); }
.case, .situations li, .etapes li, .question, .rdv-attente, .a-completer { border-radius: var(--rayon); }
.case .pastille, .bouton-menu, .menu a { border-radius: var(--rayon); }
.case-photo, .choix .bichro { border-radius: var(--rayon); }
.rdv-choix button, .rdv-calendrier { border-radius: var(--rayon); }
:focus-visible { border-radius: var(--rayon); }

/* Les titres parlent seuls : plus de petit trait doré dessous */
.section h2 { font-weight: 300; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.02em; }
.section h2::after, .js h2.rev::after { display: none; }
.rdv h2, .appel h2, .apropos h2 { font-size: clamp(26px, 3.4vw, 36px); }
.texte h2 { font-size: clamp(21px, 2.6vw, 26px); font-weight: 400; }

/* Les sur-titres en phrase, sans capitales espacées */
.surtitre { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }

/* Le défilement ne fait plus rien apparaître : le contenu est là */
.js .rev { opacity: 1; transform: none; transition: none; }

/* Le pied de page reprend les assises : une bande sombre, une claire, puis le mur */
.pied {
  margin-top: 56px;
  padding-top: 64px;
  background: linear-gradient(var(--marine) 0 14px, var(--fond) 14px 24px, var(--marine) 24px);
}

/* Le portrait garde ses couleurs, sans voile */
.photo.portrait::after { display: none; }
.photo.portrait img { filter: none; }

/* ===== AGENDA CAL.COM ===== */

.section-agenda { padding-top: 36px; }
.agenda {
  width: 100%;
  min-height: 620px;
  overflow: hidden;
  border-radius: var(--rayon);
}
.agenda iframe { display: block; width: 100%; }
.agenda-secours { margin-top: 18px; text-align: center; color: var(--texte-doux); }
.agenda-secours a { color: var(--marine); font-weight: 600; }

@media (max-width: 640px) {
  .section-agenda { padding-top: 20px; }
  .section-agenda .conteneur { padding: 0 8px; }
  .agenda { min-height: 560px; border-radius: 14px; }
}

/* ===== MISE EN LIGNE ===== */
/* Sans photo de travail, les étapes prennent toute la largeur */
.duo:not(:has(.photo)) { grid-template-columns: 1fr; }

/* ===== RAPPEL GRATUIT ===== */
/* Petit rappel à côté du bouton d'en-tête, sur grand écran seulement */
.rappel-gratuit { display: none; font-size: 12.5px; color: var(--texte-doux); white-space: nowrap; }
@media (min-width: 1100px) { .rappel-gratuit { display: inline; } }