/*
Theme Name: Murmure
Theme URI: https://murmure-var.fr
Author: Murmure Communication
Description: Thème sur mesure pour Murmure, communication et réseaux sociaux dans le Var.
Version: 1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: murmure
*/

/* ============ TOKENS ============ */
:root{
  --fond:#FFEFE5;
  --encre:#111111;
  --encre-douce:#3A342E;
  --gris:#7A6A5E;
  --or:#E2B857;
  --or-fonce:#8A6D1F;
  --terracotta:#E4B49C;
  --sauge:#80845C;
  --blanc:#FFFFFF;
  --fond-2:#F6E2D5;
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', 'Trebuchet MS', sans-serif;
  --gouttiere:clamp(20px, 5.5vw, 80px);
  --large:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.14}
h3{font-weight:500}
p{margin:0}
:focus-visible{outline:2px solid var(--or-fonce);outline-offset:3px}

.wrap{max-width:var(--large);margin:0 auto;padding-left:var(--gouttiere);padding-right:var(--gouttiere)}
.plein{max-width:var(--large);margin:0 auto}

/* ============ MOTIFS ============ */
.surtitre{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.surtitre::before{content:"";width:34px;height:1px;background:var(--or);flex-shrink:0}
.surtitre--clair{color:rgba(255,255,255,.78)}
.surtitre--clair::before{background:#fff}
.surtitre--or{color:var(--or-fonce)}

.u{background-image:linear-gradient(var(--or),var(--or));background-repeat:no-repeat;background-position:0 92%;background-size:100% .30em}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--encre);color:var(--fond);padding:17px 34px;border-radius:2px;
  font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(17,17,17,.18)}
.btn--clair{background:#fff;color:var(--encre)}
.btn--contour{background:transparent;color:var(--encre);border:1px solid rgba(17,17,17,.30)}
.btn--contour:hover{background:var(--encre);color:var(--fond)}
.btn--bloc{display:flex;width:100%}
.lien-fleche{display:inline-flex;align-items:center;gap:9px;font-size:15px;border-bottom:1px solid rgba(17,17,17,.25);padding-bottom:3px}
.lien-fleche:hover{color:var(--or-fonce)}

.carte{background:var(--blanc);padding:34px;border-radius:3px;display:flex;flex-direction:column;gap:14px}
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

/* ============ EN-TÊTE ============ */
.entete{border-bottom:1px solid rgba(17,17,17,.10);background:var(--fond);position:sticky;top:0;z-index:50}
.entete__in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px}
.entete__logo img{width:176px}
.nav{display:flex;align-items:center;gap:38px;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.nav a:hover{color:var(--or-fonce)}
.nav .btn{padding:13px 26px;text-transform:uppercase}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--encre)}

/* ============ HÉROS ============ */
.heros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.heros__texte{display:flex;flex-direction:column;justify-content:center;gap:30px;padding:clamp(48px,7vw,96px) clamp(20px,5vw,72px) clamp(48px,7vw,96px) var(--gouttiere)}
.heros__texte h1{font-size:clamp(38px,5vw,68px);line-height:1.06;letter-spacing:-.015em}
.heros__chapo{font-size:19px;line-height:1.7;max-width:30em;color:var(--encre-douce)}
.heros__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:8px}
.heros__avis{display:flex;align-items:center;gap:10px;padding-top:14px;font-size:15px;color:var(--gris)}
.heros__photo{position:relative;min-height:620px;overflow:hidden;background:var(--terracotta)}
.heros__photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* ============ SECTIONS ============ */
.section{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(56px,7vw,92px)}
.section--filet{border-top:1px solid rgba(17,17,17,.10)}
.section--noire{background:var(--fond-2);color:var(--encre)}
.section--terracotta{background:var(--terracotta)}
.section h2{font-size:clamp(30px,3.4vw,44px)}

.constat__titre{margin-bottom:12px;max-width:18em}
.constat__chapo{max-width:44em;color:var(--encre-douce);margin-bottom:54px}
.carte h3{font-size:25px}
.carte p{font-size:16px;color:var(--encre-douce)}

