/* ══════════════════════════════════════════════════════════════════════
   BEAUTÉ DU SITE — 9 embellissements choisis par Charlotte le 09/09/2026
   ──────────────────────────────────────────────────────────────────────
   Ce fichier est une COUCHE DE FINITION. Il se charge en DERNIER,
   après site.css et experience.css : c'est donc lui qui a le dernier mot.

   POUR TOUT ANNULER D'UN COUP : supprimer, dans index.html, la ligne
   <link rel="stylesheet" href="assets/beaute.css">
   Rien d'autre n'est touché. Aucun autre fichier n'a été abîmé.
   ══════════════════════════════════════════════════════════════════════ */


/* ─── 1 · LE FILET DORÉ ────────────────────────────────────────────────
   On rend l'or de l'Étude un peu plus présent, et on pose un trait fin
   sous chaque grand titre. Comme la gravure d'une plaque de notaire. */

:root{
  --or:#A9854E;
  --or-clair:#C6A571;
  --or-profond:#8A6B3A;
}

/* Trait doré sous TOUS les grands titres de rubrique (pas seulement centrés) */
.sec-head h2::after{
  content:"";display:block;width:64px;height:2px;
  background:linear-gradient(90deg,var(--or),rgba(169,133,78,.15));
  margin:1.2rem 0 0;border-radius:2px;
}
.sec-head.center h2::after{
  width:86px;margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
}
.sec.dark .sec-head h2::after{
  background:linear-gradient(90deg,var(--or-clair),rgba(198,165,113,.15));
}
.sec.dark .sec-head.center h2::after{
  background:linear-gradient(90deg,transparent,var(--or-clair),transparent);
}

/* Un liseré doré discret en haut des cartes, qui s'allume au survol */
.outil-card,.news-card,.fam-pillar{position:relative}
.outil-card::before,.news-card::before,.fam-pillar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--or),var(--or-clair));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
  border-radius:8px 8px 0 0;z-index:3;
}
.outil-card:hover::before,.news-card:hover::before,.fam-pillar:hover::before{transform:scaleX(1)}

/* Le bouton principal : un fin cerne doré qui respire au survol */
.btn-primary{transition:box-shadow .4s,transform .4s}
.btn-primary:hover{box-shadow:0 0 0 3px rgba(169,133,78,.22);transform:translateY(-1px)}
.btn-light{border-color:rgba(198,165,113,.55)}


/* ─── 6 · PLUS D'AIR, DES TITRES PLUS GRANDS ───────────────────────────
   Une belle page de livre respire. On redonne de la marge autour des
   rubriques et on agrandit franchement les titres. */

.sec{padding:118px 0}
.sec-head{margin-bottom:3.6rem}
.sec-head h2{
  font-size:clamp(2.2rem,4.1vw,3.35rem);
  line-height:1.08;
  letter-spacing:-.015em;
  font-weight:500;
}
.sec-head p{font-size:1.06rem;line-height:1.8}
.presentation-nom{font-size:clamp(2.2rem,4.8vw,3.4rem);line-height:1.1}

@media(max-width:900px){
  .sec{padding:82px 0}
  .sec-head{margin-bottom:2.6rem}
}


/* ─── 9 · LA TEXTURE DU PAPIER ─────────────────────────────────────────
   Un grain très léger sur tout le fond, comme du papier vergé.
   On ne le voit pas consciemment : on sent juste que ce n'est pas plat. */

body::before{
  display:block;
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.042'/%3E%3C/svg%3E");
}
/* Le grain ne doit jamais passer par-dessus le menu ni les bandeaux-titres */
header.nav{z-index:200}
.page-band{z-index:5}


/* ─── 4 · LA PLUME EN FILIGRANE ────────────────────────────────────────
   Le logo-plume, agrandi énormément et rendu presque invisible,
   posé en fond de certaines rubriques. Comme un filigrane sur du papier. */

/* La plume est posée comme IMAGE DE FOND, et non comme un élément par-dessus.
   C'est important : un élément par-dessus aurait obligé à « couper ce qui
   dépasse » de la rubrique — ce qui aurait cassé la petite colonne de droite
   qui suit le défilement dans Immobilier. En image de fond, la découpe est
   automatique et rien d'autre n'est perturbé.

   Les trois couches, de la plus haute à la plus basse :
     1. un voile aux couleurs exactes du fond, opaque à 95,5 %  → c'est lui
        qui rend la plume presque invisible ;
     2. la plume ;
     3. le dégradé de fond d'origine de la rubrique.
   Le voile reprend exactement les deux couleurs du dégradé, donc la teinte
   de la rubrique reste identique à ce qu'elle était. */
.sec.alt{
  background-image:
    linear-gradient(180deg,rgba(248,242,231,.955) 0%,rgba(241,231,212,.955) 100%),
    url("logo-plume-transparent.webp"),
    linear-gradient(180deg,#F8F2E7 0%,#F1E7D4 100%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:auto,460px auto,auto;
  background-position:center,right -110px top -70px,center;
}
/* Une rubrique sur deux : la plume passe à gauche, pour ne pas lasser l'œil */
.sec.alt:nth-of-type(even){
  background-position:center,left -110px top -70px,center;
}

@media(max-width:900px){
  .sec.alt{background-size:auto,300px auto,auto}
}

/* La plume déjà présente dans la rubrique Histoire : on l'assume un peu plus */
.hist-watermark{opacity:.07;width:520px}


/* ─── 7 · LES PHOTOS EN NOIR & BLANC ───────────────────────────────────
   Les photos passent en noir et blanc, et reprennent leurs couleurs
   quand la souris passe dessus. Élégant, et ça unifie des photos qui
   ne viennent pas du même endroit.
   Sur téléphone il n'y a pas de survol : on garde tout en couleur. */

@media (hover:hover){
  .domain-photo img,.ex-photo img,.aside-photo img,.news-top img{
    filter:grayscale(1) contrast(1.06) brightness(1.02);
    transition:filter .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);
  }
  .domain-photo:hover img,.news-card:hover .news-top img{
    filter:grayscale(0) saturate(1.08) contrast(1.04);
  }
  .ex-photo:hover img,.aside-photo:hover img{
    filter:grayscale(0) saturate(1.1) contrast(1.05);
  }
  /* Dans l'Histoire, le noir et blanc vire légèrement sépia : c'est ancien. */
  .hist-img img,.hist-vignette img{
    filter:grayscale(1) sepia(.22) contrast(1.05);
    transition:filter .75s cubic-bezier(.2,.7,.2,1);
  }
  .hist-img:hover img,.hist-vignette figure:hover img{
    filter:grayscale(0) sepia(.14) saturate(1.05);
  }
}


