/* =========================================================
   PALETTE — construite à partir du logo.
   --logo est le vert exact relevé sur le fichier (#C2D2C8).
   --marque en est la version profonde, même teinte (143°),
   utilisée pour les boutons, les liens et le texte d'accent.
   ========================================================= */
:root{
  --logo:#C2D2C8;          /* vert du logo, inchangé */
  --marque:#34513F;        /* même teinte, assombrie — boutons et liens */
  --marque-fonce:#263C2F;  /* survol des boutons */
  --encre:#1B2620;         /* texte, et fond du bloc contact */
  --papier:#EFF1EC;        /* fond de page */
}

/* --- dérivés : ne pas toucher --- */
:root{
  --encre-2:#4A5B51;
  --papier-2:#E5E9E3;
  --trait:#C4CCC5;
  --cachet:#8A3324;
  --t0:#DBE3DC;
  --t1:var(--logo);
  --t2:#7B9183;
  --t3:#577161;
  --t4:var(--marque);
  --display:'Spectral',Georgia,serif;
  --corps:'Archivo',system-ui,sans-serif;
  --utile:'IBM Plex Mono',ui-monospace,monospace;
  --gouttiere:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--corps);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.enveloppe{max-width:1180px;margin:0 auto;padding:0 var(--gouttiere)}

.mono{font-family:var(--utile);font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:500}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--encre-2);max-width:56ch}

/* ---------- en-tête ---------- */
.tete{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--papier) 92%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--trait)}
.tete-in{display:flex;align-items:center;gap:24px;height:76px}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}
.marque img{height:44px;width:44px}
.marque .nom{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.marque .nom span{display:block;font-family:var(--utile);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-2);font-weight:400}
.nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav a{font-size:14.5px;text-decoration:none;color:var(--encre-2);padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--encre);border-bottom-color:var(--marque)}
.nav a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--marque)}
.bouton{display:inline-flex;align-items:center;justify-content:center;background:var(--marque);color:#fff;text-decoration:none;font-family:var(--utile);font-size:12px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;padding:13px 22px;border:1px solid var(--marque);transition:background .18s ease}
.bouton:hover{background:var(--marque-fonce);border-color:var(--marque-fonce)}
.bouton.creux{background:transparent;color:var(--marque)}
.bouton.creux:hover{background:color-mix(in srgb, var(--marque) 8%, transparent);border-color:var(--marque)}
.nav .bouton{padding:11px 18px;color:#fff}

/* bouton menu — visible sous 900px seulement */
.burger{display:none;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--encre);transition:transform .22s ease,opacity .22s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1000px){
  .burger{display:flex;margin-left:auto}
  .marque .nom{display:none}
  .nav{
    position:fixed;top:76px;left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:4px var(--gouttiere) 28px;
    background:var(--papier);border-bottom:1px solid var(--trait);
    max-height:calc(100dvh - 76px);overflow-y:auto;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
  }
  .nav.ouvert{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav a:not(.bouton){display:block;font-size:17.5px;color:var(--encre);padding:17px 2px;border-bottom:1px solid var(--trait)}
  .nav a:not(.bouton):hover{border-bottom-color:var(--trait)}
  .nav a[aria-current="page"]{color:var(--marque)}
  .nav .bouton{margin-top:20px;padding:17px 22px;font-size:12.5px}
  body.menu-ouvert{overflow:hidden}
}

/* ---------- accroche ---------- */
.accroche{padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px)}
.accroche-grille{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,72px);align-items:center}
.accroche h1{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.02;margin:16px 0 0;font-size:clamp(42px,7vw,76px)}
.accroche h1 em{display:block;font-style:normal;font-weight:300;color:var(--encre-2);font-size:.5em;letter-spacing:-.01em;margin-top:10px}
.accroche .lede{margin:26px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.gratuit{display:flex;align-items:baseline;gap:9px;margin-top:20px;font-size:14.5px;color:var(--encre-2)}
.gratuit b{color:var(--cachet);font-family:var(--utile);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--cachet);padding:3px 7px;white-space:nowrap}