/* ============ FORMULES ============ */
.formules__tete{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:52px;flex-wrap:wrap}
.formules__tete>div{display:flex;flex-direction:column;gap:12px}
.formules__note{font-size:15px;color:var(--gris);max-width:25em;text-align:right}
.formules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.formule{display:flex;flex-direction:column;gap:22px;padding:40px 34px;background:var(--blanc);border:1px solid rgba(17,17,17,.10);border-radius:3px;position:relative}
.formule--vedette{background:var(--blanc);color:var(--encre);border:1px solid var(--or);box-shadow:0 12px 34px rgba(17,17,17,.08)}
.formule h3{font-size:29px}
.formule__prix{display:flex;align-items:baseline;gap:8px}
.formule__prix b{font-family:var(--serif);font-size:52px;font-weight:400;line-height:1}
.formule__prix span{font-size:16px;color:var(--gris)}
.formule--vedette .formule__prix span{color:var(--gris)}
.formule__accroche{font-size:15px;color:var(--gris)}
.formule--vedette .formule__accroche{color:var(--gris)}
.formule__filet{height:1px;background:rgba(17,17,17,.12)}
.formule--vedette .formule__filet{background:rgba(17,17,17,.14)}
.formule ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;font-size:16px}
.formule li{display:flex;gap:12px;align-items:flex-start}
.formule li svg{flex-shrink:0;margin-top:4px}
.formule .btn{margin-top:auto;padding:14px;font-size:14px}
.etiquette{position:absolute;top:-13px;left:34px;background:var(--or);color:var(--encre);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:2px}
.tournage{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:26px;padding:26px 34px;background:var(--blanc);border:1px solid rgba(17,17,17,.10);border-radius:3px;flex-wrap:wrap}
.tournage__g{display:flex;align-items:center;gap:16px}
.tournage__t{font-family:var(--serif);font-size:23px;color:var(--encre)}
.tournage__s{font-size:15px;color:var(--gris)}
.tournage__p{font-family:var(--serif);font-size:34px;white-space:nowrap}

/* ============ VITICOLE ============ */
.viticole{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--sauge);color:#fff}
.viticole__photo{min-height:520px;overflow:hidden}
.viticole__photo img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.viticole__texte{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(48px,7vw,88px) var(--gouttiere) clamp(48px,7vw,88px) clamp(20px,5vw,72px)}
.viticole__texte h2{font-size:clamp(30px,3.4vw,44px)}
.viticole__texte p{font-size:18px;line-height:1.7;color:rgba(255,255,255,.92)}
.viticole__texte p.petit{font-size:15px;color:rgba(255,255,255,.74)}

/* ============ PREUVES ============ */
.avis{display:flex;flex-direction:column;gap:20px;background:var(--blanc);padding:40px;border-radius:3px}
.etoiles{display:flex;gap:4px}
.avis blockquote{margin:0;font-family:var(--serif);font-size:24px;font-style:italic;font-weight:300;line-height:1.5}
.avis cite{font-style:normal;font-size:15px;color:var(--gris)}
/* ============ À PROPOS ============ */
.apropos{display:grid;grid-template-columns:.85fr 1.15fr;gap:68px;align-items:center;padding-top:20px;padding-bottom:clamp(56px,7vw,96px)}
.apropos__photo{overflow:hidden;border-radius:3px;background:var(--terracotta)}
.apropos__photo img{width:100%;height:560px;object-fit:cover;object-position:center 22%}
.apropos__texte{display:flex;flex-direction:column;gap:24px}
.apropos__texte h2{font-size:clamp(30px,3.2vw,42px)}
.apropos__texte p{font-size:18px;line-height:1.75;color:var(--encre-douce)}
.chiffre{display:flex;flex-direction:column;gap:2px;padding-top:18px;border-top:1px solid rgba(17,17,17,.12);margin-top:6px}
.chiffre b{font-family:var(--serif);font-size:38px;font-weight:400;line-height:1}
.chiffre span{font-size:14px;color:var(--gris)}

