/* ==========================================================================
   Composants réutilisables
   ========================================================================== */

/* Boutons ----------------------------------------------------------------- */
.bouton {
  --b-bg: var(--bouton-bg);
  --b-fg: var(--bouton-texte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border: 1px solid var(--b-bg);
  border-radius: var(--rayon-pilule);
  background: var(--b-bg);
  color: var(--b-fg);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 450;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.bouton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paille);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.bouton:hover::before { transform: translateY(0); }
.bouton:hover { color: var(--encre); border-color: var(--paille); text-decoration: none; }

.bouton--clair {
  --b-bg: transparent;
  --b-fg: currentColor;
  border-color: currentColor;
}
.bouton--petit { min-height: 2.5rem; padding: .5rem 1.1rem; }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }
.bouton[disabled]::before { display: none; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-sm);
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .2rem;
}
.lien-fleche svg { width: 1rem; transition: transform .4s var(--ease); }
.lien-fleche:hover svg { transform: translateX(4px); }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }

/* Filet décoratif : un trait de paille qui se trace -------------------------- */
.filet-paille {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: var(--paille);
  transform-origin: left;
}
.reveal.is-waiting .filet-paille { transform: scaleX(0); }
.reveal.is-shown .filet-paille { transform: scaleX(1); transition: transform 1.2s var(--ease) .2s; }

/* Étapes (processus réel, donc numérotées) --------------------------------- */
.etapes {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0;
  counter-reset: etape;
}
.etapes > li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--filet);
  align-items: baseline;
}
.etapes > li:last-child { border-bottom: 1px solid var(--filet); }
.etapes > li::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  color: var(--paille-texte);
  font-variant-numeric: tabular-nums;
}
.etapes h3 { font-size: var(--t-lg); font-family: var(--f-titre); }
.etapes p { color: var(--texte-doux); }
.etapes .qui {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-top: .35rem;
  font-family: var(--f-texte);
}
@media (max-width: 760px) {
  .etapes > li { grid-template-columns: 3rem minmax(0, 1fr); }
  .etapes > li p { grid-column: 2; }
}

/* Liste « inclus » -------------------------------------------------------- */
.inclus {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
}
.inclus li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: .6rem;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--filet);
}
.inclus li::before {
  content: "";
  width: .55rem; height: .55rem;
  margin-top: .55rem;
  border: 1px solid var(--paille-texte);
  border-radius: 50%;
}
@media (max-width: 700px) { .inclus { grid-template-columns: 1fr; } }

/* Cartes publics (Étudiants / Correspondants / Établissements) -------------- */
.porte {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border-top: 1px solid var(--texte);
  text-decoration: none;
  color: inherit;
  transition: background .5s var(--ease);
}
.porte:hover { background: var(--surface); }
.porte--statique:hover { background: none; }
.section--lin .porte:hover { background: var(--bg); }
.section--lin .porte--statique:hover { background: none; }
.porte h3 { font-size: var(--t-xl); }
.porte p { color: var(--texte-doux); }
.porte .lien-fleche { justify-self: start; }

/* Carte région (image + légende) ------------------------------------------ */
.region {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--rayon);
  aspect-ratio: 9 / 11;
  max-width: 100%;
  color: var(--sur-image);
  text-decoration: none;
}
.region img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s var(--ease);
}
.region:hover img { transform: scale(1.08); }
.region::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18, 20, 28, .72), rgba(18, 20, 28, 0) 55%);
}
.region__legende {
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: var(--s-3);
  z-index: 1;
  display: grid;
  gap: .25rem;
}
.region__nom { font-family: var(--f-titre); font-size: var(--t-xl); line-height: 1.1; }
.region__detail { font-size: var(--t-sm); opacity: .85; }

/* Portrait en attente de photo --------------------------------------------- */
.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: var(--rayon);
  background:
    radial-gradient(120% 80% at 30% 20%, color-mix(in srgb, var(--paille) 22%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--filet);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.portrait__initiales {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--paille-texte);
  opacity: .8;
}
.portrait__note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .6rem 1rem;
  font-size: var(--t-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  border-top: 1px solid var(--filet);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}

