@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Libre+Franklin:wght@400;500;700&display=swap');

/* ============================================================
   BRÉAL & MARCHAND — Notaires associés, Annecy
   Formule ESSENTIEL — 690 €
   Système formel 1 : ÉDITORIAL STRICT
   Rayons 0 · filets 1px · aucune ombre · alignement gauche
   ============================================================ */

:root{
  --papier:#F6F4EF;
  --papier-2:#EDEAE2;
  --encre:#14141A;
  --carmin:#9B2242;
  --nuit:#232A46;
  --filet:#CFC9BC;
  --filet-clair:#DFDBD1;

  --titre:'Bodoni Moda',serif;
  --texte:'Libre Franklin',sans-serif;

  --conteneur:1280px;
  --marge:clamp(1.25rem,5vw,5.5rem);
  --gouttiere:clamp(1rem,2.2vw,2rem);
  --rythme:clamp(4.5rem,9vw,8.5rem);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:1.0625rem;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;border-radius:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border-radius:0}

/* ---------- Grille ---------- */
.enveloppe{max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--marge)}
.grille{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gouttiere)}

/* ---------- Typographie ---------- */
h1,h2,h3,h4{
  font-family:var(--titre);
  font-weight:400;
  margin:0;
  letter-spacing:-.025em;
  line-height:.92;
}
.geant{
  font-size:clamp(3.5rem,8.4vw,9rem);
  line-height:.86;
  letter-spacing:-.035em;
  font-weight:500;
}
.tres-grand{font-size:clamp(2.6rem,5.6vw,5rem);line-height:.9;letter-spacing:-.03em;font-weight:500}
.grand{font-size:clamp(1.9rem,3.4vw,3rem);line-height:.96;letter-spacing:-.02em;font-weight:500}
.moyen{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.12;letter-spacing:-.015em;font-weight:600}

