/* ============================================================
   Complexe Beauté Ô Carré, Orcines
   Le hall commun, puis une porte vers chaque univers.
   Chaque univers garde la charte de son propre site :
     Ô Carré        : vert sapin, Fraunces + Nunito, formes en courbes
     La Parenthèse  : nude et noir, Cormorant Garamond + Jost, lignes droites
   Le hall emprunte aux deux : le serif du salon, le sans de l'institut,
   et l'or qu'ils ont en commun.
   ============================================================ */

:root {
  --creme: #FAF8F4;
  --encre: #14191B;
  --or: #B8864F;
  --or-clair: #DDBF94;
  --gris: #6F6A64;

  --oc-vert: #1E4A3F;
  --oc-vert-fonce: #12302A;
  --oc-or: #C08457;
  --oc-creme: #FAF9F5;
  --oc-argent: #9DA2A3;

  --lp-noir: #272023;
  --lp-nude: #F4E5D8;
  --lp-creme: #FAF6F0;
  --lp-or: #B08D5B;
  --lp-taupe: #8A7B6E;

  --fraunces: "Fraunces", Georgia, serif;
  --nunito: "Nunito", "Helvetica Neue", Helvetica, sans-serif;
  --cormorant: "Cormorant Garamond", "Times New Roman", serif;
  --jost: "Jost", "Helvetica Neue", Helvetica, sans-serif;

  --doux: cubic-bezier(.22, .68, 0, 1);
  --lent: cubic-bezier(.77, 0, .18, 1);
  --d: 0s;                       /* délai avant l'entrée en scène du hall */
}
html.js { --d: 1.6s; }
html.js.rapide { --d: .25s; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--jost);
  font-weight: 300;
  color: var(--encre);
  background: var(--encre);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Grain de papier posé sur toute la page */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='220' height='220' filter='url(%23g)'/></svg>");
}

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.label {
  display: block;
  font-family: var(--jost);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.label--or { color: var(--or); }

.fil { display: block; width: 58px; height: 1px; background: var(--or); margin: 30px 0; }
.fil--centre { margin-left: auto; margin-right: auto; }

/* Apparition au défilement */
.js .reveler { opacity: 0; transform: translateY(34px); transition: opacity 1.1s var(--doux), transform 1.1s var(--doux); }
.js .reveler.vu { opacity: 1; transform: none; }

/* ============================================================
   RIDEAU D'OUVERTURE
   Le sceau se dessine, puis les deux pans s'écartent le long
   de la même diagonale que celle du hall.
   ============================================================ */
.rideau { display: none; }
.js .rideau {
  display: block;
  position: fixed; inset: 0;
  z-index: 100;
  pointer-events: none;
  animation: disparait 0s linear 3.1s forwards;
}
@keyframes disparait { to { visibility: hidden; } }

.rideau__pan {
  position: absolute; inset: 0;
  background: var(--encre);
  animation: 1.3s var(--lent) 1.6s forwards;
}
.rideau__pan--g { clip-path: polygon(0 0, 54.3% 0, 46.3% 100%, 0 100%); animation-name: pan-g; }
.rideau__pan--d { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); animation-name: pan-d; }
@keyframes pan-g { to { transform: translateX(-56%); } }
@keyframes pan-d { to { transform: translateX(56%); } }

.rideau__coeur {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--or-clair);
  animation: fond-out .45s ease 1.3s forwards;
}
@keyframes fond-out { to { opacity: 0; transform: scale(1.04); } }

.rideau__sceau { position: relative; width: 148px; height: 148px; }
.sceau { width: 148px; height: 148px; transform: rotate(-90deg); }
.sceau circle { fill: none; stroke: var(--or); }
.sceau__cercle  { stroke-width: .7; stroke-dasharray: 340; stroke-dashoffset: 340; animation: trace 1.15s var(--lent) .1s forwards; }
.sceau__cercle2 { stroke-width: .4; opacity: .55; stroke-dasharray: 296; stroke-dashoffset: 296; animation: trace 1.15s var(--lent) .28s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.rideau__o {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 6px;
  font-family: var(--fraunces);
  font-style: italic;
  font-weight: 200;
  font-size: 64px;
  line-height: 1;
  color: var(--creme);
  opacity: 0;
  animation: monte .8s var(--doux) .45s forwards;
}
.rideau__mot {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  animation: ecarte 1s var(--doux) .6s forwards;
}
@keyframes ecarte { to { opacity: 1; letter-spacing: .52em; } }
@keyframes monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Déjà vu pendant la session : ouverture courte, sans le sceau */
.js.rapide .rideau { animation-delay: 1.5s; }
.js.rapide .rideau__pan { animation-delay: .15s; animation-duration: 1.1s; }
.js.rapide .rideau__coeur { display: none; }

/* ============================================================
   LE HALL
   ============================================================ */
.hall {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--encre);
  color: #fff;
}