/* Puces / pastilles -------------------------------------------------------- */
.pastilles { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon-pilule);
  font-size: var(--t-sm);
  background: var(--bg);
}
.pastille--choix { position: relative; cursor: pointer; user-select: none; transition: background .3s, border-color .3s, color .3s; }
.pastille--choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.pastille--choix:has(input:checked) { background: var(--texte); color: var(--bg); border-color: var(--texte); }
.pastille--choix:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Formulaires ------------------------------------------------------------- */
.formulaire { display: grid; gap: var(--s-3); }
.formulaire__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 640px) { .formulaire__ligne { grid-template-columns: 1fr; } }

.champ { display: grid; gap: .4rem; }
.champ label, .champ legend {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--texte-doux);
  padding: 0;
}
.champ fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: .6rem; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  font: inherit;
  font-size: var(--t-base);
  color: var(--texte);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
  padding: .55rem 0;
  transition: border-color .3s var(--ease);
}
.champ select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}
.champ select option { background: var(--bg); color: var(--texte); }
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--texte); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { box-shadow: 0 1px 0 0 var(--texte); }
.champ .aide { font-size: var(--t-xs); color: var(--texte-doux); }
.champ.is-erreur input, .champ.is-erreur select, .champ.is-erreur textarea { border-bottom-color: var(--alerte); }
.champ .erreur { font-size: var(--t-xs); color: var(--alerte); }

.case { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--texte-doux); }
.case input { margin-top: .3rem; accent-color: var(--encre); }

/* Messages ---------------------------------------------------------------- */
.message {
  padding: var(--s-3);
  border: 1px solid var(--filet);
  border-left: 2px solid var(--paille);
  background: var(--surface);
  font-size: var(--t-sm);
}
.message strong { display: block; font-family: var(--f-titre); font-weight: 400; font-size: var(--t-lg); margin-bottom: .25rem; }
.message--succes { border-left-color: var(--succes); }

.note-demo {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: var(--texte-doux);
}
.note-demo::before {
  content: "";
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--paille);
}

/* FAQ --------------------------------------------------------------------- */
.faq { display: grid; border-top: 1px solid var(--filet); }
.faq details { border-bottom: 1px solid var(--filet); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-3);
  font-family: var(--f-titre);
  font-size: var(--t-lg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--f-texte);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--s-3); color: var(--texte-doux); }

/* Citation ---------------------------------------------------------------- */
.citation {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: var(--t-2xl);
  line-height: 1.2;
  max-width: 24ch;
  margin: 0;
}

/* Pastilles à cocher dans un formulaire : ne pas reprendre le style des libellés */
.champ .pastille--choix {
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--texte);
  padding: .4rem .95rem;
}
.champ .pastille--choix:has(input:checked) { color: var(--bg); }
.champ fieldset legend { margin-bottom: .6rem; }

/* ==========================================================================
   Vidéo de présentation : bulle ronde façon « story » + fenêtre plein écran
   ========================================================================== */
