/* ===========================================================
   MAIN.CSS — V comme Samedi · page « Prochainement »
   Parti pris : page éditoriale, presque sans image.
   Beaucoup de blanc, des filets fins, la plume en filigrane.
   =========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 300; font-family: var(--font-serif); }
p { margin: 0; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }

::selection { background: var(--beige-pale); color: var(--noir-doux); }

/* Anneau de focus unique pour tout le site — accessibilité clavier */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* ─── Atmosphère : lumière + grain papier ───────────────────────────────
   « des lumières filtrant à travers la fenêtre » : un halo très doux en
   haut à gauche, plus un grain papier léger sur toute la page. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
}
.atmosphere::before {
  content: '';
  position: absolute;
  top: -20vh; left: -10vw;
  width: 80vw; height: 90vh;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(249, 244, 236, 0.55) 35%,
    rgba(250, 248, 245, 0) 68%
  );
}
.atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.032;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ─── Structure ─────────────────────────────────────────────────────────*/
.page {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-px);
}
.container--narrow { max-width: var(--container-narrow); }

/* ─── Éléments typographiques récurrents ────────────────────────────────*/

/* Petites capitales espacées — la signature graphique de la marque */
.eyebrow {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}

/* Filet doré : « filets sous un titre », par petites touches */
.rule {
  width: 44px;
  height: 1px;
  border: 0;
  margin: var(--space-md) 0 0;
  background: var(--accent);
}
.rule--center { margin-inline: auto; }
.rule--hair {
  width: 100%;
  background: var(--filet-fin);
  margin: 0;
}

.script {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: 1.4;
  color: var(--text);
}

/* ─── Boutons ───────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base),
              border-color var(--t-base), transform var(--t-base);
}

/* Bouton principal : beige doré, texte noir — comme spécifié au brief */
.btn--primary {
  background: var(--accent);
  color: var(--noir-doux);
}
.btn--primary:hover {
  background: var(--noir-doux);
  color: var(--blanc-casse);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover {
  border-color: var(--noir-doux);
  background: var(--noir-doux);
  color: var(--blanc-casse);
}

.btn__arrow { transition: transform var(--t-base); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ─── En-tête ───────────────────────────────────────────────────────────*/
.masthead {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: var(--space-lg);
}
.masthead__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.masthead__brand {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.6vw, 20px);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.masthead__baseline {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ─── Hero ──────────────────────────────────────────────────────────────*/
.hero {
  flex: 1;
  padding-block: clamp(24px, 5vw, 64px) var(--section-py);
}
.hero__grid {
  display: grid;
  /* La colonne de droite se dimensionne sur la photo, calée en hauteur
     (voir .hero__img) pour ne jamais dépasser du viewport. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
/* Pas de max-width global ici : le titre a besoin de toute la colonne pour
   que ses retours ligne soient ceux voulus (pre-line), tandis que les
   paragraphes gardent une mesure de lecture confortable. */
.hero__content { min-width: 0; }

.hero__title {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-top: var(--space-lg);
  white-space: pre-line; /* le retour ligne vient de content.json */
  text-wrap: balance;
}
/* Le mot final en italique : une respiration, pas une emphase */
.hero__title em { font-style: italic; color: var(--text); }

.hero__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text);
  margin-top: var(--space-lg);
  max-width: 26em;
}
.hero__body {
  color: var(--text-soft);
  line-height: var(--lh-loose);
  margin-top: var(--space-md);
  max-width: 34em;
}

.hero__quote {
  margin-top: var(--space-xl);
  padding-left: var(--space-md);
  border-left: 1px solid var(--accent);
}
.hero__signature {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--text-soft);
}

/* L'unique photographie de la page : une plume posée sur de la calligraphie.
   Le papier ivoire du cliché est très proche du fond du site, l'image se
   fond donc dans la page au lieu de s'y coller comme une vignette. */
.hero__figure {
  margin: 0;
  justify-self: center;
  width: clamp(190px, 24vw, 300px);
}
.hero__img {
  width: 100%;
  height: clamp(300px, 54vh, 470px);
  object-fit: cover;
  /* Le fichier est déjà recadré sur la plume (680×1060, quasi le même
     rapport que la boîte) : le centrage suffit ici. */
  object-position: center;
  border-radius: var(--radius-md);
  /* Contraste et ombres adoucis : le cliché doit se poser dans la page
     comme une respiration, pas trancher avec elle. */
  filter: saturate(0.94) contrast(0.95) brightness(1.03);
}

/* ─── Bandeau contact ───────────────────────────────────────────────────*/
.invite {
  padding-block: var(--section-py);
  border-top: 1px solid var(--filet-fin);
}
.invite__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  max-width: 16em;
}
.invite__text {
  color: var(--text-soft);
  line-height: var(--lh-loose);
  margin-top: var(--space-sm);
  max-width: 34em;
}
.invite__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.invite__or {
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.invite__or a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.invite__or a:hover { color: var(--text-soft); border-color: var(--text-soft); }

/* ─── Newsletter (bloc lin) ─────────────────────────────────────────────*/
.newsletter { padding-bottom: var(--section-py); }
.newsletter__inner {
  background: var(--bg-bloc);
  border-radius: var(--radius-md);
  padding: clamp(32px, 5vw, 64px);
}
.newsletter__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  max-width: 18em;
}
.newsletter__text {
  color: var(--text-soft);
  font-size: var(--fs-small);
  margin-top: var(--space-xs);
  max-width: 32em;
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.newsletter__field { flex: 1 1 260px; }

/* ─── Champs de formulaire ──────────────────────────────────────────────
   Style « ligne » plutôt que « boîte » : cohérent avec le parti pris de
   lignes fines, et beaucoup plus léger visuellement. */
.field { display: block; }
.field__label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-xs);
}
.field__req { color: var(--accent); }

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: border-color var(--t-fast);
  appearance: none;
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-soft); opacity: 0.6; }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
  border-bottom-width: 1.5px;
}
.field__textarea { resize: vertical; min-height: 116px; }