/* ============ APPEL FINAL ============ */
.appel{display:flex;align-items:center;justify-content:space-between;gap:60px;flex-wrap:wrap}
.appel__texte{display:flex;flex-direction:column;gap:16px;max-width:34em}
.appel__texte h2{font-size:clamp(32px,3.6vw,46px);line-height:1.12}
.appel__texte p{font-size:18px;color:#3A2E28}
.appel__actions{display:flex;flex-direction:column;gap:14px;flex-shrink:0}
.appel__tel{display:flex;align-items:center;justify-content:center;gap:10px;font-size:17px}

/* ============ PIED DE PAGE ============ */
.pied{background:var(--sauge);color:rgba(255,255,255,.86);font-size:15px;padding-top:58px;padding-bottom:40px}
.pied__grille{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:40px}
.pied__col{display:flex;flex-direction:column;gap:11px}
.pied__marque{font-family:var(--serif);font-size:34px;color:#FFFFFF;line-height:1}
.pied__marque i{color:var(--or);font-style:normal}
.pied a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.pied__titre{color:#FFFFFF;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.pied a:hover{color:#FFFFFF;text-decoration-color:#FFFFFF}
.pied__bas{display:flex;justify-content:space-between;gap:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.28);font-size:13px;color:rgba(255,255,255,.78);flex-wrap:wrap}
.pied__bas nav{display:flex;gap:24px;flex-wrap:wrap}

/* ============ CAVEAU ============ */
.section--sauge{background:var(--sauge);color:#fff}
.section--sauge h2,.section--sauge h1{color:#fff}
.legitimite{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;padding-top:44px;padding-bottom:44px}
.legitimite div{display:flex;flex-direction:column;gap:6px}
.legitimite b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--encre)}
.legitimite span{font-size:15px;color:var(--gris)}
.tarifs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.tarif{display:flex;flex-direction:column;gap:12px;padding:32px 26px;background:var(--blanc);border:1px solid rgba(17,17,17,.10);border-radius:3px}
.tarif h3{font-size:22px}
.tarif b{font-family:var(--serif);font-size:42px;font-weight:400;line-height:1}
.tarif p{font-size:15px;color:var(--gris)}
.modalites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.modalites div{display:flex;flex-direction:column;gap:6px}
.modalites b{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--gris)}
.modalites p{font-size:16px;color:var(--encre-douce)}

/* ============ CONTENU COURANT ============ */
.page-simple{max-width:44em;padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.page-simple h1{font-size:clamp(32px,4vw,52px);margin-bottom:28px}
.page-simple h2{font-size:28px;margin:38px 0 12px}
.page-simple p,.page-simple li{color:var(--encre-douce)}
.page-simple p{margin-bottom:16px}

/* ============ ANIMATIONS ============ */
@keyframes mmZoom{from{transform:scale(1.005) translate3d(0,0,0)}to{transform:scale(1.10) translate3d(0,-2%,0)}}
@keyframes mmUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes mmLine{from{background-size:0% .30em}to{background-size:100% .30em}}

.heros__photo img{animation:mmZoom 26s ease-in-out infinite alternate;will-change:transform}
.mmUp{animation:mmUp 1s cubic-bezier(.22,.61,.36,1) both}
.heros__texte .surtitre{animation-delay:.05s}
.heros__texte h1{animation-delay:.18s}
.heros__chapo{animation-delay:.34s}
.heros__actions{animation-delay:.48s}
.heros__avis{animation-delay:.62s}
.heros__texte .u{animation:mmLine 1.1s cubic-bezier(.22,.61,.36,1) 1.15s both}
@supports (animation-timeline: view()){
  .mmIn{animation:mmUp .85s cubic-bezier(.22,.61,.36,1) both;animation-timeline:view();animation-range:entry 2% cover 26%}
}

@media (prefers-reduced-motion: reduce){
  .heros__photo img,.mmUp,.u,.mmIn{animation:none !important}
  .u{background-size:100% .30em !important}
  .btn:hover{transform:none}
  *{scroll-behavior:auto !important}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .grille-3,.formules,.legitimite,.modalites{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tarifs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied__grille{grid-template-columns:1fr 1fr}
  .apropos{gap:40px}
}

@media (max-width:900px){
  body{font-size:16px}
  .nav{display:none}
  .nav.est-ouverte{
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    position:absolute;left:0;right:0;top:100%;background:var(--fond);
    padding:26px var(--gouttiere) 34px;border-bottom:1px solid rgba(17,17,17,.10);
  }
  .nav .btn{width:100%}
  .burger{display:block}
  .entete__in{position:relative}
  .entete__logo img{width:140px}

  .heros{grid-template-columns:1fr}
  .heros__texte{padding:44px var(--gouttiere) 36px;order:1}
  .heros__photo{min-height:340px;order:2}
  .heros__chapo{font-size:17px}
  .heros__actions{gap:16px}
  .heros__actions .btn{width:100%}

  .grille-3,.formules,.grille-2,.legitimite,.modalites,.tarifs{grid-template-columns:1fr}
  .formules__note{text-align:left;max-width:none}
  .formules__tete{margin-bottom:34px}
  .tournage{flex-direction:column;align-items:flex-start;gap:18px}

  .viticole{grid-template-columns:1fr}
  .viticole__photo{min-height:280px;order:2}
  .viticole__texte{order:1;padding:44px var(--gouttiere)}
  .viticole__texte p{font-size:17px}


  .apropos{grid-template-columns:1fr;gap:28px;padding-top:0}
  .apropos__photo img{height:380px}
  .apropos__texte p{font-size:17px}

  .appel{flex-direction:column;align-items:stretch;gap:28px}
  .appel__actions .btn{width:100%}

  .pied__grille{grid-template-columns:1fr;gap:30px}
  .pied__bas{flex-direction:column;gap:16px}
}

/* ============ FORMULAIRE ============ */
.formulaire{display:flex;flex-direction:column;gap:20px;margin-top:32px;max-width:44em}
.formulaire__piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire__duo{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.champ{display:flex;flex-direction:column;gap:7px;margin:0}
.champ label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.champ label span{color:var(--or-fonce)}
.champ input,.champ select,.champ textarea{
  font-family:var(--sans);font-weight:300;font-size:16px;color:var(--encre);
  background:var(--blanc);border:1px solid rgba(17,17,17,.16);border-radius:2px;
  padding:13px 15px;width:100%;
  transition:border-color .25s ease,box-shadow .25s ease;
}
.champ textarea{resize:vertical;min-height:150px;line-height:1.65}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(226,184,87,.22);
}
.champ input::placeholder,.champ textarea::placeholder{color:#A79688}
.champ--action{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap;padding-top:6px}
.champ--action .btn{border:0;cursor:pointer;font-family:var(--sans)}
.champ__note{font-size:14px;color:var(--gris);max-width:24em}
.message{padding:16px 20px;border-radius:2px;font-size:16px;margin:0 0 8px}
.message--ok{background:var(--sauge);color:#fff}
.message--ko{background:var(--terracotta);color:#3A2E28}

@media (max-width:900px){
  .formulaire__duo{grid-template-columns:1fr}
  .champ--action{flex-direction:column;align-items:stretch}
  .champ--action .btn{width:100%}
}

/* ============ PAGE CONTACT ============ */
.contact{display:grid;grid-template-columns:0.9fr 1.1fr;gap:64px;align-items:start}
.contact__texte h1{line-height:1.1}
.contact__coord{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:40px;padding-top:32px;border-top:1px solid rgba(17,17,17,.12)}
.contact__coord div{display:flex;flex-direction:column;gap:4px}
.contact__coord b{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--gris)}
.contact__coord a,.contact__coord span{font-size:17px}
.contact__coord a:hover{color:var(--or-fonce)}
.contact__formulaire .formulaire{margin-top:0;max-width:none}

@media (max-width:900px){
  .contact{grid-template-columns:1fr;gap:36px}
  .contact__coord{grid-template-columns:1fr;gap:20px;margin-top:30px}
}