.porte {
  position: absolute; inset: 0;
  display: block;
  overflow: hidden;
  transition: clip-path 1.1s var(--doux);
}
.porte--salon    { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
.porte--institut { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); }

.hall.vers-salon .porte--salon       { clip-path: polygon(0 0, 64% 0, 56% 100%, 0 100%); }
.hall.vers-salon .porte--institut    { clip-path: polygon(64% 0, 100% 0, 100% 100%, 56% 100%); }
.hall.vers-institut .porte--salon    { clip-path: polygon(0 0, 44% 0, 36% 100%, 0 100%); }
.hall.vers-institut .porte--institut { clip-path: polygon(44% 0, 100% 0, 100% 100%, 36% 100%); }

.porte__video {
  position: absolute; top: 0; bottom: 0;
  width: 72%; height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.09);
  filter: saturate(.8) brightness(.82);
  transition: transform 2.2s var(--doux), filter 1.1s ease;
}
.porte--salon .porte__video    { left: 0; }
.porte--institut .porte__video { right: 0; }

.porte__voile { position: absolute; inset: 0; transition: opacity 1.1s ease; }
.porte--salon .porte__voile {
  background:
    linear-gradient(180deg, rgba(18,48,42,.5) 0%, rgba(18,48,42,.18) 34%, rgba(18,48,42,.62) 66%, rgba(10,28,24,.96) 100%);
}
.porte--institut .porte__voile {
  background:
    linear-gradient(180deg, rgba(39,32,35,.5) 0%, rgba(39,32,35,.16) 34%, rgba(39,32,35,.6) 66%, rgba(24,18,20,.96) 100%);
}

/* La porte visée s'éclaire, l'autre s'efface */
.hall.vers-salon .porte--salon .porte__video,
.hall.vers-institut .porte--institut .porte__video { transform: scale(1.02); filter: saturate(1.05) brightness(1); }
.hall.vers-salon .porte--salon .porte__voile,
.hall.vers-institut .porte--institut .porte__voile { opacity: .72; }
.hall.vers-salon .porte--institut .porte__video,
.hall.vers-institut .porte--salon .porte__video { filter: saturate(.2) brightness(.5); }

