:root {
  --epinette: #123a30;
  --epinette-fonce: #0b2821;
  --papier: #f7f5ef;
  --brume: #dedfd6;
  --laiton: #d5bd8b;
  --or-fonce: #795c29;
}

html { scroll-padding-top: 104px; }
.cadre { max-width: 1376px; padding-inline: clamp(20px, 4.2vw, 64px); }
.entete { background: var(--papier); color: var(--epinette-fonce); border-bottom: 1px solid var(--brume); }
.entete .cadre { padding-block: 16px; }
.entete.ombre { box-shadow: 0 4px 16px #0b28211a; }
.marque { gap: 10px; white-space: nowrap; }
.monogramme { width: 43px; height: 43px; flex: none; }
.marque .nom { display: block; font-size: clamp(1.35rem, 2.1vw, 1.95rem); letter-spacing: -.045em; }
.marque strong { font-weight: 600; }
.pied .marque { display: inline-flex; }
.pied .monogramme { background: var(--papier); padding: 5px; }
.nav { gap: clamp(16px, 2.3vw, 34px); font-weight: 500; }
.bouton { border-radius: 0; }
.bouton:hover { transform: none; box-shadow: none; }
.entete .bouton { background: var(--epinette); color: var(--papier); padding: 10px 16px; }
.entete .bouton:hover { background: var(--epinette-fonce); }

.ouverture { background: var(--epinette-fonce); padding: 0; }
.ouverture::before { content: none; }
.ouverture .cadre { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 0; align-items: stretch; }
.presentation { padding: clamp(52px, 6.4vw, 100px) clamp(34px, 5vw, 82px) clamp(48px, 5vw, 78px) 0; }
.domaine {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  color: var(--laiton);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.domaine::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.ouverture h1 {
  font-size: clamp(3.1rem, 6vw, 6.2rem);
  line-height: .99;
  letter-spacing: -.063em;
  text-wrap: balance;
}
.ouverture h1 em { display: block; font-weight: 400; color: var(--laiton); }
.ouverture .promesse { margin: 25px 0 0; font-weight: 600; line-height: 1.42; max-width: 38ch; }
.ouverture p.chapeau { font-size: 1rem; line-height: 1.55; margin-top: 10px; max-width: 46ch; }
.ouverture .agrement { margin: 30px 0 0; border-color: #d5bd8b66; color: #c8d6cf; font-size: .82rem; }
.photo-accueil { position: relative; margin-right: calc(-1 * (clamp(20px, 4.2vw, 64px) + max(0px, (100vw - 1376px) / 2))); }
.ouverture .fond { object-position: 23% 50%; }

.outil { background: #edece3; border-bottom: 1px solid var(--brume); }
.calcul {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 4vw, 58px);
  padding: 28px 0;
  border: 0;
  background: transparent;
}
.calcul h2 { font-size: clamp(1.45rem, 2.4vw, 2.05rem); letter-spacing: -.035em; }
.calcul .note, .calcul .masse { margin-bottom: 0; }
.resultat { border-top: 0; border-left: 1px solid #bdbeae; padding: 0 0 0 clamp(16px, 3vw, 40px); }
.resultat .montant { font-size: clamp(2.3rem, 4vw, 3.6rem); letter-spacing: -.055em; }
.resultat p { font-size: .92rem; }

section h2 { letter-spacing: -.043em; font-size: clamp(2rem, 4vw, 3.4rem); }
.registre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 42px); border: 0; }
.ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  gap: 13px;
  padding: 0 0 22px;
  border-bottom: 1px solid #ab9975;
}
.ligne figure { aspect-ratio: 1.6; border-radius: 0; }
.ligne:hover figure img { transform: none; }
.ligne h3 { font-size: clamp(1.35rem, 2.25vw, 2.05rem); letter-spacing: -.035em; }
.ligne a { justify-self: start; text-decoration: underline; text-decoration-color: var(--or-fonce); }
.campus figure, .attente, .sommaire { border-radius: 0; }
#formations, .campus { padding-block: clamp(56px, 7vw, 102px); }
.etapes li::before, summary::after { color: var(--or-fonce); }

@media (max-width: 900px) {
  .ouverture .cadre { grid-template-columns: minmax(0, 1fr); }
  .presentation { padding-right: 0; }
  .ouverture h1 { text-wrap: initial; }
  .photo-accueil { aspect-ratio: 1.7; margin-inline: calc(-1 * clamp(20px, 4.2vw, 64px)); }
}
@media (max-width: 700px) {
  .registre, .calcul { grid-template-columns: minmax(0, 1fr); }
  .registre { gap: 28px; }
  .resultat { border-left: 0; border-top: 1px solid #bdbeae; padding: 16px 0 0; }
}
@media (max-width: 420px) {
  .monogramme { width: 32px; height: 32px; }
  .marque { gap: 5px; }
  .marque .nom { font-size: 1.2rem; }
  .entete .cadre { gap: 8px; }
  .entete .bouton { font-size: .78rem; padding-inline: 8px; }
  .ouverture h1 { font-size: clamp(2.95rem, 12vw, 3.45rem); }
  .ouverture .actions { gap: 9px; }
  .ouverture .actions .bouton { font-size: .85rem; padding-inline: 12px; }
}

/* Identité et navigation */
:root {
  --epinette: #172e5b;
  --epinette-fonce: #101e39;
  --papier: #f4f6fa;
  --brume: #d8dfea;
  --laiton: #adc2ff;
  --or-fonce: #234dcc;
  --encre: #101e39;
  --gris: #47566e;
}
body { background: #fff; }
:focus-visible { outline: 2px solid #3767ff; outline-offset: 4px; }
.evitement { position: absolute; top: 8px; left: 12px; z-index: 100; padding: 10px 14px; background: white; transform: translateY(-150%); }
.evitement:focus { transform: none; }
.entete { background: #fff; }
.entete .cadre { min-height: 84px; }
.marque { gap: 12px; }
.marque .nom { font-family: var(--sans); font-size: clamp(1.18rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -.055em; }
.marque strong { font-weight: 700; }
.pied .monogramme { background: transparent; padding: 0; }
.entete .bouton, .ouverture .bouton { background: var(--or-fonce); color: #fff; }
.entete .bouton:hover, .ouverture .bouton:hover { background: #193aa2; }
.menu-mobile { display: none; }

/* Accueil */
.ouverture { background: #edf2fc; color: var(--encre); }
.ouverture .cadre { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); min-height: 490px; }
.presentation { padding: clamp(48px, 6vw, 88px) clamp(30px, 4.4vw, 68px) clamp(48px, 6vw, 88px) 0; }
.domaine { color: var(--or-fonce); margin-bottom: 20px; }
.ouverture h1 { font-size: clamp(3rem, 5.35vw, 5.6rem); line-height: 1; text-wrap: initial; }
.ouverture p.chapeau { color: var(--gris); margin-top: 22px; }
.ouverture .actions { align-items: center; }
.ouverture .bouton { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; }
.lien-accueil { display: inline-flex; align-items: center; min-height: 44px; font-size: .94rem; font-weight: 700; text-underline-offset: 5px; }
.ouverture .fond { object-position: 24% center; }
.acces { background: var(--epinette-fonce); color: #fff; }
.acces .cadre { display: flex; justify-content: space-between; align-items: center; gap: 20px 44px; padding-block: 16px; }
.acces .agrement { max-width: 76ch; margin: 0; border: 0; padding: 0; color: #e2e9fc; font-size: .85rem; }
.acces a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: .91rem; font-weight: 700; text-underline-offset: 5px; }

/* Catalogue et outils */
.titre-catalogue { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: end; margin-bottom: 34px; }
.titre-catalogue .intro { margin: 0; max-width: 53ch; }
.registre { gap: clamp(16px, 2vw, 28px); }
.ligne { gap: 12px; border: 1px solid var(--brume); padding-bottom: 22px; }
.ligne figure { aspect-ratio: 1.85; }
.ligne > :not(figure) { margin-inline: clamp(16px, 2vw, 29px); }
.ligne .theme { color: var(--or-fonce); font-size: .73rem; text-transform: uppercase; font-weight: 700; letter-spacing: .085em; margin: 4px 0 8px; }
.ligne .acquis { font: inherit; font-size: .96rem; }
.ligne a { display: inline-flex; align-items: center; white-space: normal; gap: 10px; min-height: 44px; color: var(--or-fonce); font-size: .92rem; }
.outil { background: #edf2fc; }
.resultat { border-color: #bdc9df; }
section.claire { background: var(--papier); }
.reservation .intro, form .consent { color: #e1e9fd; }

@media (max-width: 900px) {
  .ouverture .cadre { grid-template-columns: 1fr; min-height: auto; }
  .presentation { padding-right: 0; }
  .ouverture h1 { max-width: 16ch; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .entete .cadre { min-height: 68px; padding-block: 10px; }
  .menu-mobile { display: block; margin: 0; padding: 0; border: 0; }
  .menu-mobile:first-of-type { border: 0; }
  .menu-mobile summary { min-height: 44px; align-items: center; font: 700 .95rem var(--sans); }
  .menu-mobile summary::after { content: "+"; color: var(--or-fonce); }
  .menu-mobile[open] summary::after { content: "−"; }
  .nav-mobile { position: absolute; inset: 100% 0 auto; display: grid; gap: 6px; padding: 16px 20px; background: #fff; box-shadow: 0 12px 20px #101e3926; }
  .nav-mobile a { min-height: 44px; padding: 8px 12px; }
  .nav-mobile .bouton { justify-self: start; }
}
@media (max-width: 700px) {
  .acces .cadre { display: grid; gap: 7px; }
  .titre-catalogue { grid-template-columns: 1fr; gap: 10px; }
}

/* Parcours d’accueil */
.ouverture {
  background: var(--epinette-fonce);
  color: #fff;
}
.ouverture .cadre {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  min-height: 505px;
}
.presentation { padding-block: clamp(48px, 5vw, 76px); }
.domaine { color: #b9cbff; }
.ouverture h1 {
  font-size: clamp(2.85rem, 4.65vw, 4.75rem);
  letter-spacing: -.052em;
  max-width: 15ch;
}
.ouverture p.chapeau { color: #e1e8fa; }
.accent-obligation {
  padding: .04em .3em;
  border-radius: .2em;
  background: #dce6ff;
  color: var(--epinette-fonce);
  font-size: 1.1em;
  font-weight: 700;
  white-space: nowrap;
  text-underline-offset: .15em;
}
.accent-obligation:hover,
.accent-obligation:focus-visible {
  background: #fff;
}

.ouverture .bouton { background: #fff; color: var(--epinette-fonce); }
.ouverture .bouton:hover { background: #dce6ff; }
.ouverture .photo-accueil { margin: 26px 0 0; overflow: hidden; }
.ouverture .fond { object-position: 22% 50%; }
.acces { background: #edf2fc; color: var(--encre); border-bottom: 1px solid var(--brume); }
.acces .cadre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-block: 0; }
.acces a {
  justify-content: space-between;
  padding: 20px clamp(12px, 2vw, 30px);
  border-inline-end: 1px solid var(--brume);
  text-decoration: none;
}
.acces a:first-child { padding-inline-start: 0; }
.acces a:last-child { border: 0; padding-inline-end: 0; }
.acces a strong { display: block; font-size: 1.02rem; }
.acces a small { display: block; font-size: .85rem; font-weight: 400; color: var(--gris); }
.acces a > span:last-child { color: var(--or-fonce); font-size: 1.3rem; }
.acces a:hover strong { text-decoration: underline; }
.preuve { background: var(--epinette-fonce); color: #fff; }
.preuve .cadre { display: flex; gap: 12px 32px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 22px; }
.preuve p { margin: 3px 0 0; color: #e1e8fa; font-size: .89rem; }
.preuve a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-underline-offset: 5px; }

@media (max-width: 900px) {
  .ouverture .cadre { grid-template-columns: 1fr; min-height: auto; }
  .ouverture .photo-accueil { margin: 0 calc(-1 * clamp(20px, 4.2vw, 64px)); aspect-ratio: 2; }
}
@media (max-width: 700px) {
  .acces .cadre { grid-template-columns: 1fr; }
  .acces a { padding: 12px 0; border-inline-end: 0; border-bottom: 1px solid var(--brume); }
}

/* Signature de l’institut */
.marque { gap: 10px; }
.monogramme { width: 49px; height: 49px; }
.marque .nom { display: grid; gap: 6px; font-family: var(--serif); line-height: .91; }
.marque .nom small {
  margin: 0;
  padding-inline-start: 2px;
  color: var(--or-fonce);
  font-family: var(--sans);
  font-size: .75rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .18em;
}
.marque strong { font-size: 2.1rem; font-weight: 600; }
.pied .marque small { color: var(--laiton); }

/* Fiches de formation */
#formations { background: #f4f6fa; }
#formations .titre-catalogue { padding-bottom: 24px; border-bottom: 1px solid var(--brume); }
.registre { align-items: stretch; }
.ligne {
  --marge-fiche: clamp(15px, 1.8vw, 27px);
  grid-template-rows: auto auto 1fr auto auto;
  gap: 0;
  padding: 0 var(--marge-fiche) 13px;
  background: #fff;
  border: 1px solid #ced8ea;
  border-bottom: 3px solid var(--epinette);
}
.ligne figure {
  margin: 0 calc(-1 * var(--marge-fiche));
  aspect-ratio: 1.84;
  border-bottom: 1px solid var(--brume);
}
.ligne > :not(figure) { margin-inline: 0; }
.ligne .theme { margin: 19px 0 8px; }
.ligne h3 { font-size: clamp(1.45rem, 2.15vw, 1.98rem); line-height: 1.13; }
.ligne .fiche { margin: 17px 0 7px; padding-top: 13px; border-top: 1px solid var(--brume); }
.fiche > div + div { margin-top: 10px; }
.fiche dt { font-weight: 700; color: var(--encre); font-size: .81rem; }
.fiche dd { margin: 1px 0 0; color: var(--gris); font-size: .93rem; line-height: 1.48; }
.ligne a { text-decoration-color: currentColor; gap: 12px; }
.ligne .programme { margin: 8px 0 3px; padding: 0; border-block: 1px solid var(--brume); }
.programme summary {
  align-items: center;
  min-height: 44px;
  color: var(--epinette);
  font: 700 .92rem var(--sans);
}
.programme summary::after { color: var(--or-fonce); }
.programme-contenu { padding: 0 0 14px; color: var(--gris); font-size: .93rem; line-height: 1.48; }
.programme-contenu p { margin: 0 0 12px; font-size: inherit; }
.programme-contenu h4 { margin: 12px 0 4px; color: var(--encre); font-size: .85rem; }
.programme-contenu ul,
.programme-contenu ol { margin: 0; padding-left: 1.25em; }
.programme-contenu li + li { margin-top: 5px; }
@media (min-width: 901px) {
  .ligne { grid-template-rows: subgrid; grid-row: span 5; }
  .registre { row-gap: 0; }
}
@media (max-width: 900px) {
  .registre { grid-template-columns: minmax(0, 1fr); }
  .ligne { --marge-fiche: 22px; }
  .ligne figure { aspect-ratio: 2.2; }
}
@media (max-width: 420px) {
  .monogramme { width: 39px; height: 39px; }
  .marque .nom small { padding-inline-start: 1px; }
  .marque strong { font-size: 1.75rem; }
  .ligne { --marge-fiche: 17px; }
  .ligne figure { aspect-ratio: 1.85; }
}

/* Cas client */
.cas-client { background: #fff; }
.cas-client-fiche {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  border: 1px solid var(--brume);
  border-bottom: 3px solid var(--epinette);
}
.cas-client-identite {
  padding: clamp(24px, 4vw, 48px);
  background: var(--epinette-fonce);
  color: #fff;
}
.cas-client-identite h3 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.cas-client-identite p { margin: 14px 0 0; color: #e1e8fa; font-size: .93rem; }
.cas-client-etapes { margin: 0; padding: clamp(24px, 4vw, 48px); }
.cas-client-etapes > div + div { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--brume); }
.cas-client-etapes dt { font-weight: 700; }
.cas-client-etapes dd { margin: 3px 0 0; color: var(--gris); }
@media (max-width: 700px) {
  .cas-client-fiche { grid-template-columns: minmax(0, 1fr); }
}

.campus-acces { margin-top: 24px; }