/* Chevron du select, dessiné en CSS pour éviter une image */
.field__select-wrap { position: relative; }
.field__select-wrap::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid var(--text-soft);
  border-bottom: 1px solid var(--text-soft);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field__select { padding-right: 24px; cursor: pointer; }
/* Tant que rien n'est choisi, « Choisir… » se lit comme un placeholder :
   en gris, à l'image des champs texte. Ces selects n'étant pas obligatoires,
   :invalid ne s'applique pas — d'où le :has(). */
.field__select:has(option[value='']:checked) { color: var(--text-soft); }
.field__select option { color: var(--text); }

.field--error .field__input,
.field--error .field__select,
.field--error .field__textarea { border-bottom-color: #a8564b; }

.field__error {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-micro);
  color: #a8564b;
}

/* Case à cocher personnalisée */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: var(--fs-small);
  color: var(--text-soft);
  line-height: 1.55;
}
.checkbox input {
  appearance: none;
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.checkbox input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.checkbox input:checked::after {
  content: '';
  display: block;
  width: 4px; height: 8px;
  margin: 1.5px auto 0;
  border-right: 1.5px solid var(--noir-doux);
  border-bottom: 1.5px solid var(--noir-doux);
  transform: rotate(45deg);
}

/* Honeypot anti-spam — invisible pour l'humain, rempli par les bots */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ─── Messages de retour ────────────────────────────────────────────────*/
.notice {
  padding: 14px 20px;
  border-left: 2px solid var(--accent);
  background: var(--lin-clair);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text);
}
.notice--error {
  border-left-color: #a8564b;
  background: rgba(168, 86, 75, 0.06);
}

/* ─── Pied de page ──────────────────────────────────────────────────────*/
.footer {
  padding-block: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--filet-fin);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  justify-content: space-between;
  align-items: flex-start;
}
.footer__group { display: flex; flex-direction: column; gap: 6px; }
/* Le dernier groupe (mentions, presse) se cale à droite pour fermer
   proprement la ligne du pied de page. */
.footer__group:last-child { align-items: flex-end; text-align: right; }
.footer__link {
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--t-fast);
}
.footer__link:hover { color: var(--text-soft); }
.footer__meta {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-soft);
}
.footer__press {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-soft);
}
.footer__press::before {
  content: '';
  width: 16px; height: 1px;
  background: var(--accent);
}

/* ─── Panneau formulaire (drawer) ───────────────────────────────────────*/
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(47, 43, 40, 0.32);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
}
.overlay[data-open='true'] { opacity: 1; visibility: visible; }

/* Le panneau s'ouvre soit via :target (lien, fonctionne sans JavaScript),
   soit via data-open posé par le script — les deux mènent au même état. */
.panel {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-panel);
  width: min(600px, 100%);
  height: 100%;
  background: var(--bg);
  box-shadow: var(--shadow-panel);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-base), visibility var(--t-base);
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.panel:target,
.panel[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
}
/* Une fois le script chargé, seul data-open décide : sinon un simple clic
   sur « retour » rouvrirait le panneau via le hash resté dans l'URL. */
.js .panel:target:not([data-open='true']) {
  transform: translateX(100%);
  visibility: hidden;
}

.panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 48px) var(--space-md);
  border-bottom: 1px solid var(--filet-fin);
}
.panel__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.panel__intro {
  color: var(--text-soft);
  font-size: var(--fs-small);
  line-height: var(--lh-loose);
  margin-top: var(--space-xs);
  max-width: 34em;
}
.panel__close {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.panel__close:hover {
  background: var(--noir-doux);
  border-color: var(--noir-doux);
  color: var(--blanc-casse);
}

.panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg) clamp(24px, 4vw, 48px) clamp(32px, 5vw, 56px);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-md);
}
.form__grid > .field--full { grid-column: 1 / -1; }
.form__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* ─── Apparition au chargement ──────────────────────────────────────────
   « Je veux que les visiteurs aient envie de ralentir » : entrée lente,
   en cascade. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: reveal var(--t-slow) forwards;
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}
.reveal[style*='--d'] { animation-delay: var(--d); }

/* ─── Responsive ────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  /* La photo passe au-dessus du texte, en bandeau court. Sur un écran de
     téléphone elle ne doit pas repousser le titre sous la ligne de
     flottaison : c'est le message qui accueille, pas l'image. */
  .hero__figure {
    order: -1;
    width: 100%;
  }
  /* En bandeau large, on recentre vers le haut du cliché : c'est là que se
     trouve la plume. */
  .hero__img {
    height: clamp(150px, 22vh, 210px);
    object-position: center 28%;
  }
  .form__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .masthead__inner { flex-direction: column; gap: 6px; align-items: flex-start; }
  .newsletter__form { align-items: stretch; }
  .newsletter__form .btn { justify-content: center; }
  .footer__inner { flex-direction: column; gap: var(--space-md); }
  /* En colonne, tout repasse à gauche */
  .footer__group:last-child { align-items: flex-start; text-align: left; }
  .panel { width: 100%; }
}

/* ─── Accessibilité : mouvement réduit ──────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─── Impression ────────────────────────────────────────────────────────*/
@media print {
  .atmosphere, .overlay, .panel { display: none !important; }
  body { background: #fff; }
}