@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --fond:#F3F0E8;
  --encre:#16181D;
  --bordeaux:#6E1F2F;
  --bordeaux-fonce:#4A1522;
  --gris:#5E5B53;
  --texte:#4A4841;
  --trait:#D9D4C7;
  --clair:#C9C5B8;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --marge:clamp(24px,6.5vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--encre)}
a:hover{color:var(--bordeaux)}
a:focus-visible,button:focus-visible{outline:2px solid var(--bordeaux);outline-offset:3px}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0}
p{margin:0}
.conteneur{padding-inline:var(--marge);max-width:1440px;margin-inline:auto}
.surtitre{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.surtitre.accent{color:var(--bordeaux);font-weight:600}
.bouton{display:inline-block;background:var(--bordeaux);color:#fff;text-decoration:none;padding:17px 30px;font-size:15px;letter-spacing:.06em}
.bouton:hover{background:var(--bordeaux-fonce);color:#fff}

/* Écran d'arrivée : le nom seul, au centre */
#intro{display:none}
.intro #intro{display:flex;position:fixed;inset:0;z-index:100;background:var(--fond);align-items:center;justify-content:center;transition:opacity .9s ease,visibility 0s linear .9s}
.intro body{overflow:hidden}
.intro.intro-fin body{overflow:auto}
.intro.intro-fin #intro{opacity:0;visibility:hidden}
.intro-bloc{display:flex;flex-direction:column;align-items:center;gap:22px}
.intro-nom{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5.2vw,60px);letter-spacing:.2em;padding-left:.2em;line-height:1;color:var(--encre)}
.intro-nom .lettre{display:inline-block;white-space:pre;opacity:0;transform:translateY(.45em);transition:opacity .7s ease var(--d),transform 1s cubic-bezier(.2,.7,.2,1) var(--d)}
.intro-on .intro-nom .lettre{opacity:1;transform:none}
.intro-trait{display:block;height:1px;width:72px;background:var(--bordeaux);transform:scaleX(0);transition:transform 1s cubic-bezier(.7,0,.2,1) .9s}
.intro-on .intro-trait{transform:scaleX(1)}

/* En-tête */
.entete{border-bottom:1px solid var(--trait)}
.entete .conteneur{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:28px}
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none;line-height:1}
.logo-nom{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:.2em;margin-right:-.2em}
.logo-sous{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.38em;margin-right:-.38em;text-transform:uppercase;color:var(--bordeaux)}
.nav{display:flex;align-items:center;gap:40px;font-size:15px}
.nav a{text-decoration:none}
.nav .bouton{padding:13px 24px;font-size:14px}

/* Accueil : bandeau vidéo pleine largeur */
.bandeau{position:relative;height:clamp(440px,74vh,780px);overflow:hidden;background:#2A2722;color:#fff;display:flex;align-items:flex-end}
.bandeau-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.bandeau-voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(22,18,16,.72) 0%,rgba(22,18,16,.36) 48%,rgba(22,18,16,.1) 100%)}
.bandeau-contenu{position:relative;width:100%;display:flex;flex-direction:column;gap:24px;padding-block:0 clamp(40px,7vh,80px)}
.bandeau .surtitre{color:#fff;font-weight:600}
.bandeau-qualite{font-size:clamp(14px,1.15vw,16px);letter-spacing:.24em}
.bandeau h1{font-size:clamp(34px,4.2vw,60px);line-height:1.04;color:#fff;max-width:760px}
.bandeau .chapo{font-size:17px;max-width:540px;color:rgba(255,255,255,.88)}
.actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap;margin-top:6px}
.actions .lien{color:#fff;text-underline-offset:6px}
.actions .lien:hover{color:#fff;opacity:.8}

/* Présentation : portrait + texte */
.presentation-grille{display:grid;grid-template-columns:4fr 6fr;gap:clamp(32px,7vw,120px);align-items:center;padding-block:clamp(56px,8vw,120px)}
.portrait{width:100%;height:auto;max-width:400px;background:#E3DED1}
.presentation-texte{display:flex;flex-direction:column;gap:22px}
.presentation-texte h2{font-size:clamp(32px,3.3vw,48px);line-height:1.08}
.presentation-texte p:not(.surtitre){font-size:18px;line-height:1.75;color:#33322D;max-width:620px}

/* Sections */
.section{border-top:1px solid var(--trait)}
.deux-colonnes{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,8vw,140px);padding-block:clamp(56px,8vw,120px)}
.deux-colonnes .titre{display:flex;flex-direction:column;gap:20px}
.deux-colonnes h2{font-size:clamp(34px,3.6vw,52px);line-height:1.06}
.corps{display:flex;flex-direction:column;gap:40px}
.corps p{font-size:18px;line-height:1.75;color:#33322D}

/* Domaines : bandeau sable, fin, accents bordeaux */
.domaines{background:#EAE4D7;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.domaines .conteneur{padding-block:clamp(40px,5vw,64px);display:flex;flex-direction:column;gap:clamp(24px,3vw,36px)}
.domaines-tete,.grille-domaines{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px)}
.domaines-tete{align-items:end;row-gap:14px}
.domaines-tete>div{display:flex;flex-direction:column;gap:12px}
.domaines .surtitre{color:var(--bordeaux);font-weight:600}
.domaines h2{font-size:clamp(32px,3.4vw,48px);line-height:1}
.domaines-tete>p{font-size:16px;color:var(--texte);text-align:left !important}
.domaine{padding:22px 0 24px;border-top:1px solid #CFC7B6;display:flex;flex-direction:column;gap:8px}
.domaine h3{font-size:clamp(23px,2vw,28px)}
.domaine p{font-size:16px;color:var(--texte)}

/* Juridictions */
.juridictions .grand-texte{font-family:var(--serif);font-size:clamp(26px,2.4vw,34px);line-height:1.25}
.liste-juridictions{list-style:none;margin:0;padding:0;border-top:1px solid var(--encre)}
.liste-juridictions li{font-family:var(--serif);font-size:clamp(24px,2.1vw,30px);padding:24px 0;border-bottom:1px solid var(--trait)}

/* Contact */
.contact h2{font-size:clamp(40px,4.4vw,64px);line-height:1}
.contact .titre p:not(.surtitre){font-size:18px;color:var(--texte);max-width:520px}
.coordonnees{display:flex;flex-direction:column;gap:30px;padding-top:calc(13px*1.65 + 28px);font-style:normal}
.coordonnees div{display:flex;flex-direction:column;gap:6px}
.coordonnees .etiquette{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.coordonnees .valeur{font-size:20px;line-height:1.5;text-decoration:none}
.coordonnees a.valeur:hover{text-decoration:underline;text-underline-offset:4px}

/* Pied de page : fin, bordeaux profond */
.pied{background:var(--bordeaux-fonce);color:#E6D9DC;font-size:13px}
.pied .conteneur{display:flex;justify-content:space-between;align-items:center;gap:10px 24px;flex-wrap:wrap;padding-block:16px}
.pied a{color:#E6D9DC;text-underline-offset:3px}
.pied a:hover{color:#fff}
.pied nav{display:flex;gap:28px}

/* Page mentions légales */
.page-legale .conteneur{max-width:860px;padding-block:clamp(48px,7vw,96px);display:flex;flex-direction:column;gap:40px}
.page-legale h1{font-size:clamp(40px,5vw,64px);line-height:1}
.page-legale h2{font-size:30px;margin-bottom:12px}
.page-legale section{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--trait);padding-top:28px}
.page-legale p{color:#33322D}

/* Mobile */
@media (max-width:900px){
  .nav a:not(.bouton){display:none}
  .logo-nom{font-size:20px}
  .logo-sous{font-size:9px}
  .entete .conteneur{padding-block:20px}
  .deux-colonnes,.presentation-grille,.grille-domaines,.domaines-tete{grid-template-columns:1fr}
  .bandeau{height:78svh;min-height:460px}
  .coordonnees{padding-top:0}
  .portrait{max-width:380px}
}
@media (max-width:480px){
  .nav .bouton{padding:11px 16px;font-size:13px}
  .pied nav{gap:20px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ===== Textes justifiés ===== */
p:not(.surtitre):not(.grand-texte):not(.intro-nom):not(.chapo){text-align:justify;text-justify:inter-word;-webkit-hyphens:manual;hyphens:manual}

/* ===== Animations (désactivées si l'internaute a choisi de réduire les mouvements) ===== */
.ligne-titre{display:block;overflow:hidden;padding:.06em 0 .08em;margin:-.06em 0 -.08em}
.ligne-titre>span{display:block}

/* Traits qui se dessinent */
.js .trace-haut,.js .trace-bas{position:relative;border-color:transparent !important}
.js .trace-haut::before,.js .trace-bas::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--trait-couleur,var(--trait));transform:scaleX(0);transform-origin:left center;transition:transform 1.4s cubic-bezier(.7,0,.2,1) var(--delai,0s)}
.js .trace-haut::before{top:-1px}
.js .trace-bas::after{bottom:-1px}
.js .visible.trace-haut::before,.js .visible.trace-bas::after,.tout-visible .trace-haut::before,.tout-visible .trace-bas::after{transform:scaleX(1)}
.domaine{--trait-couleur:#CFC7B6}
.liste-juridictions{--trait-couleur:var(--encre)}
.liste-juridictions li{--trait-couleur:var(--trait)}

/* Arrivée sur le site : le titre, le texte, puis le portrait */
.js .logo-nom .lettre{display:inline-block;white-space:pre;opacity:0;transform:translateY(.45em);transition:opacity .6s ease var(--d),transform .9s cubic-bezier(.2,.7,.2,1) var(--d)}
.js .ligne-titre>span{transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d)}
.js .revele{opacity:0;transform:translateY(18px);transition:opacity .9s ease var(--d),transform 1s cubic-bezier(.2,.7,.2,1) var(--d)}
.js .revele-image{clip-path:inset(100% 0 0 0);transition:clip-path 1.6s cubic-bezier(.7,0,.2,1) .35s}
.js.charge .logo-nom .lettre,.js.charge .ligne-titre>span,.js.charge .revele{opacity:1;transform:none}
.js.charge .revele-image{clip-path:inset(0 0 0 0)}
.intro .ligne-titre>span,.intro .revele,.intro .revele-image{transition-delay:calc(var(--d,0s) + .1s)}

/* Le portrait apparaît en descendant */
.js .apparait{opacity:0;transform:translateY(28px);transition:opacity 1s ease var(--delai-app,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--delai-app,0s)}
.js .apparait.visible,.tout-visible .apparait{opacity:1;transform:none}