/* ---------- triage « Qu'avez-vous reçu ? » ---------- */
.triage{border:1px solid var(--trait);background:var(--papier)}
.triage-titre{margin:0;padding:15px 20px;border-bottom:1px solid var(--trait);background:var(--papier-2);color:var(--encre-2)}
.cas{border-bottom:1px solid var(--trait)}
.cas>summary{
  list-style:none;cursor:pointer;position:relative;
  padding:16px 20px 16px 28px;
  font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;
  display:flex;align-items:center;gap:14px;transition:background .15s ease;
}
.cas>summary::-webkit-details-marker{display:none}
.cas>summary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px}
.cas:nth-of-type(1)>summary::before{background:var(--t1)}
.cas:nth-of-type(2)>summary::before{background:var(--t2)}
.cas:nth-of-type(3)>summary::before{background:var(--t3)}
.cas:nth-of-type(4)>summary::before{background:var(--t4)}
.cas>summary:hover{background:var(--papier-2)}
.cas .plus{margin-left:auto;flex:none;width:14px;height:14px;position:relative}
.cas .plus::before,.cas .plus::after{content:"";position:absolute;background:var(--marque);transition:transform .2s ease}
.cas .plus::before{left:0;right:0;top:6px;height:2px}
.cas .plus::after{top:0;bottom:0;left:6px;width:2px}
.cas[open] .plus::after{transform:scaleY(0)}
.cas-corps{padding:0 20px 20px 28px}
.cas-corps p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--encre-2)}
.cas-corps p:last-child{margin-bottom:0}
.cas-corps b{display:block;margin-bottom:1px;font-family:var(--utile);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--encre)}
.triage-fin{display:block;padding:16px 20px;font-size:14.5px;color:var(--marque);text-decoration:none;transition:background .15s ease}
.triage-fin:hover{background:var(--papier-2)}
@media(max-width:820px){.accroche-grille{grid-template-columns:1fr}.triage{margin-top:8px}}

/* ---------- sections ---------- */
.section{padding:clamp(52px,7vw,92px) 0;border-top:1px solid var(--trait)}
.section.premiere{border-top:0}
.chapeau{display:flex;align-items:baseline;gap:14px;margin-bottom:38px}
.chapeau .puce{width:26px;height:8px;flex:none;background:var(--t3)}
.chapeau .mono{color:var(--encre-2)}
.titre{font-family:var(--display);font-weight:500;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em;line-height:1.12;margin:0 0 14px}