.porte__contenu {
  position: absolute;
  bottom: clamp(52px, 9vh, 96px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 24px;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.porte--salon .porte__contenu    { left: 0; width: 46%; }
.porte--institut .porte__contenu { right: 0; width: 46%; }
.js .porte__contenu { opacity: 0; animation: monte 1s var(--doux) calc(var(--d) + .95s) forwards; }

/* L'entrée en scène anime le bloc, le survol agit sur ses lignes : les deux ne se gênent pas */
.porte__contenu > span { transition: opacity .8s ease, transform 1.1s var(--doux); }
.hall.vers-salon .porte--institut .porte__contenu > span { opacity: .38; transform: translateX(22px); }
.hall.vers-institut .porte--salon .porte__contenu > span { opacity: .38; transform: translateX(-22px); }

.porte__sur {
  font-family: var(--jost);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .46em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.porte__nom {
  margin-top: 14px;
  line-height: 1.05;
  color: #fff;
}
.porte--salon .porte__nom    { font-family: var(--fraunces); font-weight: 300; font-size: clamp(34px, 4.5vw, 66px); letter-spacing: -.01em; }
.porte--institut .porte__nom { font-family: var(--cormorant); font-weight: 400; font-size: clamp(36px, 4.8vw, 70px); }

.porte__dit { margin-top: 14px; font-size: 14.5px; color: rgba(255,255,255,.78); }
.porte--salon .porte__dit    { font-family: var(--nunito); font-weight: 300; }
.porte--institut .porte__dit { font-family: var(--jost); font-weight: 300; letter-spacing: .04em; }

.porte__entrer {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--jost);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.porte__entrer i { display: block; width: 34px; height: 1px; background: var(--or-clair); transition: width .7s var(--doux); }
.hall.vers-salon .porte--salon .porte__entrer i,
.hall.vers-institut .porte--institut .porte__entrer i { width: 74px; }

/* Le trait d'or qui suit la diagonale */
.trait {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(221,191,148,0) 0%, var(--or-clair) 18%, var(--or) 50%, var(--or-clair) 82%, rgba(221,191,148,0) 100%);
  clip-path: polygon(calc(54% - 1px) 0, calc(54% + 1px) 0, calc(46% + 1px) 100%, calc(46% - 1px) 100%);
  transition: transform 1.1s var(--doux);
}
.hall.vers-salon .trait    { transform: translateX(10%); }
.hall.vers-institut .trait { transform: translateX(-10%); }

/* Le médaillon, posé sur la ligne de partage */
.medaillon {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 12vh;
  pointer-events: none;
  transition: transform 1.1s var(--doux);
}
.hall.vers-salon .medaillon    { transform: translateX(5%); }
.hall.vers-institut .medaillon { transform: translateX(-5%); }

.medaillon__rond {
  position: relative;
  width: clamp(236px, 23vw, 318px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  color: var(--encre);
  background: rgba(250,248,244,.93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 34px 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(184,134,79,.35);
}
.js .medaillon__rond { opacity: 0; animation: pose 1.3s var(--doux) calc(var(--d) + .45s) forwards; }
@keyframes pose { from { opacity: 0; transform: scale(.82) rotate(-8deg); } to { opacity: 1; transform: none; } }

.anneau { position: absolute; inset: 0; width: 100%; height: 100%; animation: tourne 46s linear infinite; }
.anneau text { font-family: var(--jost); font-size: 10.5px; font-weight: 400; fill: var(--or); }
@keyframes tourne { to { transform: rotate(360deg); } }

.medaillon__titre { font-weight: 300; line-height: 1; }
.medaillon__titre span {
  display: block;
  font-family: var(--jost);
  font-size: clamp(9.5px, .82vw, 11px);
  font-weight: 400;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 12px;
}
.medaillon__titre em {
  display: block;
  font-family: var(--fraunces);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(38px, 3.9vw, 54px);
  letter-spacing: -.01em;
  color: var(--encre);
}
.medaillon__fil { display: block; width: 34px; height: 1px; background: var(--or); margin: 16px 0 12px; }
.medaillon__dit {
  font-family: var(--cormorant);
  font-style: italic;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--gris);
}

/* Invitation à descendre */
.descendre {
  position: absolute; left: 0; right: 0; bottom: 22px;
  z-index: 5;
  width: max-content; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,.7);
}
.js .descendre { opacity: 0; animation: monte 1s var(--doux) calc(var(--d) + 1.5s) forwards; }
.descendre em { font-style: normal; font-size: 9.5px; letter-spacing: .4em; text-transform: uppercase; }
.descendre span { position: relative; display: block; width: 1px; height: 40px; background: rgba(255,255,255,.22); overflow: hidden; }
.descendre span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--or-clair); animation: goutte 2.2s var(--lent) infinite; }
@keyframes goutte { to { top: 110%; } }

/* Curseur du hall */
.curseur {
  position: fixed; left: 0; top: 0;
  z-index: 95;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(221,191,148,.9);
  background: rgba(20,25,27,.28);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity .35s ease;
}
.curseur span { font-size: 9.5px; letter-spacing: .34em; text-transform: uppercase; color: #fff; margin-right: -.34em; }
.curseur.actif { opacity: 1; }
html.curseur-ok .porte { cursor: none; }

/* ============================================================
   LE LIEU
   ============================================================ */
.lelieu {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--encre);
  color: var(--creme);
}
.lelieu__image { position: absolute; inset: -14% 0; background-size: cover; background-position: center; will-change: transform; }
.lelieu__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,25,27,.94) 0%, rgba(20,25,27,.7) 38%, rgba(20,25,27,.18) 100%),
    linear-gradient(0deg, rgba(20,25,27,.75) 0%, rgba(20,25,27,0) 45%);
}
.lelieu__texte { position: relative; max-width: 560px; margin: 0 0 11vh 8vw; padding-right: 24px; }
.lelieu h2 { font-family: var(--fraunces); font-weight: 300; font-size: clamp(38px, 5vw, 72px); line-height: 1.04; letter-spacing: -.015em; }
.lelieu p { font-size: 17.5px; color: rgba(250,248,244,.8); }

