/* Identité La Scène Cancale — Charte graphique, version 1.1, avril 2026.
   Polices et logos hébergés localement : aucune connexion à un service tiers. */
@font-face {
  font-family: "Alegreya Sans";
  src: url("AlegreyaSans-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("AlegreyaSans-Medium.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("AlegreyaSans-Bold.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("AlegreyaSans-Black.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}
@font-face {
  font-family: "Risque";
  src: url("Risque-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --brand-blue: #162e7b;
  --brand-teal: var(--brand-blue);
  --brand-yellow: #f2bf00;
  --ink: var(--brand-blue);
  --ink-soft: #3e528c;
  --sea: var(--brand-teal);
  --sea-dark: #12265f;
  --sand: #f4f7ff;
  --paper: #ffffff;
  --line: #dce3f2;
  --gold: var(--brand-yellow);
  --gold-light: #fff5c8;
  --focus: var(--brand-teal);
  --shadow: 0 12px 36px rgba(22,46,123,.055);
}

body {
  color: var(--brand-blue);
  background: #f5f7fc;
  font-family: "Alegreya Sans", "Trebuchet MS", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.47;
}

a { color: var(--brand-blue); }
a:hover { color: var(--brand-teal); }
.wrap { width: min(1120px, calc(100% - 44px)); }

/* Le vrai logo remplace le monogramme provisoire. */
.topbar { background: white; color: var(--brand-blue); border-bottom: 0; }
.topbar .wrap { padding: 9px 0; min-height: 70px; }
.brand { display: block; font-size: 0; line-height: 0; }
.brand img { display: block; width: 145px; max-width: 100%; height: auto; }
.brandmark { display: none; }
.topnote {
  color: var(--brand-blue);
  text-transform: uppercase;
  font-family: "Alegreya Sans", Arial, sans-serif;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .08em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.topnote span { color: var(--brand-yellow); font-size: .76rem; }

/* Un bandeau compact, sans vagues ni ornements supplémentaires. */
.hero { color: white; background: var(--brand-blue); }
.hero::after { display: none; }
.hero .wrap { padding: 40px 0 45px; }
.eyebrow {
  display: inline-block;
  background: transparent;
  color: #fff;
  border-left: 3px solid var(--brand-yellow);
  padding: 1px 0 1px 12px;
  font-family: "Alegreya Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: .83rem;
  letter-spacing: .085em;
  line-height: 1;
}
h1, h2, h3 { letter-spacing: -.015em; }
h1, h2 { font-family: "Alegreya Sans", Arial, sans-serif; }
h1 {
  max-width: 820px;
  font-size: clamp(2.65rem,4.2vw,3.95rem);
  line-height: 1;
  font-weight: 700;
  margin: 19px 0 13px;
  position: relative;
  z-index: 2;
}
h1 em {
  display: inline-block;
  color: white;
  font-family: "Alegreya Sans", Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  font-style: normal;
  line-height: 1.12;
  margin-top: 2px;
}
.hero-intro { font-size: 1.13rem; line-height: 1.4; max-width: 720px; color: white; position: relative; z-index: 2; }

/* Des rubriques lisibles, avec quelques accents forts plutôt qu'une déco partout. */
.content-grid { grid-template-columns: 230px minmax(0,1fr); gap: 48px; padding-top: 56px; }
.aside { font-size: 1.05rem; }
.aside-picto { background: #fff; display: flex; justify-content: center; align-items: center; margin-bottom: 22px; border: 1px solid #e3e9f5; }
.aside-picto img { display: block; width: 170px; height: 170px; object-fit: contain; }
.aside-header { color: var(--brand-blue); font-weight: 700; letter-spacing: .075em; font-size: .9rem; margin-bottom: 12px; }
.steps { gap: 4px; }
.steps a { color: var(--brand-blue); gap: 12px; font-weight: 400; font-size: 1.04rem; padding-block: 9px; }
.steps a:hover { color: var(--brand-teal); }
.steps .number {
  color: var(--brand-blue);
  background: white;
  border: 1px solid #bdc9e7;
  font-size: 1rem;
  font-weight: 500;
  width: 33px;
  height: 33px;
}
.callout { border-top: 2px solid var(--brand-blue); padding-top: 20px; color: #3c4c7b; font-size: 1rem; }
.callout b { color: var(--brand-blue); font-weight: 400; font-family: "Risque", Georgia, serif; font-size: 1.17rem; }

.form-shell {
  border: 1px solid #cbd6f0;
  border-top: 6px solid var(--brand-blue);
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.prelaunch {
  background: #f0f3f9;
  color: var(--brand-blue);
  font-size: 1rem;
  padding: 12px 37px;
  border-bottom: 1px solid #dce4f3;
}
.prelaunch strong { font-weight: 700; letter-spacing: .03em; font-size: .9rem; }
.form-section { padding: 43px 44px 45px; }
.section-kicker { color: var(--brand-blue); font-size: .9rem; letter-spacing: .05em; font-weight: 500; margin-bottom: 17px; }
.section-kicker span {
  background: #eef2fa;
  color: var(--brand-blue);
  border: 1px solid #bdc9e7;
  border-radius: 50%;
  width: 37px;
  height: 37px;
  font-size: 1.17rem;
}
h2 { color: var(--brand-blue); font-weight: 700; font-size: clamp(1.95rem,3vw,2.4rem); line-height: 1.1; margin-bottom: 14px; }
.section-desc { color: #55658e; font-size: 1.11rem; line-height: 1.37; margin-bottom: 26px; }
.fields { gap: 23px 19px; }
label, .field-title { color: var(--brand-blue); font-weight: 500; font-size: 1.04rem; line-height: 1.25; }
.required { color: #a04b25; }
.hint { color: #52648d; font-size: .97rem; }
input, select, textarea {
  color: var(--brand-blue);
  border: 1px solid #a9badb;
  border-radius: 3px;
  font-size: 1.08rem;
  font-weight: 400;
  padding: 10px 13px;
  min-height: 51px;
}
input::placeholder, textarea::placeholder { color: #7989ad; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(22,46,123,.16); }
input[type=file] { font-size: 1rem; }
.viewing { border-left: 3px solid var(--brand-blue); background: #f1f6fa; padding: 22px 24px; border-radius: 0; }
.viewing strong { color: var(--brand-blue); font-size: 1.1rem; font-weight: 700; line-height: 1.28; }
.viewing p { color: #45577c; font-size: 1.03rem; line-height: 1.47; }
.or { color: var(--brand-blue); font-size: .9rem; letter-spacing: .09em; font-weight: 500; }
.or::before, .or::after { background: #b9c7e8; }
.subhead { color: var(--brand-blue); font-weight: 700; font-size: 1.24rem; }
.radio-row { color: #4b5a83; font-size: 1rem; }
.radio-row label { color: #43547b; font-size: 1.03rem; font-weight: 400; }
.radio-row input { accent-color: var(--brand-teal); }
.submit-zone { background: #eff4fa; padding: 37px 44px 42px; }
.button {
  background: var(--brand-blue);
  color: white;
  border: 2px solid var(--brand-blue);
  border-radius: 3px;
  font-family: "Alegreya Sans", Arial, sans-serif;
  font-weight: 700;
  font-size: 1.17rem;
  line-height: 1.1;
  padding: 16px 24px 13px;
}
.button:hover { background: white; border-color: var(--brand-blue); color: var(--brand-blue); }
.button:focus-visible { outline: 3px solid var(--brand-teal); }
.submit-zone p { color: #4a5e82; font-size: .98rem; }
.feedback { font-size: 1.08rem; }
.feedback.success { background: #e9efff; color: var(--brand-blue); border-color: #9bb0e0; }
.feedback.error { background: #fff0e8; color: #913c23; border-color: #dfad95; }
footer { background: var(--brand-blue); color: white; border: 0; font-size: 1rem; padding: 25px 0 28px; }
footer .wrap { align-items: center; }

@media (max-width: 850px) {
  .content-grid { gap: 22px; padding-top: 30px; }
  .callout { background: #ebf0f8; border-left: 3px solid var(--brand-blue); border-top: 0; color: var(--brand-blue); }
  .hero .wrap { padding: 36px 0 41px; }
}
@media (max-width: 620px) {
  body { font-size: 18px; }
  .wrap { width: min(100% - 30px, 1120px); }
  .topbar .wrap { min-height: 61px; padding: 8px 0; }
  .brand img { width: 130px; }
  .topnote { display: none; }
  .hero .wrap { padding: 32px 0 38px; }
  .eyebrow { font-size: .73rem; }
  h1 { font-size: clamp(2.6rem,10vw,3.55rem); line-height: .95; margin-top: 16px; }
  h1 em { font-size: .9em; }
  .hero-intro { font-size: 1.07rem; line-height: 1.38; }
  .aside-picto { margin-bottom: 14px; }
  .aside-picto img { width: 100px; height: 100px; }
  .prelaunch { padding: 14px 22px; font-size: .96rem; }
  .form-section { padding: 33px 22px; }
  .section-kicker { margin-bottom: 15px; font-size: .79rem; }
  .section-kicker span { width: 34px; height: 34px; }
  h2 { font-size: 2.15rem; }
  label { font-size: 1rem; }
  .viewing { padding: 19px; }
  .submit-zone { padding: 30px 22px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; }
}