/* ============================================================
   TERAFOOD CAPITAL — Hero vidéo + surimpression éditoriale
   Référence de placement : capture 2048×1152 — colonne de contenu
   alignée à gauche sur ~61 % de la largeur, logo blanc en haut à
   droite, pétale interactive à gauche du texte d'invitation,
   signature en grand en bas à droite.
   ============================================================ */

:root{
  --tf-noir:#2C2C2A;
  --tf-ocre:#D0A445;
  --tf-sarcelle:#4C8388;
  --tf-corail:#E97752;
  --tf-creme:#FAFAF7;
  --ink:#252821;

  --sans:'Montserrat','Manrope','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(0.22,0.61,0.36,1);

  /* Ombre commune des textes blancs sur la vidéo */
  --shadow-text:
    0 1px 2px rgba(30,32,27,0.55),
    0 4px 12px rgba(30,32,27,0.45),
    0 12px 36px rgba(30,32,27,0.38);

  /* Colonne éditoriale relevée sur le PNG de référence (16:9) :
     bord droit à 95,4 % de la largeur, colonne de 33 % de large —
     le logo, le titre, le filet et la signature partagent ce cadre. */
  --col-right:4.6vw;
  --col-width:33vw;
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--sans);
  background:var(--tf-noir);
  color:#fff;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:focus-visible{
  outline:2px solid var(--tf-ocre);
  outline-offset:3px;
  border-radius:2px;
}

/* ================= CADRE ================= */
.HeroSection{
  position:relative;
  width:100vw;
  min-height:100svh;
  overflow:hidden;
}

.HeroSection-media{
  position:absolute;inset:0;z-index:0;
  background-color:var(--tf-noir);
  background-position:2% 60%;
}

.HeroSection-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* 2 % : ne coupe jamais la mère au bord gauche quand l'écran est
     moins large que 16:9 · 60 % vertical : préserve le cadre bas sur
     les écrans très larges qui rognent en hauteur. */
  object-position:2% 60%;
}

/* ================= SURIMPRESSION ================= */
/* Conteneur commun : tous les blocs partagent le même axe gauche. */
/* Conteneur commun : tous les blocs partagent le même axe gauche. */
.HeroOverlay{
  position:absolute;
  z-index:2;
  right:var(--col-right);
  width:var(--col-width);
  top:0;bottom:0;
  text-align:left;
}

.BrandLogo{
  position:absolute;
  top:7.5%;
  right:0;
  line-height:0;
}
.BrandLogo img{
  width:15.6vw;              /* bord droit à 95,4 %, gauche à 79,8 % — cf. PNG */
  height:auto;
  filter:drop-shadow(0 2px 14px rgba(30,32,27,0.45));
}

.HeroTitle{
  position:absolute;
  top:37%;
  left:0;right:0;
  font-weight:700;
  font-size:2.33vw;
  line-height:1.12;
  letter-spacing:-0.005em;
  color:#fff;
  text-shadow:var(--shadow-text);
}

.HeroRule{
  position:absolute;
  top:55%;
  left:0;
  width:41%;
  height:0.17vw;
  border:none;
  background:#fff;
  box-shadow:0 1px 6px rgba(30,32,27,0.35);
}

/* --- pétale à gauche de la colonne, invitation calée à droite --- */
.Inquiry{
  position:absolute;
  top:59%;
  left:0;right:0;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:1vw;
}