/* ============================================================
   LES DEUX UNIVERS
   ============================================================ */
.univers { position: relative; padding: clamp(90px, 12vw, 160px) 0; overflow: hidden; }
.univers__inner {
  max-width: 1240px; margin: 0 auto; padding: 0 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 110px);
  align-items: center;
}
.univers__media { position: relative; }
.cadre { overflow: hidden; }
.cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--doux); }
.univers__media:hover .cadre--grand img { transform: scale(1.05); }
.cadre--grand { aspect-ratio: 4 / 5; }
.cadre--petit { position: absolute; width: 42%; aspect-ratio: 1; }

.univers__sous { margin-top: 14px; }
.jetons { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 40px; }
.jetons li { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 9px 17px; }

.entree { display: inline-flex; align-items: center; gap: 18px; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; transition: background .4s ease, color .4s ease, border-color .4s ease, gap .5s var(--doux); }
.entree i { display: block; width: 30px; height: 1px; background: currentColor; transition: width .5s var(--doux); }
.entree:hover i { width: 52px; }

/* Ô Carré : vert profond, courbes */
.univers--salon {
  background: radial-gradient(120% 90% at 12% 0%, #1E4A3F 0%, #12302A 58%);
  color: var(--oc-creme);
  font-family: var(--nunito);
}
.univers--salon .label { color: var(--oc-or); font-family: var(--nunito); font-weight: 600; letter-spacing: .34em; }
.univers--salon h2 { font-family: var(--fraunces); font-weight: 300; font-size: clamp(54px, 7vw, 104px); line-height: .98; letter-spacing: -.02em; }
.univers--salon .univers__sous { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--oc-argent); }
.univers--salon .fil { background: var(--oc-or); }
.univers--salon p { font-size: 16.5px; font-weight: 300; color: rgba(250,249,245,.8); }
.univers--salon p + p { margin-top: 16px; }
.univers--salon .jetons li { border: 1px solid rgba(250,249,245,.24); border-radius: 999px; color: rgba(250,249,245,.86); font-weight: 600; }
.univers--salon .entree { background: var(--oc-or); color: var(--oc-vert-fonce); font-weight: 700; padding: 19px 34px; border-radius: 999px; }
.univers--salon .entree:hover { background: var(--oc-creme); }
.univers--salon .cadre--grand { border-radius: 999px 999px 26px 26px; }
.univers--salon .cadre--petit { right: -4%; bottom: -6%; border-radius: 50%; border: 7px solid var(--oc-vert-fonce); }

/* La Parenthèse : nude et noir, lignes droites */
.univers--institut {
  background: linear-gradient(180deg, var(--lp-creme) 0%, var(--lp-nude) 100%);
  color: var(--lp-noir);
  font-family: var(--jost);
}
.univers--institut .label { color: var(--lp-or); }
.univers--institut h2 { font-family: var(--cormorant); font-weight: 400; font-size: clamp(40px, 5.1vw, 76px); line-height: 1; white-space: nowrap; }
.univers--institut .univers__sous { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--lp-taupe); }
.univers--institut .fil { background: var(--lp-or); }
.univers--institut p { font-size: 17px; color: var(--lp-taupe); }
.univers--institut p + p { margin-top: 16px; }
.univers--institut .jetons li { border: 1px solid rgba(176,141,91,.5); color: var(--lp-taupe); }
.univers--institut .entree { border: 1px solid var(--lp-noir); padding: 19px 34px; }
.univers--institut .entree:hover { background: var(--lp-noir); color: var(--lp-creme); }
.univers--institut .univers__media::before {
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--lp-or);
  transform: translate(20px, 20px);
}
.univers--institut .cadre--grand { position: relative; }
.univers--institut .cadre--petit { left: -8%; bottom: -7%; border: 9px solid var(--lp-creme); }

