/* =========================================================
   Rudy Cavalier — site une page
   Maquette retenue : « 1b — Encre ». Tokens issus du handoff.
   Mobile first (390 px). Rayon 0 partout, aucune ombre.
   ========================================================= */

:root{
  --encre:        #1F2430;
  --corail:       #E0473A;   /* couleur de marque : aplats, boutons, pied de page */
  --corail-fonce: #C63C2E;   /* survol des aplats */
  --corail-lis:   #EE5F50;   /* petits textes corail sur fond encre (lisibilité) */
  --corail-lis-s: #F5776A;   /* survol de ces mêmes textes */
  --papier:       #F3F2F2;
  --gris-2:       #C7CAD1;
  --gris-3:       #A9ADB6;
  --gris-off:     #8A8F99;
  --filet:        #3A4050;
  --bord-champ:   #5A6070;
  --img-attente:  #2B3040;

  --marge: 20px;
}

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

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

body{
  margin:0;
  background:var(--encre);
  color:var(--papier);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.45;
  text-align:left;
  padding-bottom:env(safe-area-inset-bottom,0px);
}

[hidden]{ display:none !important; }

img{ display:block; max-width:100%; }
ul{ margin:0; padding:0; list-style:none; }

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--corail-lis);
  outline-offset:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.hp{ position:absolute; left:-9999px; }

/* ---------------------------- éléments communs ---------------------------- */

.eyebrow{
  margin:0;
  font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--corail-lis);
}

.line-en{
  margin:0;
  font-size:15px; font-weight:400;
  color:var(--gris-3);
}

.btn{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  width:100%;
  padding:17px 18px;
  border:0; border-radius:0;
  font-family:inherit; font-size:16px; font-weight:800;
  text-align:left; text-decoration:none;
  cursor:pointer;
  transition:background-color .15s linear, color .15s linear;
}
.btn__arrow{ font-weight:700; }

.btn--coral{ background:var(--corail); color:var(--encre); }
.btn--coral:hover{ background:var(--corail-fonce); }

.btn--outline{
  background:transparent; color:var(--papier);
  border:2px solid var(--papier);
  font-weight:700;
}
.btn--outline:hover{ background:var(--papier); color:var(--encre); }

/* ------------------------------- 1. HERO -------------------------------- */

.hero{
  position:relative;
  height:680px;
  overflow:hidden;
  background:var(--img-attente);
}

.hero__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
}

.hero__scrim{
  position:absolute; left:0; right:0; bottom:0;
  height:62%;
  background:linear-gradient(to top,#1F2430 38%,rgba(31,36,48,0));
}

.hero__bar{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:calc(18px + env(safe-area-inset-top,0px)) var(--marge) 18px;
}

.hero__logo{ height:20px; width:auto; }

.lang{
  display:flex; align-items:center; gap:8px;
  background:var(--encre);
  padding:6px 8px;
}
.lang__item{
  font-size:13px; font-weight:700; letter-spacing:.08em;
  color:var(--gris-off); text-decoration:none;
}
.lang__item.is-active{ color:var(--papier); }

.hero__content{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:14px;
  padding:0 var(--marge) 28px;
}

.hero__title{
  margin:0;
  font-size:42px; font-weight:800;
  line-height:1; letter-spacing:-.03em;
}

/* --------------------------- 2. BANDE PRESSE ---------------------------- */

.press{
  border-top:2px solid var(--filet);
  padding:24px var(--marge);
  display:flex; flex-direction:column; gap:10px;
}

.press__label{
  margin:0;
  font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--gris-3);
}

.press__list{
  display:flex; flex-wrap:wrap; gap:8px 22px;
  font-size:22px; font-weight:800; letter-spacing:-.02em;
}

.press__note{
  margin:0;
  font-size:14px; color:var(--gris-2);
}

/* ----------------------------- 3. APPROCHE ------------------------------ */

.approach{
  border-top:2px solid var(--filet);
  padding:40px var(--marge);
}

.approach__inner{
  display:flex; flex-direction:column; gap:14px;
  align-items:flex-start;
}

.approach__title{
  margin:0;
  font-size:28px; font-weight:800;
  line-height:1.05; letter-spacing:-.025em;
}

.approach__body{
  margin:0;
  font-size:17px; line-height:1.55;
  color:var(--papier);
  max-width:52ch;
}

.approach__close{
  margin:0;
  font-size:17px; font-weight:800;
  color:var(--corail-lis);
}

/* ---------------------------- 4. RÉSERVATION ---------------------------- */

.booking{
  border-top:2px solid var(--filet);
  padding:40px var(--marge);
}

.booking__inner{
  display:flex; flex-direction:column; gap:20px;
}

.booking__head{
  display:grid; grid-template-columns:148px 1fr;
  gap:18px; align-items:end;
}

.booking__portrait{
  width:148px; height:258px;
  object-fit:cover;
  border:2px solid var(--filet);
  background:var(--img-attente);
}

.booking__intro{
  display:flex; flex-direction:column; gap:8px;
}

.booking__title{
  margin:0;
  font-size:28px; font-weight:800;
  line-height:1.05; letter-spacing:-.025em;
}

.booking__form-wrap{
  border-top:2px solid var(--filet);
  padding-top:22px;
}

.form{
  display:flex; flex-direction:column; gap:16px;
  margin:0;
}

.form__intro{
  margin:0;
  font-size:15px; color:var(--gris-2);
}