.PetalButton{
  background:none;border:none;
  padding:8px;                        /* zone cliquable généreuse */
  margin-left:-8px;                   /* le bord visuel de la pétale sur l'axe */
  cursor:pointer;
  line-height:0;
  transition:transform 300ms var(--ease),filter 300ms var(--ease);
  filter:drop-shadow(0 2px 10px rgba(30,32,27,0.35));
}
.PetalButton-mark{
  width:7.4vw;
  height:auto;
  display:block;
  overflow:visible;
}
.PetalButton-leaf{
  fill:#fff;
  transition:transform 300ms var(--ease);
  transform-origin:center 85%;
}
.PetalButton:hover,
.PetalButton:focus-visible{
  transform:scale(1.06) rotate(-2deg);
  filter:drop-shadow(0 2px 10px rgba(30,32,27,0.35))
         drop-shadow(0 0 18px rgba(255,255,255,0.55));
}
.PetalButton:hover .PetalButton-leaf--left{transform:rotate(-4deg) translateX(-6px)}
.PetalButton:hover .PetalButton-leaf--right{transform:rotate(4deg) translateX(6px)}
.PetalButton:hover .PetalButton-leaf--mid{transform:translateY(-5px)}
.PetalButton:active{transform:scale(0.98)}

/* Invitation alignée à droite, comme sur le PNG : la seconde ligne
   rentre à gauche, les deux finissent sur le bord droit de la colonne. */
.Inquiry-text{
  font-size:2vw;
  font-weight:500;
  line-height:1.28;
  text-align:right;
  color:#fff;
  text-shadow:var(--shadow-text);
}

/* --- signature --- */
.HeroSignature{
  position:absolute;
  top:78%;
  left:0;right:0;
  font-weight:700;
  font-size:2.8vw;
  line-height:1.12;
  letter-spacing:-0.005em;
  color:#fff;
  text-shadow:var(--shadow-text);
}

/* ================= ANIMATION D'ENTRÉE ================= */
.js .reveal{opacity:0;transform:translateY(14px)}
.js.is-ready .reveal{
  opacity:1;transform:none;
  transition:opacity 650ms var(--ease),transform 650ms var(--ease);
}
.js.is-ready .BrandLogo{transition-delay:0ms}
.js.is-ready .HeroTitle{transition-delay:150ms}
.js.is-ready .HeroRule{transition-delay:260ms}
.js.is-ready .Inquiry{transition-delay:340ms}
.js.is-ready .HeroSignature{transition-delay:460ms}

/* ================= MODALE ================= */
.Modal{position:fixed;inset:0;z-index:50}
.Modal[hidden]{display:none}

.Modal-backdrop{
  position:absolute;inset:0;
  background:rgba(30,32,27,0.62);
  animation:modal-fade 220ms var(--ease);
}

.Modal-panel{
  position:relative;
  max-width:520px;
  margin:clamp(16px,6svh,72px) auto;
  max-height:calc(100svh - 32px);
  overflow-y:auto;
  background:var(--tf-creme);
  color:var(--ink);
  border-radius:8px;
  padding:36px 36px 32px;
  box-shadow:0 24px 80px rgba(30,32,27,0.4);
  animation:modal-rise 260ms var(--ease);
}

@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.Modal-close{
  position:absolute;
  top:14px;right:14px;
  background:none;border:none;cursor:pointer;
  padding:10px;
  color:var(--ink);
  transition:opacity 200ms var(--ease);
}
.Modal-close:hover{opacity:0.6}
.Modal-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

.Modal-title{
  font-size:24px;
  font-weight:800;
  letter-spacing:-0.01em;
  margin-bottom:6px;
}
.Modal-sub{
  font-size:14px;
  color:#5d5e57;
  margin-bottom:24px;
}

/* ================= FORMULAIRE ================= */
.ContactForm-row{margin-bottom:16px}

.ContactForm-row label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:6px;
  color:#4E4F49;
}

.ContactForm-row input,
.ContactForm-row select,
.ContactForm-row textarea{
  width:100%;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  background:#fff;
  border:1px solid #D6D5CD;
  border-radius:5px;
  padding:11px 12px;
  transition:border-color 200ms var(--ease);
}
.ContactForm-row textarea{resize:vertical;min-height:110px}
.ContactForm-row input:focus,
.ContactForm-row select:focus,
.ContactForm-row textarea:focus{
  outline:none;
  border-color:var(--tf-sarcelle);
  box-shadow:0 0 0 3px rgba(76,131,136,0.18);
}
.ContactForm-row .is-invalid{border-color:var(--tf-corail)}

