/* =========================================================================
   Tayella — site de présentation.
   Même charte que l'application : rose poudré, blanc crème, touches dorées.
   ======================================================================= */

:root{
  --rose:        #d4738f;
  --rose-fonce:  #b5486a;
  --rose-nuit:   #7d2f49;
  --rose-clair:  #fbeef3;
  --rose-pale:   #f6dde6;
  --or:          #c9a227;
  --or-clair:    #f7eed6;
  --creme:       #fffaf8;
  --texte:       #3d2f36;
  --texte-doux:  #8a7681;
  --bordure:     #f2e2e9;
  --ombre:       0 4px 20px rgba(181,72,106,.10);
  --ombre-forte: 0 18px 50px rgba(181,72,106,.22);
  --police:      'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --titre:       Georgia, 'Times New Roman', serif;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--police); color:var(--texte); background:var(--creme);
  line-height:1.65; font-size:16.5px; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:var(--titre); font-weight:normal; line-height:1.25 }
img{ display:block; max-width:100% }
a{ color:var(--rose-fonce); text-decoration:none }
em{ font-style:italic }

.dedans{ max-width:1120px; margin:0 auto; padding:76px 22px }
.etroit{ max-width:660px; margin-inline:auto }
.centre{ text-align:center }

/* ------------------------------- En-tête -------------------------------- */
.entete{
  position:sticky; top:0; z-index:50;
  background:rgba(255,250,248,.94); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bordure);
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:12px 22px;
}
.logo{ display:flex; align-items:center; gap:9px; color:inherit }
.logo .fleur{ font-size:25px }
.logo b{ font-family:var(--titre); font-weight:normal; font-size:23px; color:var(--rose-fonce); display:block; line-height:1.05 }
.logo small{ font-size:9.5px; letter-spacing:2.2px; text-transform:uppercase; color:var(--or); display:block }
.entete nav{ display:flex; align-items:center; gap:24px }
.entete nav a{ font-size:14.5px; color:var(--texte-doux) }
.entete nav a:hover{ color:var(--rose-fonce) }

/* -------------------------------- Boutons ------------------------------- */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--rose); color:#fff; font-weight:600; font-size:16px;
  padding:15px 30px; border-radius:34px; box-shadow:var(--ombre);
  transition:background .18s, transform .15s, box-shadow .18s;
}
.bouton:hover{ background:var(--rose-fonce); transform:translateY(-2px); box-shadow:var(--ombre-forte) }
.bouton.petit{ padding:9px 20px; font-size:14.5px; box-shadow:none }
.bouton.gros{ font-size:18px; padding:19px 42px; margin-top:10px }
.bouton.fantome{ background:#fff; color:var(--rose-fonce); border:1.5px solid var(--rose-pale); box-shadow:none }
.bouton.fantome:hover{ background:var(--rose-clair) }

/* --------------------------------- Héro --------------------------------- */
.hero{
  max-width:1120px; margin:0 auto; padding:64px 22px 40px;
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
}
.sur-titre{
  font-size:12.5px; letter-spacing:2.4px; text-transform:uppercase;
  color:var(--or); font-weight:700; margin-bottom:14px;
}
.hero h1{ font-size:54px; color:var(--rose-fonce); margin-bottom:20px }
.chapo{ font-size:19px; color:var(--texte-doux); max-width:540px }
.chapo strong{ color:var(--texte) }
.puces{ display:flex; flex-wrap:wrap; gap:9px; margin:26px 0 30px }
.puce{
  background:#fff; border:1.5px solid var(--or); color:#8a6d12;
  padding:7px 16px; border-radius:24px; font-size:13.5px; font-weight:600;
}
.actions{ display:flex; flex-wrap:wrap; gap:13px }
.mention{ font-size:13.5px; color:var(--texte-doux); margin-top:16px }

/* --------------------------- Cadres de téléphone ------------------------ */
.telephone{
  border:9px solid #40323a; border-radius:32px; overflow:hidden;
  background:#40323a; box-shadow:var(--ombre-forte); position:relative;
  max-width:300px;
}
.telephone img{ width:100%; display:block; border-radius:23px }
/* L'encoche : un détail, mais sans elle les captures ne ressemblent pas
   à un téléphone et le site fait « capture d'écran collée ». */
.telephone::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:96px; height:17px; background:#40323a; border-radius:0 0 13px 13px; z-index:2;
}
.hero-images{ position:relative; display:flex; justify-content:center; min-height:560px }
.telephone.grand{ max-width:288px; z-index:2 }
.telephone.petit{
  max-width:216px; position:absolute; right:8px; bottom:6px; z-index:1;
  transform:rotate(6deg); opacity:.97;
}