/* pastilles de service */
.chips{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:0; padding:0; border:0;
}
.chip{ display:inline-flex; }
.chip input{
  position:absolute; opacity:0;
  width:1px; height:1px;
}
.chip span{
  display:inline-flex; align-items:center;
  min-height:44px;
  padding:11px 14px;
  border:2px solid var(--bord-champ);
  background:transparent;
  color:var(--papier);
  font-size:15px; font-weight:600;
  cursor:pointer;
  transition:background-color .15s linear, color .15s linear, border-color .15s linear;
}
.chip input:checked + span{
  background:var(--corail);
  border-color:var(--corail);
  color:var(--encre);
}
.chip input:focus-visible + span{
  outline:2px solid var(--corail-lis);
  outline-offset:2px;
}

/* champs soulignés */
.field{ display:flex; flex-direction:column; }

.input{
  width:100%;
  padding:14px 0;
  border:0; border-bottom:2px solid var(--bord-champ);
  border-radius:0;
  background:transparent;
  color:var(--papier);
  font-family:inherit; font-size:16px; font-weight:400;
  transition:border-color .15s linear;
}
.input::placeholder{ color:var(--gris-off); opacity:1; }
.input:focus{ outline:none; border-bottom-color:var(--corail-lis); }
.input:focus-visible{ outline:none; }

.input--area{
  resize:vertical;
  min-height:60px;
  line-height:1.45;
}

.error{
  margin:6px 0 0;
  font-size:14px; color:var(--corail-lis);
  min-height:0;
}
/* le lien de repli dans le message d'erreur hérite du corail lisible */
.error a{ color:inherit; text-underline-offset:3px; }
.error:empty{ display:none; }

.input[aria-invalid="true"]{ border-bottom-color:var(--corail-lis); }

/* état envoyé */
.booking__form-wrap .form,
.booking__form-wrap .sent{ transition:opacity .2s linear; }
.is-fading{ opacity:0; }

.sent{
  border:2px solid var(--corail);
  padding:20px;
  display:flex; flex-direction:column; gap:8px;
  align-items:flex-start;
}
.sent__title{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.sent__note{ margin:0; font-size:15px; color:var(--gris-2); }
.sent__again{
  margin:0; padding:0;
  border:0; background:none;
  color:var(--corail-lis);
  font-family:inherit; font-size:15px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}

/* ----------------------------- 5. INSTAGRAM ----------------------------- */

.ig{ border-top:2px solid var(--filet); }

.ig__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px;
  padding:32px var(--marge) 18px;
}

.ig__title{
  margin:0;
  font-size:26px; font-weight:800;
  line-height:1.05; letter-spacing:-.025em;
}

.ig__follow{
  color:var(--corail-lis);
  font-size:15px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  white-space:nowrap;
}
.ig__follow:hover{ color:var(--corail-lis-s); }

.ig__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px;
}
.ig__grid a{ display:block; }
.ig__grid img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  background:var(--img-attente);
}

/* --------------------------- 6. PIED DE PAGE ---------------------------- */

.foot{
  background:var(--corail);
  color:var(--encre);
  padding:26px var(--marge);
}

.foot__inner{
  display:flex; flex-direction:column; gap:12px;
  align-items:flex-start;
}

/* Provisoire : le logotype blanc rendu en noir.
   À remplacer par la version noire officielle dès qu'elle est fournie. */
.foot__logo{
  height:18px; width:auto;
  filter:brightness(0);
}

.foot__text{
  margin:0;
  font-size:14px; font-weight:500; line-height:1.55;
}

/* ============================== BUREAU ================================== */

@media (min-width:900px){
  :root{ --marge:48px; }

  .hero{
    height:auto;
    min-height:100svh;
    max-height:900px;
    display:grid;
    grid-template-columns:45% 55%;
    background:var(--encre);
  }

  .hero__photo{
    position:static;
    grid-column:2;
    width:100%; height:100%;
    max-height:900px;
  }

  .hero__scrim{ display:none; }

  .hero__bar{
    padding:28px var(--marge);
  }
  .hero__logo{ height:24px; }

  .hero__content{
    position:static;
    grid-column:1; grid-row:1;
    justify-content:flex-end;
    gap:18px;
    padding:0 40px 56px var(--marge);
    max-width:none;
  }

  .hero__title{
    font-size:clamp(64px,5.6vw,88px);
    max-width:14ch;
    letter-spacing:-.035em;
  }
  .line-en{ font-size:16px; }

  .hero__content .btn{ width:auto; min-width:320px; }

  .press,
  .booking,
  .ig__head{
    max-width:1200px;
    margin-inline:auto;
    width:100%;
  }

  .press{ padding:28px var(--marge); }
  .press__list{ font-size:26px; gap:8px 32px; }

  .approach{
    padding:64px var(--marge);
    max-width:1200px;
    margin-inline:auto;
    width:100%;
  }
  .approach__inner{ gap:18px; }
  .approach__title{ font-size:36px; max-width:18ch; }
  .approach__body{ font-size:19px; max-width:56ch; }
  .approach__close{ font-size:19px; }

  .booking{ padding:64px var(--marge); }

  .booking__inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:start;
  }

  .booking__head{ grid-column:1; }

  .booking__inner > .btn{
    grid-column:1;
    align-self:start;
  }

  .booking__form-wrap{
    grid-column:2; grid-row:1 / span 2;
    border-top:0;
    padding-top:0;
  }

  .booking__title{ font-size:36px; }

  .booking__head{ grid-template-columns:200px 1fr; gap:24px; }
  .booking__portrait{ width:200px; height:348px; }

  .ig__head{ padding:56px var(--marge) 22px; }
  .ig__title{ font-size:32px; }

  /* la grille s'aligne sur la même colonne de 1200 px que son en-tête */
  .ig__grid{
    max-width:1200px;
    margin-inline:auto;
    padding-inline:var(--marge);
  }

  .foot{ padding:32px var(--marge); }
  .foot__inner{ max-width:1200px; margin-inline:auto; }
  .foot__logo{ height:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}