/* ============================================================
   PRATIQUE
   ============================================================ */
.pratique { background: var(--creme); padding: clamp(90px, 11vw, 150px) 0; }
.pratique__haut { text-align: center; }
.pratique h2 { font-family: var(--fraunces); font-weight: 300; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -.015em; }
.chapo { max-width: 780px; margin: 0 auto; font-size: 17px; color: var(--gris); }
.pratique__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin-top: 74px; }
.fiche { border-top: 1px solid var(--or); padding-top: 24px; }
.js .fiche:nth-child(2) { transition-delay: .1s; }
.js .fiche:nth-child(3) { transition-delay: .2s; }
.js .fiche:nth-child(4) { transition-delay: .3s; }
.fiche h3 { font-family: var(--jost); font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--or); margin-bottom: 14px; }
.fiche p { font-size: 15.5px; line-height: 1.7; }
.lien-fin { display: inline-block; margin-top: 16px; font-size: 10.5px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; border-bottom: 1px solid var(--or); padding-bottom: 4px; transition: color .3s ease; }
.lien-fin:hover { color: var(--or); }
.carte { margin-top: 74px; }
.carte iframe { display: block; width: 100%; height: 400px; border: 0; filter: grayscale(.55) contrast(.95); }

/* ============================================================
   LE CHOIX FINAL
   ============================================================ */
.final { display: grid; grid-template-columns: 1fr 1fr; }
.final__porte {
  position: relative;
  min-height: 52vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 24px;
  color: #fff;
  overflow: hidden;
}
.final__porte::before { content: ""; position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1.8s var(--doux); }
.final__porte::after  { content: ""; position: absolute; inset: 0; transition: opacity .8s ease; }
.final__porte:hover::before { transform: scale(1.12); }
.final__porte:hover::after  { opacity: .78; }
.final__porte > * { position: relative; z-index: 1; }
.final__porte--salon::before    { background-image: url("img/poster-salon.jpg?v=2"); }
.final__porte--salon::after     { background: rgba(18,48,42,.86); }
.final__porte--institut::before { background-image: url("img/poster-institut.jpg?v=2"); }
.final__porte--institut::after  { background: rgba(39,32,35,.84); }
.final__sur { font-size: 10.5px; font-weight: 400; letter-spacing: .46em; text-transform: uppercase; color: var(--or-clair); }
.final__nom { margin-top: 16px; line-height: 1.05; }
.final__porte--salon .final__nom    { font-family: var(--fraunces); font-weight: 300; font-size: clamp(40px, 5vw, 72px); }
.final__porte--institut .final__nom { font-family: var(--cormorant); font-weight: 400; font-size: clamp(42px, 5.2vw, 76px); }
.final__cta { margin-top: 26px; font-size: 11px; font-weight: 400; letter-spacing: .32em; text-transform: uppercase; border-bottom: 1px solid var(--or-clair); padding-bottom: 6px; }

/* ============================================================
   PIED
   ============================================================ */