/* Piège anti-spam : hors écran, jamais display:none (les robots vérifient) */
.ContactForm-hp{
  position:absolute;
  left:-9999px;top:-9999px;
  height:1px;width:1px;
  overflow:hidden;
}

.ContactForm-status{
  min-height:20px;
  font-size:14px;
  margin-bottom:14px;
}
.ContactForm-status.is-error{color:#B34A28;font-weight:600}
.ContactForm-status.is-success{color:#2F5B57;font-weight:600}

.ContactForm-submit{
  width:100%;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  color:#fff;
  background:var(--tf-noir);
  border:none;
  border-radius:5px;
  padding:14px 18px;
  cursor:pointer;
  transition:background 200ms var(--ease),transform 120ms var(--ease);
}
.ContactForm-submit:hover{background:#454641}
.ContactForm-submit:active{transform:scale(0.99)}
.ContactForm-submit:disabled{background:#8a8a84;cursor:wait}

/* ================= TABLETTE & MOBILE =================
   Même principe que le desktop : la vidéo occupe tout l'écran,
   aucun bloc de fond. Le logo reste en haut à droite ; les textes
   se posent en bas de l'image, portés par leur ombre. En portrait
   le recadrage est ancré à gauche (6 %) : la mère et la fille
   restent dans le champ pendant tout le travelling, leurs visages
   dans la moitié haute — la pile de textes vit sur le bas du cadre
   (robe, champ), jamais sur eux. */
@media (max-width:1080px){
  /* Montage vertical dédié (1080×1920) : plus aucun recadrage à
     compenser, le cadre est déjà pensé pour le portrait. */
  .HeroSection-video{object-position:center}
  .HeroSection-media{background-position:center}

  .HeroOverlay{
    left:0;right:0;
    width:auto;              /* annule la colonne de 33vw du desktop */
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:0 clamp(20px,5vw,40px) clamp(22px,5svh,44px);
  }

  .BrandLogo{
    top:clamp(14px,3svh,26px);
    right:clamp(16px,4vw,32px);
  }
  .BrandLogo img{width:clamp(112px,24vw,160px)}

  .HeroTitle{
    position:static;
    font-size:clamp(21px,5.6vw,38px);
    line-height:1.3;
  }

  /* Ensemble compact : le filet ne doit pas creuser deux fois
     (au-dessus et en dessous) entre le titre et la pétale. */
  .HeroRule{
    position:static;
    height:3px;              /* le 0.17vw du desktop ferait 0,6 px ici */
    width:clamp(90px,20vw,180px);
    margin:9px 0;
  }

  .Inquiry{
    position:static;
    gap:12px;
    margin-bottom:11px;
  }
  .PetalButton{padding:6px;margin-left:-6px}
  .PetalButton-mark{width:clamp(54px,13vw,86px)}
  /* Sur mobile la colonne est pleine largeur : l'invitation revient
     à gauche, alignée avec le titre et la signature. */
  .Inquiry-text{font-size:clamp(15px,4vw,24px);text-align:left}

  .HeroSignature{
    position:static;
    font-size:clamp(22px,6vw,40px);
  }

  .Modal-panel{
    margin:12px;
    padding:28px 22px 24px;
  }
}

/* ================= 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;
  }
  .js .reveal{opacity:1;transform:none}
  .PetalButton:hover,
  .PetalButton:focus-visible{transform:none}
  .PetalButton:hover .PetalButton-leaf--left,
  .PetalButton:hover .PetalButton-leaf--right,
  .PetalButton:hover .PetalButton-leaf--mid{transform:none}

  .HeroSection-video{display:none}
  .HeroSection-media{
    background-image:url("assets/hero-poster.36216572.jpg");
    background-size:cover;
    background-repeat:no-repeat;
  }
}

@media (prefers-reduced-motion:reduce) and (max-width:1080px){
  /* Poster du montage vertical, cadré comme sa vidéo. */
  .HeroSection-media{
    background-image:url("assets/hero-mobile-poster.6bd43525.jpg");
    background-position:center;
  }
}