/* =====================================================================
   La Maison Rose — refonte chaleureuse (oct. 2026)
   À charger APRÈS site.css (et après application.css sur la page candidature)
   sur TOUTES les pages : <link rel="stylesheet" href="assets/refonte-chaleureuse.css?v=20261027" />
   ===================================================================== */

/* ---------- 1. Palette chaude & grain papier ---------- */
:root{
  --creme:#f6ece1;
  --poudre:#efd9cf;
  --terre:#b4614b;
  --terre-fonce:#8f4433;
  --encre:#2b2321;
  --filet:rgba(90,50,40,.18);
}
body{background:var(--creme)}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce){ body::after{display:none} }

/* ---------- 2. Haut de page (hero) — nouveau gabarit unique ---------- */
.mr-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);height:clamp(520px,64vh,620px);background:var(--poudre)}
.mr-hero-copy{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:40px clamp(28px,4.5vw,80px)}
.mr-hero-copy h1{font-size:clamp(3rem,5vw,4.9rem);line-height:.95;max-width:12ch;margin:0}
.mr-hero-copy .lede,.mr-hero-copy .hero-lede{max-width:44ch;margin:0}
.mr-hero-copy .crumbs{margin:0;font-size:.72rem}
.mr-hero-copy .cta-row{margin:6px 0 0}
.mr-hero-photo{position:relative;margin:0;overflow:hidden;background:var(--terre-fonce)}
.mr-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.12) contrast(1.04) sepia(.07);border-radius:0;box-shadow:none}
.mr-hero-photo figcaption{position:absolute;right:18px;bottom:14px;color:#fff;font-size:.72rem;letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.55)}

/* Accueil : la façade en entier. Desktop : texte à gauche, photo à droite à son format, sans recadrage. */
.mr-hero--overlay h1 .it{font-style:italic;color:var(--terre)}
@media (min-width:1024px){
  .mr-hero--overlay{grid-template-columns:minmax(0,1fr) auto;height:clamp(560px,82vh,760px)}
  .mr-hero--overlay .mr-hero-photo{height:100%;aspect-ratio:1671/1800}
}
@media (min-width:768px) and (max-width:1023.98px){
  .mr-hero--overlay{grid-template-columns:minmax(0,1fr);height:auto}
  .mr-hero--overlay .mr-hero-photo{order:-1;justify-self:center;width:min(100%,calc(75vh * 1671 / 1800));aspect-ratio:1671/1800}
}

@media (max-width:767.98px){
  .mr-hero{grid-template-columns:1fr;height:auto}
  .mr-hero-photo{order:-1;height:46svh;min-height:300px}
  .mr-hero-copy{padding:22px 20px 30px;gap:14px}
  .mr-hero-copy h1{font-size:clamp(2.5rem,10.5vw,3.2rem);max-width:none}
  /* accueil mobile : photo puis texte (pas de texte sur la photo) */
  .mr-hero--overlay{display:grid;height:auto}
  .mr-hero--overlay .mr-hero-photo{position:relative;inset:auto;height:56svh;min-height:320px}
  .mr-hero--overlay .mr-hero-photo::after{background:none}
  .mr-hero--overlay .mr-hero-copy{color:inherit;padding:22px 20px 30px;max-width:none}
  .mr-hero--overlay h1{color:var(--encre)}
  .mr-hero--overlay h1 .it{color:var(--terre)}
  .mr-hero--overlay .hero-lede{color:inherit}
  .mr-hero--overlay .btn-primary{background:var(--encre);color:#fff;border-color:var(--encre)}
  .mr-hero--overlay .btn-ghost{color:var(--encre);border-color:var(--encre)}
  .mr-hero--overlay .cta-row{display:flex;flex-direction:column;gap:10px}
}

/* ---------- 3. Titres : fin de la formule "mot en italique terracotta" ---------- */
/* Filet de sécurité : les <em>/.it doivent aussi être retirés du HTML (voir brief §3). */
h2 em,h2 .it,h3 em,h3 .it{font-style:normal;color:inherit}

/* ---------- 4. Alternance de fonds chauds ---------- */
.headline{background:var(--poudre);max-width:none;padding-inline:max(24px,calc((100vw - 1200px)/2))}
.history{background:var(--poudre)}
.teasers{background:var(--terre);color:#fbefe6}
.teasers h2,.teasers h3,.teasers p,.teasers .more{color:#fbefe6}
.teasers .teaser{background:transparent;border:0;border-top:1px solid rgba(251,239,230,.45);border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
.teasers .more{border-color:rgba(251,239,230,.7)}
.apply-home-banner{border-color:var(--filet)}

/* ---------- 5. Cuvette de taille-douce (affiches, estampes, photos d'archives) ---------- */
.mr-cuvette{background:#fbf6ee;padding:clamp(18px,2.4vw,34px);border:0;border-radius:0;
  box-shadow:0 1px 0 rgba(90,50,40,.08),0 18px 40px -28px rgba(60,35,28,.45)}
.mr-cuvette img{border-radius:0;box-shadow:0 0 0 10px #fbf6ee,0 0 0 11px rgba(110,70,55,.22),1px 1px 0 11px rgba(255,255,255,.9),-1px -1px 3px 11px rgba(110,70,55,.14)}

/* ---------- 6. Composition moins "cubique" (Le lieu) ---------- */
.place-preview-grid{gap:18px;align-items:start}
.place-shot,.place-shot img{border-radius:0;box-shadow:none}
.place-shot--stack{margin-top:64px}
.place-shot--stack-top{transform:translateX(-36px);position:relative;z-index:2;box-shadow:0 0 0 10px var(--creme)}
.place-shot--stack-bottom{margin-top:-22px}
@media (max-width:767.98px){
  .place-shot--stack{margin-top:0}
  .place-shot--stack-top{transform:none}
  .headline{padding-inline:20px}
}

/* ---------- 7. Correctifs mobile (titres/paragraphes écrasés) ---------- */
@media (max-width:767.98px){
  .page-hero h1,.join-head h1,.info-block h2,.manifesto h2,.manifesto-quote p{max-width:none}
}

/* ---------- 8. Formulaire candidature : champs qui débordaient sous 380 px ---------- */
#applicationForm,.apply-fields{grid-template-columns:minmax(0,1fr)}
#applicationForm > *,.apply-fields > *,#applicationForm label{min-width:0}
#applicationForm input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]){min-width:0;max-width:100%}
.apply-submit{white-space:normal;text-align:center}
@media (min-width:700px){.apply-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 9. Animations : une seule apparition, rapide ---------- */
.reveal{opacity:1;transform:none}
.reveal.d2,.reveal.d3,.reveal.d4{transition-delay:0s}
@media (prefers-reduced-motion:no-preference){
  h2.mr-fade{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
  h2.mr-fade.in{opacity:1;transform:none}
}