.video-bulle {
  position: fixed; z-index: 60; right: clamp(1rem, 2.5vw, 2rem); top: calc(var(--entete-h, 4.5rem) + 1.4rem);
  display: grid; justify-items: center; gap: .5rem;
  opacity: 0; transform: translateY(-10px) scale(.92); pointer-events: none;
  transition: opacity .5s var(--ease, ease), transform .5s var(--ease, ease);
}
.video-bulle.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.video-bulle__ouvrir { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.video-bulle__anneau {
  display: block; width: 7.5rem; height: 7.5rem; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 210deg, #C9A452, #E6CB86, #8A6A24, #C9A452);
  box-shadow: 0 18px 40px -16px rgba(16, 17, 26, .55);
  transition: transform .35s var(--ease, ease);
}
.video-bulle__anneau video {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--bg, #FBF9F5); background: #1E2433;
}
.video-bulle__ouvrir:hover .video-bulle__anneau, .video-bulle__ouvrir:focus-visible .video-bulle__anneau { transform: scale(1.06); }
.video-bulle__jouer {
  position: absolute; right: .1rem; bottom: .1rem; width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: #1E2433; color: #FBF9F5; border: 2px solid var(--bg, #FBF9F5);
}
.video-bulle__jouer svg { width: .95rem; height: .95rem; margin-left: 2px; }
.video-bulle__legende {
  max-width: 12rem; text-align: center; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.35;
  padding: .3rem .7rem; border-radius: 99px; background: rgba(251, 249, 245, .88); color: #1E2433;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.video-bulle__fermer {
  position: absolute; top: -.2rem; right: -.2rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 2px solid var(--bg, #FBF9F5); background: #1E2433; color: #FBF9F5; font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.video-bulle__fermer:hover { background: #8A6A24; }
.video-ouverte .video-bulle { opacity: 0; pointer-events: none; }

.video-fenetre {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 11, 18, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.video-fenetre.est-ouverte { opacity: 1; pointer-events: auto; }
.video-fenetre__cadre { position: relative; width: min(100%, 1100px, calc((100vh - 6rem) * 16 / 9)); }
.video-fenetre__cadre video { display: block; width: 100%; max-height: calc(100vh - 6rem); border-radius: 14px; background: #000; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.video-fenetre__fermer {
  position: absolute; top: -1rem; right: -1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0;
  background: #FBF9F5; color: #1E2433; font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
html.video-ouverte { overflow: hidden; }

@media (max-width: 760px) {
  .video-bulle { top: auto; bottom: 1rem; right: 1rem; }
  .video-bulle__anneau { width: 5.2rem; height: 5.2rem; }
  .video-bulle__legende { display: none; }
  .video-bulle__jouer { width: 1.6rem; height: 1.6rem; }
  .video-fenetre__fermer { top: -3rem; right: 0; }
}
@media print { .video-bulle, .video-fenetre { display: none !important; } }

/* ==========================================================================
   Bandeau cookies
   ========================================================================== */
.cookies {
  position: fixed; z-index: 150; left: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem);
  width: min(30rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--bg, #FBF9F5); color: var(--texte, #1E2433); border: 1px solid var(--filet, #E6DDCF);
  border-radius: var(--rayon, 14px); padding: 1.3rem 1.4rem; box-shadow: 0 24px 60px -24px rgba(16, 17, 26, .45);
  display: grid; gap: .8rem; font-size: .92rem; line-height: 1.5;
  opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease;
}
.cookies.est-visible { opacity: 1; transform: none; }
.cookies__titre { margin: 0; font-family: var(--f-titre); font-size: 1.25rem; }
.cookies__texte { margin: 0; color: var(--texte-doux, #5d6170); }
.cookies__texte a { color: inherit; }
.cookies__choix { display: none; gap: .6rem; }
.cookies--perso .cookies__choix { display: grid; }
.cookies__ligne { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .75rem; border: 1px solid var(--filet, #E6DDCF); border-radius: 10px; cursor: pointer; }
.cookies__ligne input { margin-top: .25rem; accent-color: var(--paille, #C9A452); width: 1.05rem; height: 1.05rem; flex: none; }
.cookies__ligne span { display: grid; gap: .15rem; }
.cookies__ligne small { color: var(--texte-doux, #5d6170); font-size: .82rem; line-height: 1.4; }
.cookies__boutons { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cookies__btn {
  font: inherit; font-weight: 500; font-size: .88rem; padding: .6rem 1.1rem; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--filet, #E6DDCF); background: transparent; color: inherit;
}
.cookies__btn:hover { border-color: var(--paille, #C9A452); }
.cookies__btn--plein { background: var(--encre, #1E2433); color: #FBF9F5; border-color: transparent; margin-left: auto; }
[data-theme="dark"] .cookies__btn--plein { background: #C9A452; color: #1E2433; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cookies__btn--plein { background: #C9A452; color: #1E2433; } }
.cookies__btn--lien { border: 0; text-decoration: underline; padding-inline: .3rem; }
.cookies:not(.cookies--perso) [data-c="enregistrer"], .cookies--perso [data-c="accepter"], .cookies--perso [data-c="perso"] { display: none; }
@media (max-width: 520px) { .cookies__boutons .cookies__btn { flex: 1 1 auto; } .cookies__btn--plein { margin-left: 0; } }
@media print { .cookies { display: none !important; } }

/* Agenda Cal.com en attente d'accord */
.cal-consent { display: grid; justify-items: center; gap: 1rem; text-align: center; padding: clamp(1.5rem, 5vw, 3rem); border: 1px dashed var(--filet, #E6DDCF); border-radius: var(--rayon, 14px); }
.cal-consent p { margin: 0; max-width: 34rem; }
.cal-consent__autre { font-size: .88rem; color: var(--texte-doux, #5d6170); }

/* Bouton « Réserver un appel » sous la vidéo */
.video-cta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem;
  margin-top: 1rem; min-height: 4.2rem;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.video-cta.est-visible { opacity: 1; visibility: visible; transform: none; }
.video-cta__bouton {
  display: flex; align-items: center; gap: .8rem; padding: .7rem 1.1rem .7rem .8rem; border-radius: 99px;
  background: #FBF9F5; color: #1E2433; text-decoration: none; border: 1px solid rgba(201,164,82,.55);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.55);
  animation: video-cta-pouls 2.4s ease-in-out infinite;
}
.video-cta__bouton > svg { width: 2.3rem; height: 2.3rem; padding: .5rem; border-radius: 50%; background: #1E2433; color: #E6CB86; flex: none; }
.video-cta__bouton span:not(.video-cta__fleche) { display: grid; line-height: 1.25; text-align: left; }
.video-cta__bouton strong { font-weight: 600; font-size: 1rem; }
.video-cta__bouton small { font-size: .74rem; color: #5d6170; }
.video-cta__fleche { font-size: 1.2rem; transition: transform .25s ease; }
.video-cta__bouton:hover .video-cta__fleche { transform: translateX(4px); }
.video-cta__bouton:hover { background: #fff; }
.video-cta__revoir { display: none; font: inherit; font-size: .85rem; color: inherit; background: transparent; border: 1px solid var(--filet, rgba(255,255,255,.35)); border-radius: 99px; padding: .5rem 1rem; cursor: pointer; }
.video-fenetre .video-cta__revoir { color: #FBF9F5; border-color: rgba(255,255,255,.35); }
.video-cta--fin .video-cta__bouton { animation: none; }
.video-cta--fin .video-cta__revoir { display: inline-block; }
@keyframes video-cta-pouls { 0%, 100% { box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), 0 0 0 0 rgba(201,164,82,.55); } 50% { box-shadow: 0 18px 40px -18px rgba(0,0,0,.55), 0 0 0 10px rgba(201,164,82,0); } }
@media (prefers-reduced-motion: reduce) { .video-cta__bouton { animation: none; } }
@media (max-width: 600px) {
  .video-cta { margin-top: .8rem; min-height: 3.4rem; }
  .video-cta__bouton { padding: .5rem .9rem .5rem .5rem; gap: .6rem; }
  .video-cta__bouton small { display: none; }
  .video-cta__bouton > svg { width: 1.9rem; height: 1.9rem; padding: .4rem; }
  .video-cta__bouton strong { font-size: .9rem; }
}
/* la fenêtre laisse la place au bouton sous la vidéo */
.video-fenetre__cadre video { max-height: calc(100vh - 11rem) !important; }
.video-fenetre__cadre { width: min(100%, 1100px, calc((100vh - 11rem) * 16 / 9)) !important; }
.video-fenetre__fermer { z-index: 5; }