.surtitre{
  font-family:var(--texte);
  font-size:.6875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--carmin);
  margin:0 0 1.4rem;
  display:flex;align-items:center;gap:.9rem;
}
.surtitre::after{content:"";flex:1;height:1px;background:var(--filet);max-width:9rem}
.surtitre--nuit{color:#C58EA0}
.surtitre--nuit::after{background:rgba(255,255,255,.22)}

.chapo{font-size:clamp(1.0625rem,1.35vw,1.28rem);line-height:1.55;max-width:56ch}
.petit{font-size:.8125rem;line-height:1.5}
.mono{font-family:var(--texte);font-variant-numeric:tabular-nums;letter-spacing:.02em}
em,.ital{font-family:var(--titre);font-style:italic;font-weight:400}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

/* ---------- Filets ---------- */
.filet{height:1px;background:var(--filet);border:0;margin:0}
.filet-pleine{height:1px;background:var(--filet);width:100%}

/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:1.05rem 1.9rem;
  border:1px solid var(--encre);
  background:transparent;
  font-size:.6875rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.19em;
  cursor:pointer;
  transition:background .38s cubic-bezier(.2,.7,.3,1),color .38s cubic-bezier(.2,.7,.3,1),letter-spacing .38s ease,border-color .38s ease;
}
.bouton:hover{background:var(--encre);color:var(--papier);letter-spacing:.24em}
.bouton .fl{transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.bouton:hover .fl{transform:translateX(6px)}

.bouton--carmin{border-color:var(--carmin);color:var(--carmin)}
.bouton--carmin:hover{background:var(--carmin);color:var(--papier);border-color:var(--carmin)}

.bouton--clair{border-color:rgba(255,255,255,.5);color:#fff}
.bouton--clair:hover{background:#fff;color:var(--nuit);border-color:#fff}

.lien-fleche{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.19em;
  border-bottom:1px solid var(--filet);padding-bottom:.35rem;
  transition:border-color .35s ease,color .35s ease,gap .35s ease;
}
.lien-fleche:hover{border-color:var(--carmin);color:var(--carmin);gap:1rem}

/* ============================================================
   EN-TÊTE — Architecture B : logo centré, menu de part et d'autre
   ============================================================ */
.entete{
  position:sticky;top:0;z-index:60;
  background:var(--papier);
  border-bottom:1px solid var(--filet);
  transition:background .4s ease,border-color .4s ease;
}
.entete__barre{
  max-width:var(--conteneur);margin-inline:auto;padding:0 var(--marge);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:5.25rem;gap:var(--gouttiere);
}
.nav{display:flex;gap:2.1rem;align-items:center}
.nav--droite{justify-content:flex-end}
.nav a{
  font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  padding-bottom:.3rem;border-bottom:1px solid transparent;
  transition:border-color .35s ease,color .35s ease;
}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--carmin);color:var(--carmin)}

.marque{text-align:center;line-height:1;padding:.4rem 0;display:block}
.marque__nom{
  display:block;font-family:var(--titre);font-weight:500;
  font-size:clamp(1.05rem,1.7vw,1.4rem);
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
}
.marque__filet{display:block;height:1px;background:var(--filet);margin:.5rem auto .45rem;width:100%}
.marque__mention{display:block;font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;color:#6E6A63}

.burger{display:none;background:none;border:1px solid var(--encre);padding:.7rem .95rem;cursor:pointer;
  font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  transition:background .35s ease,color .35s ease}
.burger:hover{background:var(--encre);color:var(--papier)}

.menu-mobile{
  position:fixed;inset:0;z-index:90;background:var(--papier);
  padding:var(--marge);display:none;flex-direction:column;
}
.menu-mobile.ouvert{display:flex;animation:voile .45s ease both}
.menu-mobile a{
  font-family:var(--titre);font-size:clamp(2rem,9vw,3.2rem);font-weight:500;letter-spacing:-.02em;
  padding:1rem 0;border-bottom:1px solid var(--filet);
  transition:color .3s ease,padding-left .3s ease;
}
.menu-mobile a:hover{color:var(--carmin);padding-left:.75rem}

/* Bandeau de service permanent — le téléphone doit rester atteignable */
.bandeau-tel{
  background:var(--encre);color:var(--papier);
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.bandeau-tel__i{
  max-width:var(--conteneur);margin-inline:auto;padding:.7rem var(--marge);
  display:flex;justify-content:space-between;gap:1.5rem;align-items:center;flex-wrap:wrap;
}
.bandeau-tel a{border-bottom:1px solid rgba(246,244,239,.35);padding-bottom:.15rem;
  transition:border-color .35s ease,color .35s ease}
.bandeau-tel a:hover{color:#E8A9B8;border-color:#E8A9B8}

/* ============================================================
   SECTION 1 — HERO TYPOGRAPHIQUE (inventaire n°3)
   Clair · typo seule · titre à gauche, tiers supérieur · mot en rotation
   ============================================================ */
.hero{padding-top:clamp(3.5rem,7vw,6.5rem);background:var(--papier);position:relative}
.hero__titre{grid-column:1/11}
.hero__mot{
  display:inline-block;position:relative;color:var(--carmin);
  font-style:italic;
}
.hero__mot span{display:inline-block;animation:motEntre .6s cubic-bezier(.2,.7,.3,1) both}
.hero__mot span.sort{animation:motSort .45s cubic-bezier(.6,0,.8,.2) both}

.hero__bas{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gouttiere);
  margin-top:clamp(2.5rem,5vw,4rem);align-items:end;
}
.hero__chapo{grid-column:1/6}
.hero__actions{grid-column:7/13;display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}

.hero__bandeau{
  margin-top:clamp(3rem,6vw,5rem);
  height:clamp(180px,26vw,340px);
  overflow:hidden;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
}
.hero__bandeau img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);
  transition:filter 1.2s ease,transform 1.2s ease}
.hero__bandeau:hover img{filter:grayscale(.15) contrast(1.02);transform:scale(1.03)}

/* ============================================================
   SECTION 2 — MANIFESTE, 3 colonnes inégales (inventaire n°5)
   ============================================================ */
.manifeste{padding-block:var(--rythme);border-top:1px solid var(--filet)}
.manifeste__phrase{grid-column:1/9;margin-bottom:clamp(2rem,4vw,3.2rem)}
.manifeste__c1{grid-column:1/5}
.manifeste__c2{grid-column:5/9;padding-left:var(--gouttiere);border-left:1px solid var(--filet)}
.manifeste__c3{grid-column:10/13}
.manifeste__c3 .petit{color:#5D5951}

/* ============================================================
   SECTION 3 — LISTE NUMÉROTÉE PLEINE LARGEUR (inventaire n°8)
   ============================================================ */
.domaines{padding-block:var(--rythme);border-top:1px solid var(--filet);background:var(--papier-2)}
.dom{
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr) auto;
  gap:var(--gouttiere);align-items:baseline;
  padding:clamp(1.6rem,3vw,2.6rem) 0;border-bottom:1px solid var(--filet);
  transition:background .45s ease,padding-left .45s cubic-bezier(.2,.7,.3,1);
}
.dom:first-of-type{border-top:1px solid var(--filet)}
.dom:hover{background:var(--papier);padding-left:1.1rem}
.dom__n{
  font-family:var(--titre);font-weight:500;
  font-size:clamp(2.6rem,6vw,5.4rem);line-height:.8;
  color:var(--filet);width:2.4ch;
  transition:color .45s ease;
}
.dom:hover .dom__n{color:var(--carmin)}
.dom__t{font-family:var(--titre);font-size:clamp(1.3rem,2.3vw,2rem);font-weight:500;letter-spacing:-.02em;line-height:1}
.dom__d{font-size:.9375rem;color:#4E4A44;line-height:1.5}
.dom__f{align-self:center}

/* ============================================================
   SECTION 4 — ACCORDÉON « LA BOUSSOLE » (inventaire n°17)
   Le moment signature du site
   ============================================================ */
.boussole{padding-block:var(--rythme);border-top:1px solid var(--filet)}
.boussole__intro{grid-column:1/7}
.boussole__aside{grid-column:8/13;align-self:end}
.boussole__liste{grid-column:1/13;margin-top:clamp(2.5rem,5vw,3.8rem);border-top:1px solid var(--encre)}

.etape{border-bottom:1px solid var(--filet)}
.etape__tete{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:3.2rem 1fr auto;gap:var(--gouttiere);align-items:center;
  padding:1.5rem 0;
  transition:color .35s ease,padding-left .35s cubic-bezier(.2,.7,.3,1);
}
.etape__tete:hover{color:var(--carmin);padding-left:.7rem}
.etape__rang{font-size:.6875rem;font-weight:600;letter-spacing:.18em;color:var(--carmin)}
.etape__q{font-family:var(--titre);font-size:clamp(1.15rem,2vw,1.65rem);font-weight:500;letter-spacing:-.015em;line-height:1.06}
.etape__signe{position:relative;width:15px;height:15px;flex:none}
.etape__signe::before,.etape__signe::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .42s cubic-bezier(.2,.7,.3,1),opacity .42s ease;
}
.etape__signe::before{left:0;top:7px;width:15px;height:1px}
.etape__signe::after{top:0;left:7px;height:15px;width:1px}
.etape[aria-expanded="true"] .etape__signe::after,
.etape__tete[aria-expanded="true"] .etape__signe::after{transform:scaleY(0);opacity:0}

.etape__corps{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.3,1)}
.etape.ouverte .etape__corps{grid-template-rows:1fr}
.etape__inner{overflow:hidden}
.etape__grille{
  display:grid;grid-template-columns:3.2rem repeat(3,1fr);gap:var(--gouttiere);
  padding:0 0 2.2rem;
}
.etape__grille>div:nth-child(2){grid-column:2/3}
.etape__bloc h4{
  font-family:var(--texte);font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.2em;color:var(--carmin);
  margin:0 0 .8rem;padding-bottom:.55rem;border-bottom:1px solid var(--filet);
}
.etape__bloc p,.etape__bloc li{font-size:.9375rem;line-height:1.55;color:#3E3A35}
.etape__bloc ul{margin:0;padding-left:1.05rem}
.etape__bloc li{margin-bottom:.35rem}
.delai{font-family:var(--titre);font-size:1.9rem;font-weight:600;color:var(--carmin);line-height:1;display:block;margin-bottom:.4rem}

/* ============================================================
   SECTION 5 — NÉGATIF (inventaire n°9)
   ============================================================ */
.negatif{background:var(--nuit);color:var(--papier);padding-block:var(--rythme);position:relative}
.negatif h2,.negatif h3{color:var(--papier)}
.negatif .filet-pleine{background:rgba(246,244,239,.2)}
.negatif__t{grid-column:1/7}
.negatif__d{grid-column:8/13}
.tarif{display:flex;align-items:baseline;gap:1rem;margin:2rem 0 1.5rem;padding-bottom:1.4rem;border-bottom:1px solid rgba(246,244,239,.2)}
.tarif__n{font-family:var(--titre);font-size:clamp(3rem,6vw,4.6rem);font-weight:500;line-height:.85;letter-spacing:-.03em}
.tarif__u{font-size:.6875rem;text-transform:uppercase;letter-spacing:.18em;color:#B9B4AA}
.negatif ul.liste-cochee{list-style:none;margin:0;padding:0}
.negatif ul.liste-cochee li{
  padding:.85rem 0 .85rem 1.9rem;border-bottom:1px solid rgba(246,244,239,.14);
  font-size:.9375rem;position:relative;color:#DCD8CF;
}
.negatif ul.liste-cochee li::before{content:"—";position:absolute;left:0;color:var(--carmin);color:#C58EA0}

/* ============================================================
   SECTION 6 — IMAGE EN DÉBORD (inventaire n°10)
   ============================================================ */
.debord{padding-block:var(--rythme);border-top:1px solid var(--filet);overflow:hidden}
.debord__grille{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gouttiere);align-items:center}
.debord__texte{grid-column:1/5}
.debord__img{
  grid-column:6/13;
  margin-right:calc(-1 * var(--marge));
  width:calc(100% + var(--marge));
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
}
.debord__img img{width:100%;height:clamp(320px,44vw,620px);object-fit:cover;
  filter:grayscale(1) contrast(1.05);transition:filter 1s ease}
.debord__img:hover img{filter:grayscale(0) contrast(1)}
.legende{font-family:var(--titre);font-style:italic;font-size:.8125rem;color:#6E6A63;margin-top:.7rem;display:block}

/* ============================================================
   SECTION 7 — CITATION GÉANTE (inventaire n°13)
   La rupture de rythme
   ============================================================ */
.citation{padding-block:clamp(6rem,13vw,12rem);border-top:1px solid var(--filet);text-align:left}
.citation blockquote{
  margin:0;grid-column:1/12;
  font-family:var(--titre);font-style:italic;font-weight:400;
  font-size:clamp(2rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-.03em;
}
.citation blockquote span{color:var(--carmin)}
.citation figcaption{grid-column:1/12;margin-top:2.5rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.2em;color:#6E6A63}

/* ============================================================
   SECTION 8 — BANDEAU DE CHIFFRES (inventaire n°4)
   ============================================================ */
.chiffres{border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);padding-block:clamp(2.5rem,5vw,3.6rem)}
.chiffres__g{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.chiffre{padding:0 var(--gouttiere);border-left:1px solid var(--filet)}
.chiffre:first-child{border-left:0;padding-left:0}
.chiffre__n{font-family:var(--titre);font-size:clamp(2.2rem,4.6vw,3.8rem);font-weight:500;line-height:.86;letter-spacing:-.03em;display:block;margin-bottom:.7rem}
.chiffre__l{font-size:.6875rem;text-transform:uppercase;letter-spacing:.16em;color:#5D5951;line-height:1.5}

/* ---------- Bloc de contact de fin de page ---------- */
.appel{padding-block:var(--rythme)}
.appel__t{grid-column:1/8}
.appel__c{grid-column:9/13}
.coord{list-style:none;margin:2rem 0 0;padding:0}
.coord li{padding:.95rem 0;border-bottom:1px solid var(--filet);font-size:.9375rem;display:flex;justify-content:space-between;gap:1rem}
.coord li span:first-child{font-size:.625rem;text-transform:uppercase;letter-spacing:.18em;color:#6E6A63;flex:none;padding-top:.25rem}
.coord a{border-bottom:1px solid var(--filet);transition:border-color .35s ease,color .35s ease}
.coord a:hover{color:var(--carmin);border-color:var(--carmin)}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */
.tete-page{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--encre)}
.tete-page__t{grid-column:1/9}
.tete-page__c{grid-column:9/13;align-self:end}
.fil{font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:#6E6A63;margin-bottom:1.6rem}
.fil a{border-bottom:1px solid var(--filet);transition:color .3s ease,border-color .3s ease}
.fil a:hover{color:var(--carmin);border-color:var(--carmin)}

.section{padding-block:var(--rythme);border-top:1px solid var(--filet)}
.section:first-of-type{border-top:0}

.col-6{grid-column:1/7}
.col-7{grid-column:1/8}
.col-5-d{grid-column:8/13}
.col-4-d{grid-column:9/13}
.col-12{grid-column:1/13}

/* Article / texte long — colonne de lecture */
.prose{max-width:64ch}
.prose h3{margin:2.6rem 0 1rem}
.prose ul{padding-left:1.1rem}
.prose li{margin-bottom:.5rem}

/* Tableau d'honoraires — filets, chiffres tabulaires */
.tableau{width:100%;border-collapse:collapse;font-size:.9375rem}
.tableau caption{text-align:left;font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--carmin);padding-bottom:1rem}
.tableau th,.tableau td{text-align:left;padding:1.1rem 1rem 1.1rem 0;border-bottom:1px solid var(--filet);vertical-align:top}
.tableau thead th{font-size:.625rem;text-transform:uppercase;letter-spacing:.18em;color:#6E6A63;font-weight:600;border-bottom:1px solid var(--encre)}
.tableau td:last-child,.tableau th:last-child{text-align:right;padding-right:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.tableau tbody tr{transition:background .35s ease}
.tableau tbody tr:hover{background:var(--papier-2)}
.tableau .nom{font-family:var(--titre);font-size:1.0625rem;font-weight:600;letter-spacing:-.01em}
.tableau .det{display:block;color:#5D5951;font-size:.8125rem;margin-top:.3rem;line-height:1.45}

/* Fiches d'équipe — rectangles nets, pas de carte à ombre */
.equipe{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gouttiere)}
.avocat{grid-column:span 4;border-top:1px solid var(--encre);padding-top:1.4rem}
.avocat__ph{overflow:hidden;margin-bottom:1.3rem;border-bottom:1px solid var(--filet)}
.avocat__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.06);
  transition:filter .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.avocat:hover .avocat__ph img{filter:grayscale(0) contrast(1);transform:scale(1.04)}
.avocat__r{font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--carmin);margin-bottom:.6rem}
.avocat__n{font-family:var(--titre);font-size:1.45rem;font-weight:500;letter-spacing:-.02em;margin-bottom:.7rem;line-height:1}
.avocat__p{font-size:.875rem;color:#4E4A44;line-height:1.55}
.avocat dl{margin:1.2rem 0 0;font-size:.8125rem;border-top:1px solid var(--filet);padding-top:.9rem}
.avocat dt{font-size:.5625rem;text-transform:uppercase;letter-spacing:.18em;color:#6E6A63;margin-top:.7rem}
.avocat dd{margin:.2rem 0 0}

/* Formulaire — rectangles, filets, zéro rayon */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gouttiere) var(--gouttiere)}
.champ{display:flex;flex-direction:column;gap:.55rem}
.champ--large{grid-column:1/-1}
.champ label{font-size:.625rem;text-transform:uppercase;letter-spacing:.18em;color:#5D5951;font-weight:600}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:.9375rem;color:var(--encre);
  background:transparent;border:0;border-bottom:1px solid var(--filet);
  padding:.85rem 0;border-radius:0;
  transition:border-color .35s ease,background .35s ease,padding-left .35s ease;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--carmin);background:var(--papier-2);padding-left:.6rem;
}
.champ textarea{resize:vertical;min-height:8rem}
.form__pied{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  border-top:1px solid var(--filet);padding-top:1.8rem;margin-top:.6rem}

.choix{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--filet)}
.choix label{
  flex:1;min-width:8rem;padding:.95rem 1.1rem;cursor:pointer;text-align:center;
  border-left:1px solid var(--filet);
  font-size:.625rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  transition:background .35s ease,color .35s ease;
}
.choix label:first-of-type{border-left:0}
.choix input{position:absolute;opacity:0;pointer-events:none}
.choix input:checked + span,.choix label:has(input:checked){background:var(--encre);color:var(--papier)}
.choix label:hover{background:var(--papier-2)}

.confirmation{
  border:1px solid var(--carmin);padding:2.2rem;margin-top:2rem;
  display:none;animation:apparait .6s cubic-bezier(.2,.7,.3,1) both;
}
.confirmation.vue{display:block}
.confirmation h3{color:var(--carmin);margin-bottom:.9rem}

/* Encadré déontologie / mention */
.encadre{border-left:1px solid var(--carmin);padding:.2rem 0 .2rem 1.4rem;font-size:.875rem;color:#4E4A44;line-height:1.6}
.encadre strong{color:var(--encre)}

/* Image de section, traitement « cadrage très serré » */
.detail{overflow:hidden;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.detail img{width:100%;height:clamp(220px,30vw,420px);object-fit:cover;object-position:center 60%;
  filter:grayscale(1) contrast(1.08);transition:filter 1s ease,transform 1.4s cubic-bezier(.2,.7,.3,1)}
.detail:hover img{filter:grayscale(.1);transform:scale(1.05)}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.pied{background:var(--encre);color:#B9B4AA;padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:2rem;font-size:.875rem}
.pied a{transition:color .35s ease}
.pied a:hover{color:var(--papier)}
.pied__g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gouttiere);padding-bottom:3rem}
.pied__marque{grid-column:1/4}
.pied__col{grid-column:span 2}
.pied__col:nth-of-type(2){grid-column:6/8}
.pied__col:nth-of-type(3){grid-column:8/10}
.pied__col:nth-of-type(4){grid-column:10/13}
.pied h4{font-family:var(--texte);font-size:.5625rem;text-transform:uppercase;letter-spacing:.2em;color:#78736B;margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:1px solid rgba(246,244,239,.14)}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:.65rem;font-size:.8125rem}
.pied__nom{font-family:var(--titre);font-size:1.3rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--papier);line-height:1.1}
.pied__base{font-family:var(--titre);font-style:italic;font-size:.9375rem;margin-top:.9rem;color:#8E8880}
.pied__bas{border-top:1px solid rgba(246,244,239,.14);padding-top:1.6rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.6875rem;letter-spacing:.06em;color:#78736B}
.pied__deonto{font-size:.6875rem;line-height:1.7;color:#78736B;border-top:1px solid rgba(246,244,239,.14);padding-top:1.6rem;margin-bottom:1.6rem}

/* ============================================================
   ANIMATIONS — 6 @keyframes
   ============================================================ */
@keyframes apparait{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes motEntre{from{opacity:0;transform:translateY(.5em) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes motSort{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-.5em) rotate(-2deg)}}
@keyframes filetTrace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes voile{from{opacity:0}to{opacity:1}}
@keyframes pulseFilet{0%,100%{opacity:.25}50%{opacity:1}}

/* Animation continue : le filet du hero respire en permanence */
.filet-vivant{height:1px;background:var(--carmin);animation:pulseFilet 4.5s ease-in-out infinite}

/* Apparition au scroll — IntersectionObserver */
.revele{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0ms)}
.revele.vu{opacity:1;transform:none}

.filet-anime{transform-origin:left;animation:filetTrace .9s cubic-bezier(.2,.7,.3,1) both}

/* Placeholder d'image tant que ChatGPT n'a pas livré les visuels */
.img-absente{
  display:flex;align-items:center;justify-content:center;
  width:100%;flex:1 1 100%;
  background:repeating-linear-gradient(135deg,var(--papier-2) 0 9px,var(--filet-clair) 9px 18px);
  border:1px solid var(--filet);
  font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:#6E6A63;
  text-align:center;padding:1rem;min-height:200px;height:100%;
}
.hero__bandeau .img-absente,.detail .img-absente{border:0;min-height:100%}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .manifeste__c1{grid-column:1/7}
  .manifeste__c2{grid-column:7/13;padding-left:var(--gouttiere)}
  .manifeste__c3{grid-column:1/13;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--filet)}
  .manifeste__phrase{grid-column:1/13}
  .avocat{grid-column:span 6}
  .etape__grille{grid-template-columns:1fr 1fr}
  .etape__grille>div:nth-child(2){grid-column:auto}
  .debord__texte{grid-column:1/13}
  .debord__img{grid-column:1/13;margin-top:2.5rem}
  .pied__marque{grid-column:1/13;margin-bottom:2.5rem}
  .pied__col,.pied__col:nth-of-type(2),.pied__col:nth-of-type(3),.pied__col:nth-of-type(4){grid-column:span 4}
}

@media (max-width:820px){
  .nav{display:none}
  .burger{display:block}
  .entete__barre{grid-template-columns:auto 1fr auto;min-height:4.5rem}
  .marque{text-align:center}
  .hero__titre,.hero__chapo,.hero__actions{grid-column:1/13}
  .hero__actions{justify-content:flex-start;margin-top:2rem}
  .boussole__intro,.boussole__aside,.negatif__t,.negatif__d,
  .tete-page__t,.tete-page__c,.appel__t,.appel__c,
  .col-6,.col-7,.col-5-d,.col-4-d{grid-column:1/13}
  .col-5-d,.col-4-d,.negatif__d,.tete-page__c,.appel__c{margin-top:2.5rem}
  .dom{grid-template-columns:auto 1fr;row-gap:.6rem}
  .dom__d{grid-column:1/3;padding-left:calc(2.4ch + var(--gouttiere))}
  .dom__f{grid-column:1/3;padding-left:calc(2.4ch + var(--gouttiere));align-self:start}
  .chiffres__g{grid-template-columns:repeat(2,1fr);row-gap:2.2rem}
  .chiffre:nth-child(3){border-left:0;padding-left:0}
  .form{grid-template-columns:1fr}
  .avocat{grid-column:span 12}
  .etape__grille{grid-template-columns:1fr;gap:1.6rem}
  .etape__tete{grid-template-columns:2.4rem 1fr auto}
}

@media (max-width:520px){
  .bandeau-tel__i{justify-content:center;text-align:center;font-size:.625rem}
  .chiffres__g{grid-template-columns:1fr}
  .chiffre{border-left:0;padding-left:0;padding-bottom:1.6rem;border-bottom:1px solid var(--filet)}
  .chiffre:last-child{border-bottom:0;padding-bottom:0}
  .coord li{flex-direction:column;gap:.3rem}
  .tableau td:last-child,.tableau th:last-child{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .revele{opacity:1;transform:none}
}

@media print{
  .entete,.bandeau-tel,.pied,.burger{display:none}
  body{background:#fff}
}

/* ==== L’ESSENTIEL — bandeau de repères (règle R4) ==== */
.reperes{background:var(--papier-2);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.reperes .enveloppe{padding-block:clamp(2rem,4vw,3.2rem)}
.reperes__t{font-family:var(--titre);font-style:italic;font-size:1.05rem;color:var(--carmin);
  margin:0 0 1.4rem;letter-spacing:.02em}
.reperes__l{list-style:none;margin:0;padding:0;display:grid;gap:var(--gouttiere);
  grid-template-columns:repeat(4,1fr)}
.reperes__l>li{border-left:1px solid var(--filet);padding-left:1.1rem}
.reperes__k{display:block;font-family:var(--texte);font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--carmin);margin-bottom:.55rem}
.reperes__v{display:block;font-family:var(--texte);font-size:1rem;line-height:1.55;color:var(--encre)}
.reperes__v b{font-weight:700}
.reperes__tel{display:inline-block;font-family:var(--titre);font-weight:600;
  font-size:clamp(1.3rem,2vw,1.7rem);color:var(--carmin);text-decoration:none;
  border-bottom:1px solid var(--carmin);padding:.3rem 0;min-height:44px;
  transition:color .3s ease,border-color .3s ease}
.reperes__tel:hover,.reperes__tel:focus-visible{color:var(--encre);border-color:var(--encre)}
@media(max-width:1080px){.reperes__l{grid-template-columns:repeat(2,1fr);row-gap:1.6rem}}
@media(max-width:640px){.reperes__l{grid-template-columns:1fr}}

/* ==== Mode d’emploi des outils interactifs (règle R3) ==== */
.ligne-mode{font-family:var(--texte);font-size:.95rem;font-weight:600;line-height:1.5;
  color:var(--carmin);margin:0 0 1.1rem;padding-left:1.6rem;position:relative;max-width:62ch}
.ligne-mode::before{content:"\2193";position:absolute;left:0;top:0;font-weight:700}


/* Numérisite — cellule seule de sa ligne */
/* Une colonne de prix ne doit pas se couper en deux : d'où le « nowrap »
   plus haut. Mais quand un tableau n'a qu'une colonne, cette cellule unique
   contient des phrases, pas des montants — elle doit revenir à la ligne.
   Le « :last-child » n'est pas décoratif : sans lui, la règle de la démo
   pèse plus lourd et celle-ci reste sans effet. */
tr > td:only-child:last-child,
tr > th:only-child:last-child{white-space:normal;text-align:left;overflow-wrap:break-word}

/* Et sur un téléphone, même dans un vrai tableau à deux colonnes, la dernière
   cellule contient parfois une phrase — « Émoluments tarifés — 2 874 € TTC sur
   250 000 € » — qui ne tient sur aucune ligne. Un montant coupé en deux est
   moins grave qu'une page qui glisse. */
@media (max-width: 640px){
  td:last-child:last-child,
  th:last-child:last-child{white-space:normal;overflow-wrap:break-word}
}


/* Numérisite — les colonnes se déplient sur téléphone */
/* Quelques pages écrivent la position de la colonne dans la balise
   elle-même (style="grid-column:10/13"). C'est plus fort que
   n'importe quelle feuille de style : sans le « !important »
   ci-dessous, la colonne resterait large d'un tiers d'écran sur un
   téléphone et la page glisserait de côté. */
@media (max-width:980px){
  .col-6,.col-7,.col-8,.col-5-d,.col-4-d,.col-12{grid-column:1/13 !important}
}

/* Numérisite — la page ne glisse plus sur téléphone */
@media (max-width: 820px){
  .pied__col{min-width:0}
  .pied__col *{min-width:0;overflow-wrap:break-word}
}