.pied { background: var(--encre); color: rgba(255,255,255,.68); padding-top: 62px; }
.pied__grille { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.pied__marque { font-family: var(--fraunces); font-weight: 300; font-size: 26px; color: #fff; }
.pied__liens { display: flex; gap: 28px; flex-wrap: wrap; font-size: 13px; }
.pied__liens a { border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 2px; transition: color .3s ease, border-color .3s ease; }
.pied__liens a:hover { color: var(--or-clair); border-color: var(--or-clair); }
.pied__bas { margin-top: 50px; padding: 22px 24px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.42); }

/* ============================================================
   VOILE DE SORTIE : la porte s'ouvre sur l'univers choisi
   ============================================================ */
.sortie {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.sortie.on { opacity: 1; pointer-events: auto; }
.sortie.salon    { background: var(--oc-vert-fonce); color: var(--oc-creme); }
.sortie.institut { background: var(--lp-nude); color: var(--lp-noir); }
.sortie__mot { font-size: clamp(44px, 7vw, 110px); line-height: 1; opacity: 0; transform: translateY(26px); transition: opacity .7s ease .2s, transform .9s var(--doux) .2s; }
.sortie.on .sortie__mot { opacity: 1; transform: none; }
.sortie.salon .sortie__mot    { font-family: var(--fraunces); font-weight: 300; letter-spacing: -.02em; }
.sortie.institut .sortie__mot { font-family: var(--cormorant); font-weight: 400; }

/* ============================================================
   PAGE SIMPLE (mentions légales)
   ============================================================ */
.simple { background: var(--creme); min-height: 100vh; padding: 90px 0 110px; }
.simple .wrap { max-width: 860px; }
.simple h1 { font-family: var(--fraunces); font-weight: 300; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.05; letter-spacing: -.015em; }
.simple h2 { font-family: var(--fraunces); font-weight: 300; font-size: 25px; margin: 44px 0 12px; }
.simple p { font-size: 16px; color: var(--gris); }
.simple .retour { display: inline-block; margin-bottom: 34px; font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase; color: var(--or); }
.simple .bouton { display: inline-block; margin-top: 48px; border: 1px solid var(--encre); padding: 17px 34px; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; transition: background .4s ease, color .4s ease; }
.simple .bouton:hover { background: var(--encre); color: var(--creme); }

/* ============================================================
   ÉCRANS MOYENS ET TÉLÉPHONES
   ============================================================ */
@media (max-width: 1000px) {
  .univers__inner { grid-template-columns: 1fr; gap: 80px; }
  .univers--institut .univers__media { order: -1; }
  .univers__media { max-width: 520px; }
  .pratique__grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .wrap, .univers__inner { padding: 0 24px; }

  .hall { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
  .porte { position: relative; inset: auto; flex: 1 1 50svh; min-height: 50svh; clip-path: none !important; }
  .porte__video { width: 100%; }
  .porte--salon .porte__contenu,
  .porte--institut .porte__contenu { left: 0; right: 0; width: 100%; transform: none !important; opacity: 1; }
  .porte--salon .porte__contenu { top: clamp(34px, 6svh, 60px); bottom: auto; }
  .porte--institut .porte__contenu { bottom: clamp(34px, 6svh, 60px); }
  .porte--salon .porte__voile {
    background: linear-gradient(180deg, rgba(10,28,24,.94) 0%, rgba(18,48,42,.55) 45%, rgba(18,48,42,.3) 100%);
  }
  .porte__dit { display: none; }
  .porte__entrer { margin-top: 18px; }

  .trait { inset: auto 0 auto 0; top: 50%; height: 1px; clip-path: none; transform: none !important;
           background: linear-gradient(90deg, rgba(221,191,148,0), var(--or-clair) 20%, var(--or-clair) 80%, rgba(221,191,148,0)); }
  .medaillon { padding-bottom: 0; transform: none !important; }
  .medaillon__rond { width: 206px; }
  .medaillon__titre em { font-size: 34px; }
  .medaillon__titre span { font-size: 8.5px; margin-bottom: 9px; }
  .medaillon__fil { margin: 11px 0 8px; }
  .medaillon__dit { font-size: 14px; }
  .descendre, .curseur { display: none; }

  .lelieu { min-height: 78vh; }
  .lelieu__texte { margin: 0 0 9vh 0; padding: 0 24px; }
  .lelieu__voile { background: linear-gradient(0deg, rgba(20,25,27,.95) 0%, rgba(20,25,27,.72) 55%, rgba(20,25,27,.35) 100%); }

  .univers--institut .univers__media::before { transform: translate(12px, 12px); }
  .univers--institut .cadre--petit { left: auto; right: -3%; }
  .final { grid-template-columns: 1fr; }
  .final__porte { min-height: 40vh; }
  .pied__grille { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  .pratique__grille { grid-template-columns: 1fr; }
  .pied__liens { flex-direction: column; gap: 12px; }
}

/* Personnes qui préfèrent moins de mouvement : tout s'affiche directement */
@media (prefers-reduced-motion: reduce) {
  html.js { --d: 0s; }
  .js .rideau { display: none; }
  .js .reveler, .js .porte__contenu, .js .medaillon__rond, .js .descendre { opacity: 1; transform: none; animation: none; transition: none; }
  .anneau, .descendre span::after { animation: none; }
}