/* ─── 8 · LA FRISE DU TEMPS QUI SE DÉROULE ─────────────────────────────
   Chaque notaire de la lignée apparaît l'un après l'autre quand on
   descend. On traverse les siècles au lieu de les lire d'un bloc. */

.her-item{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
}
.her-item.frise-in{opacity:1;transform:none}

/* Le point doré de la frise grossit en arrivant */
.her-item::before{transition:transform .5s cubic-bezier(.3,1.6,.5,1) .12s}
.her-item:not(.frise-in)::before{transform:translateX(-50%) scale(.2)}
.her-item.frise-in::before{transform:translateX(-50%) scale(1)}

/* Le trait vertical de la frise se dessine du haut vers le bas */
.heritage::before{transform-origin:top;transform:scaleY(0);transition:transform 1.6s cubic-bezier(.3,.8,.3,1)}
.heritage.frise-ligne::before{transform:scaleY(1)}

/* Si la personne a réglé son appareil « sans animation », on le respecte. */
@media (prefers-reduced-motion:reduce){
  .her-item{opacity:1;transform:none;transition:none}
  .her-item::before,.her-item:not(.frise-in)::before{transform:translateX(-50%) scale(1);transition:none}
  .heritage::before{transform:scaleY(1);transition:none}
}


/* ─── 2 · LE BANDEAU DES ARCHIVES DE 1595 ──────────────────────────────
   Une bande pleine largeur, un vieux registre en fond, une date.
   C'est le trésor de l'Étude : personne ne peut le copier. */

.archives-band{
  position:relative;margin:4.5rem calc(50% - 50vw) 4rem;width:100vw;
  min-height:clamp(340px,44vw,480px);
  display:grid;place-items:center;text-align:center;
  overflow:hidden;isolation:isolate;
}
.archives-band img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.45) contrast(1.1) brightness(.72);
  transform:scale(1.04);z-index:-2;
}
.archives-band::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Le voile sombre doit être assez dense pour que le texte reste
     parfaitement lisible par-dessus l'écriture du vieux registre. */
  background:radial-gradient(ellipse at center,rgba(11,20,32,.55),rgba(11,20,32,.88) 78%);
}
.archives-inner{padding:3.5rem 28px;max-width:760px}
.archives-date{
  font-family:var(--serif);font-size:clamp(4.2rem,12vw,8.5rem);
  font-weight:400;line-height:.9;color:#fff;
  letter-spacing:.02em;margin:0;
  text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.archives-filet{
  width:120px;height:1px;margin:1.8rem auto;
  background:linear-gradient(90deg,transparent,var(--or-clair),transparent);
}
.archives-txt{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.6;
  color:rgba(255,255,255,.9);text-align:center;margin:0;
}
.archives-src{
  display:block;margin-top:1.6rem;
  font-family:var(--sans);font-style:normal;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or-clair);
}


/* ─── 5 · LES CHIFFRES QUI COMPTENT ────────────────────────────────────
   Trois chiffres, qui se mettent à défiler quand on arrive dessus. */

.chiffres{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;max-width:900px;margin:3.5rem auto 1rem;
  border-top:1px solid rgba(198,165,113,.28);
  border-bottom:1px solid rgba(198,165,113,.28);
  padding:2.6rem 0;
}
.chiffre{text-align:center;padding:0 1rem;position:relative}
.chiffre + .chiffre::before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(198,165,113,.35),transparent);
}
.chiffre-nb{
  display:block;font-family:var(--serif);font-weight:500;
  font-size:clamp(2.4rem,5.2vw,3.6rem);line-height:1;
  color:var(--or-clair);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.chiffre-lb{
  display:block;margin-top:.9rem;
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);line-height:1.6;
}
.sec:not(.dark) .chiffre-nb{color:var(--or-profond)}
.sec:not(.dark) .chiffre-lb{color:var(--ink-soft)}

@media(max-width:680px){
  .chiffres{grid-template-columns:1fr;gap:2.2rem;padding:2rem 0}
  .chiffre + .chiffre::before{
    left:22%;right:22%;top:-1.1rem;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(198,165,113,.35),transparent);
  }
}


/* ─── 10 · LA PHRASE MANUSCRITE ────────────────────────────────────────
   Une seule phrase, à la plume, au milieu de beaucoup de vide.
   C'est le silence autour qui la rend belle. */

.manuscrit{
  max-width:820px;margin:5rem auto;padding:0 24px;
  text-align:center;
}
.manuscrit p{
  font-family:'Italianno',cursive;
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:1.25;font-weight:400;text-align:center;
  color:var(--or-clair);
  margin:0;
}
.sec:not(.dark) .manuscrit p{color:var(--or-profond)}
.manuscrit-signe{
  display:block;margin-top:1.4rem;
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.sec:not(.dark) .manuscrit-signe{color:var(--ink-soft)}