/* -------------------------------- Bandes -------------------------------- */
.bande{ background:linear-gradient(180deg,var(--rose-clair),#fff) }
.bande.or{ background:linear-gradient(180deg,var(--or-clair),#fff) }
.titre-section{ font-size:37px; color:var(--rose-fonce); text-align:center; margin-bottom:18px }
.grand-texte{ font-size:19.5px; color:var(--texte-doux) }
.grand-texte em{ color:var(--rose-fonce); font-style:italic }

/* ---------------------------- Blocs alternés ---------------------------- */
.bloc-double{
  display:grid; grid-template-columns:1fr 300px; gap:56px;
  align-items:center; margin-top:62px;
}
.bloc-double.inverse{ grid-template-columns:300px 1fr }
.bloc-double.inverse .bloc-texte{ order:2 }
.bloc-double.inverse .telephone{ order:1 }
.bloc-texte h3{ font-size:26px; color:var(--rose-fonce); margin-bottom:10px }
.bloc-texte h3:not(:first-child){ margin-top:30px }
.bloc-texte p{ color:var(--texte-doux) }
.bloc-texte strong{ color:var(--texte) }

/* -------------------------------- Charte -------------------------------- */
.grille-charte{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:22px; margin-top:42px;
}
.carte-charte{
  background:#fff; border:1px solid var(--bordure); border-radius:22px;
  padding:30px 26px; box-shadow:var(--ombre);
}
.carte-charte .e{ font-size:34px; display:block; margin-bottom:12px }
.carte-charte h3{ font-size:21px; color:var(--rose-fonce); margin-bottom:8px }
.carte-charte p{ font-size:15px; color:var(--texte-doux) }

/* ------------------------------- Cuisines ------------------------------- */
.grille-cuisines{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:18px; margin:42px 0;
}
.cuisine{
  background:#fff; border:1px solid var(--bordure); border-radius:20px;
  padding:24px; text-align:center; box-shadow:var(--ombre);
  transition:transform .18s;
}
.cuisine:hover{ transform:translateY(-4px) }
.cuisine .e{ font-size:32px; display:block; margin-bottom:8px }
.cuisine b{ display:block; font-family:var(--titre); font-weight:normal; font-size:20px; color:var(--rose-fonce); margin-bottom:6px }
.cuisine span:last-child{ font-size:14px; color:var(--texte-doux); display:block }

.encart-conseil{
  background:linear-gradient(135deg,var(--or-clair),#fff);
  border:1px solid var(--or); border-left:5px solid var(--or);
  border-radius:20px; padding:28px 32px; max-width:820px; margin:0 auto;
}
.encart-conseil strong{ color:#8a6d12; display:block; margin-bottom:8px; font-size:14px; letter-spacing:.6px }
.encart-conseil p{ color:var(--texte-doux) }

/* --------------------------------- Trio --------------------------------- */
.trio{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:34px; margin-top:46px; justify-items:center;
}
.trio figure{ text-align:center }
.trio figcaption{ margin-top:16px; font-size:15.5px; color:var(--texte-doux); font-weight:600 }
.trio .telephone{ max-width:238px }

/* ----------------------------- Installation ----------------------------- */
.etapes-install{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr));
  gap:20px; margin-top:52px; text-align:start;
}
.etapes-install > div{
  background:#fff; border:1px solid var(--bordure); border-radius:18px; padding:24px;
}
.etapes-install .n{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--rose-clair); color:var(--rose-fonce);
  font-family:var(--titre); font-size:17px; margin-bottom:12px;
}
.etapes-install p{ font-size:14.5px; color:var(--texte-doux) }

/* ---------------------------------- Pied -------------------------------- */
footer{ background:var(--rose-nuit); color:#f6dde6; margin-top:40px }
footer .pied{
  display:grid; grid-template-columns:1.4fr 1fr; gap:44px; padding-block:56px 34px;
}
footer .logo b{ color:#fff }
footer .logo small{ color:var(--or-clair) }
footer h4{ font-size:18px; color:#fff; margin-bottom:10px }
footer .mention{ color:#e6c3d2; font-size:13.5px }
.copyright{
  text-align:center; padding:20px; font-size:13px; color:#d9a8bd;
  border-top:1px solid rgba(255,255,255,.12);
}

/* ------------------------------- Téléphone ------------------------------ */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:38px; padding-top:44px; text-align:center }
  .hero h1{ font-size:38px }
  .chapo{ margin-inline:auto }
  .puces, .actions{ justify-content:center }
  .hero-images{ min-height:480px }
  .telephone.petit{ right:2%; bottom:0 }
  .bloc-double, .bloc-double.inverse{ grid-template-columns:1fr; gap:28px; justify-items:center; text-align:center }
  .bloc-double.inverse .bloc-texte, .bloc-double.inverse .telephone{ order:unset }
  .bloc-double .telephone{ order:2 }
  .titre-section{ font-size:29px }
  .dedans{ padding-block:52px }
  footer .pied{ grid-template-columns:1fr; gap:28px }
  .entete nav a:not(.bouton){ display:none }
}
@media (max-width:520px){
  body{ font-size:16px }
  .hero h1{ font-size:31px }
  .chapo{ font-size:17px }
  .grand-texte{ font-size:17.5px }
  .telephone.petit{ display:none }
  .hero-images{ min-height:auto }
  .bouton.gros{ font-size:16.5px; padding:17px 28px; width:100% }
  .encart-conseil{ padding:22px }
}