.competences{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait)}
.domaine{background:var(--papier);padding:clamp(24px,3vw,36px);position:relative}
.domaine::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px}
.domaine:nth-child(1)::before{background:var(--t1)}
.domaine:nth-child(2)::before{background:var(--t2)}
.domaine:nth-child(3)::before{background:var(--t3)}
.domaine:nth-child(4)::before{background:var(--t4)}
.domaine h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.015em;margin:8px 0 12px}
.domaine p{margin:0;color:var(--encre-2);font-size:16px}
.domaine .etiquettes{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.domaine .etiquettes span{font-family:var(--utile);font-size:11px;letter-spacing:.04em;border:1px solid var(--trait);padding:4px 8px;color:var(--encre-2)}
@media(max-width:760px){.competences{grid-template-columns:1fr}}

.deroule{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.5vw,30px);counter-reset:etape}
.etape{border-top:2px solid var(--encre);padding-top:16px}
.etape::before{counter-increment:etape;content:counter(etape,decimal-leading-zero);font-family:var(--utile);font-size:12px;letter-spacing:.1em;color:var(--marque)}
.etape h3{font-family:var(--display);font-size:19px;font-weight:600;margin:8px 0 8px;letter-spacing:-.01em}
.etape p{margin:0;font-size:15.5px;color:var(--encre-2)}
@media(max-width:860px){.deroule{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.deroule{grid-template-columns:1fr}}

.honoraires-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(30px,5vw,64px);align-items:start}
.modes{display:flex;flex-direction:column;border:1px solid var(--trait)}
.mode{padding:22px 24px;border-bottom:1px solid var(--trait)}
.mode:last-child{border-bottom:0}
.mode h3{font-family:var(--display);font-size:20px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
.mode p{margin:0;font-size:15.5px;color:var(--encre-2)}
.encart{background:var(--papier-2);border-left:3px solid var(--marque);padding:22px 24px;margin-top:22px}
.encart p{margin:0;font-size:15.5px;color:var(--encre-2)}
.encart p+p{margin-top:12px}
@media(max-width:820px){.honoraires-grille{grid-template-columns:1fr}}

/* ---------- le cabinet ---------- */
.cabinet-grille{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,5vw,64px);align-items:start}
.portrait{border:1px solid var(--trait);width:100%;height:auto;max-width:420px;filter:grayscale(1) contrast(1.04);transition:filter .5s ease}
.portrait:hover{filter:grayscale(0) contrast(1)}
.plaque{width:100%;height:auto;max-width:420px;border:1px solid var(--trait)}
.cabinet-grille p{color:var(--encre-2);max-width:60ch}

/* deux colonnes alignées : la 1re prend la largeur du plus long libellé */
.distinctions{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--trait);display:grid;grid-template-columns:max-content 1fr}
.distinctions li{display:grid;grid-column:1/-1;grid-template-columns:subgrid;gap:24px;padding:13px 0;border-bottom:1px solid var(--trait);font-size:15.5px;align-items:baseline}
.distinctions li .an{font-family:var(--utile);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--marque);white-space:nowrap}
@media(max-width:760px){
  .cabinet-grille{grid-template-columns:1fr}
  .portrait{max-width:300px}
  .distinctions,.distinctions li{grid-template-columns:1fr}
  .distinctions li{gap:2px}
}

.contact{background:var(--encre);color:var(--papier);border-top:0}
.contact .titre{color:#fff}
.contact .chapeau .puce{background:var(--t2)}
.contact .chapeau .mono{color:var(--logo)}
.contact-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:start}
.contact p{color:#C3D0C7}
.coord{margin:0;display:grid;gap:2px}
.coord div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);align-items:baseline}
.coord dt{font-family:var(--utile);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#93A79A}
.coord dd{margin:0;font-size:16.5px}
.coord a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.coord a:hover{border-bottom-color:#fff}
.contact .bouton{background:#fff;color:var(--encre);border-color:#fff;margin-top:28px}
.contact .bouton:hover{background:var(--logo);border-color:var(--logo);color:var(--encre)}
@media(max-width:760px){.contact-grille{grid-template-columns:1fr}}

/* ---------- mentions légales ---------- */
.editeur{border-left:3px solid var(--marque);padding:4px 0 4px 24px;margin:0}
.editeur p{margin:0;font-size:16.5px;line-height:1.75}
.editeur p+p{margin-top:18px}
.editeur .raison{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.01em;display:block;margin-bottom:2px}
.editeur a{color:var(--marque);text-underline-offset:3px}
.texte-legal{max-width:68ch}
.texte-legal p{color:var(--encre-2)}
.texte-legal p:first-child{margin-top:0}

.pied{background:var(--encre);color:#93A79A;padding:26px 0 40px;font-size:13.5px}.pied-in{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;border-top:1px solid rgba(255,255,255,.14);padding-top:24px}
.pied a{text-decoration:none;color:#C3D0C7}
.pied a:hover{color:#fff}
.pied .droite{margin-left:auto}

.apparait{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.apparait.vu{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--marque);outline-offset:3px}
.contact :focus-visible,.pied :focus-visible{outline-color:#fff}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .apparait{opacity:1;transform:none;transition:none}
}