/* =========================================================
   Audrey en Provence — maquette blog provençal
   Typographies : Ms Madi (script) · Playfair Display (titres) · Lato (textes)
   ========================================================= */

:root{
  --cream:      #F6F0E9;   /* fond de page */
  --cream-hi:   #F9F5F0;   /* en-tête, cartes, barre rubriques */
  --sand:       #F6EBE3;   /* bandeau bas de page */

  --ink:        #1E1913;   /* titres */
  --ink-soft:   #3E3730;   /* textes courants */
  --ink-mute:   #5C5148;

  --terracotta:   #DC875C; /* aplats */
  --terracotta-t: #CE6E44; /* textes accentués */
  --terracotta-d: #C4633A;
  --lavender:     #8E6FA0;

  --line:   #E7DED2;
  --line-f: #E0C3AC;
  --shadow: 0 8px 26px rgba(120, 92, 64, .07);

  --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --script: 'Ms Madi', 'Segoe Script', cursive;
  --sans:   'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;

  --maxw: 1360px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  /* Place de l'ascenseur toujours réservée : même largeur utile sur toutes les
     pages, qu'elles défilent ou non (pas de saut horizontal entre deux pages) */
  scrollbar-gutter:stable;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:400; color:var(--ink); }
ul{ list-style:none; margin:0; padding:0; }
svg{ width:100%; height:100%; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--cream-hi);
}
.header-inner{
  max-width:1402px;
  margin-inline:auto;
  padding:6px 32px;
  display:flex;
  align-items:center;
  gap:30px;
}

/* ---- Logo ---- */
.logo{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.logo-mark{ width:120px; height:120px; margin-right:4px; }

.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-script{
  font-family:var(--script);
  font-size:60px;
  line-height:.8;
  color:var(--terracotta-t);
}
.logo-serif{
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  margin-top:6px;
}
.logo-tag{
  font-size:9px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:10px;
}

/* ---- Navigation ---- */
.main-nav ul{ display:flex; align-items:center; gap:27px; }
.main-nav a{
  position:relative;
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:8px;
  transition:color .25s;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1.5px;
  background:var(--terracotta-t);
  transform:scaleX(0);
  transition:transform .3s ease;
}
.main-nav a:hover{ color:var(--terracotta-t); }
.main-nav a:hover::after,
.main-nav a.is-active::after{ transform:scaleX(1); }
.main-nav a.is-active{ color:var(--terracotta-t); }

/* ---- Outils ---- */
.header-tools{ margin-left:auto; display:flex; align-items:center; gap:19px; }
.ht-ico{
  width:21px; height:21px;
  color:var(--ink);
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .25s, transform .25s;
}
.ht-ico svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ht-ico:hover{ color:var(--terracotta-t); transform:translateY(-2px); }

/* ---- Menu mobile ---- */
.burger{ display:none; margin-left:auto; width:34px; height:28px; background:none; border:0; padding:0; cursor:pointer; }
.burger span{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s, opacity .3s; }
.burger span + span{ margin-top:7px; }
.burger.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* =========================================================
   BANDEAU PRINCIPAL
   ========================================================= */
.hero{
  position:relative;
  height:457px;
  display:flex;
  align-items:flex-start;
  overflow:hidden;
  background:var(--cream-hi);
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }

.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(249,245,240,.95) 0%,
      rgba(249,245,240,.90) 20%,
      rgba(249,245,240,.72) 34%,
      rgba(249,245,240,.34) 48%,
      rgba(249,245,240,.06) 62%,
      rgba(249,245,240,0)   72%),
    linear-gradient(180deg, rgba(249,245,240,.66) 0%, rgba(249,245,240,.24) 32%, rgba(249,245,240,0) 60%);
}
.hero-inner{
  position:relative;
  width:100%;
  max-width:1402px;
  margin-inline:auto;
  padding:42px 110px 0;
}
.hero-copy{ max-width:480px; }

.hero-script{
  margin:0;
  font-family:var(--script);
  font-size:58px;
  line-height:1;
  color:var(--terracotta-t);
}
.hero-title{
  margin:8px 0 0;
  font-family:var(--serif);
  font-size:39px;
  font-weight:400;
  line-height:1.16;
  letter-spacing:.005em;
  text-transform:uppercase;
}
.hero-text{
  margin:20px 0 0;
  font-size:13.5px;
  font-weight:400;
  line-height:1.55;
  color:var(--ink-soft);
}

/* ---- Bouton principal ---- */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:18px;
  padding:14px 17px 14px 31px;
  background:var(--terracotta);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.045em;
  text-transform:uppercase;
  transition:background .25s, transform .25s, box-shadow .25s;
}
.btn-primary svg{
  width:15px; height:15px; flex:0 0 15px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s;
}
.btn-primary:hover{
  background:var(--terracotta-d);
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(196,99,58,.3);
}
.btn-primary:hover svg{ transform:translateX(5px); }

/* =========================================================
   RUBRIQUES
   ========================================================= */
.rubriques-wrap{
  position:relative;
  z-index:5;
  margin-top:-79px;
}
.rubriques{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  background:var(--cream-hi);
  box-shadow:var(--shadow);
  padding:21px 6px;
}
.rubriques li{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:2px 18px;
}
.rubriques li + li{ border-left:1px solid var(--line); }

.rub-ico{ width:52px; height:52px; flex:0 0 52px; object-fit:contain; }

.rubriques h3{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:5px;
}
.rubriques p{
  margin:0;
  font-size:11.5px;
  line-height:1.65;
  color:var(--ink-mute);
}

/* =========================================================
   ARTICLES
   ========================================================= */
.articles{ padding:10px 0 22px; }

.section-head{ position:relative; text-align:center; margin-bottom:14px; }
.section-head h2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
}
.section-head .rule{ display:block; width:50px; height:1px; background:var(--terracotta); opacity:.65; }
.sprig{ position:relative; z-index:4; width:24px; margin:4px auto -12px; }

/* ---- Grille ---- */
.grid-articles{
  display:grid;
  grid-template-columns:2.73fr 1fr 1fr;
  gap:14px;
  align-items:start;
}

.card{
  background:var(--cream-hi);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(120,92,64,.12); }

.card-media{ display:block; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.card:hover .card-media img{ transform:scale(1.04); }

.cat{
  display:block;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--terracotta-t);
  margin-bottom:12px;
}
.card-title{ font-family:var(--serif); font-weight:400; line-height:1.2; }
.card-text{ margin:0; font-size:13.5px; line-height:1.62; color:var(--ink-soft); }

/* ---- Carte principale ---- */
.card-feature{ display:grid; grid-template-columns:1.68fr 1fr; align-items:stretch; }
.card-feature .card-media{ height:100%; min-height:282px; }
.card-feature .card-body{
  padding:28px 26px 28px 24px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.card-feature .card-title{ font-size:26px; margin-bottom:13px; }

/* ---- Cartes secondaires ---- */
.card:not(.card-feature) .card-media{ margin:8px 8px 0; height:120px; }
.card:not(.card-feature) .card-body{ padding:14px 17px 18px; }
.card:not(.card-feature) .cat{ margin-bottom:10px; }
.card:not(.card-feature) .card-title{ font-size:18px; margin-bottom:10px; }
.card:not(.card-feature) .card-text{ font-size:11.5px; line-height:1.62; }

/* ---- Boutons / liens ---- */
.btn-outline{
  align-self:flex-start;
  display:inline-block;
  margin-top:22px;
  padding:12px 20px;
  border:1px solid var(--terracotta);
  color:var(--terracotta-t);
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:background .25s, color .25s;
}
.btn-outline:hover{ background:var(--terracotta); color:#fff; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  color:var(--terracotta-t);
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.link-arrow svg{
  width:13px; height:13px; flex:0 0 13px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s;
}
.link-arrow:hover svg{ transform:translateX(4px); }

/* =========================================================
   BAS DE PAGE
   ========================================================= */
.site-footer{ background:var(--sand); margin-top:18px; }

.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 1.85fr .85fr;
  align-items:center;
  padding-block:22px;
}
.f-col{ padding-inline:20px; }
.f-about{ padding-left:30px; }
.f-social{ padding-left:36px; }
.f-col + .f-col{ border-left:1px solid var(--line-f); }

/* ---- Bio ---- */
.f-about{ display:flex; align-items:center; gap:22px; }
.avatar{
  width:118px; height:118px;
  flex:0 0 118px;
  border-radius:50%;
  object-fit:cover;
}
.f-script{
  margin:0 0 8px;
  font-family:var(--script);
  font-size:28px;
  line-height:1;
  color:var(--terracotta-t);
}
.f-text{ margin:0; font-size:14px; line-height:1.62; color:var(--ink-soft); }

/* ---- Infolettre ---- */
.f-news{ display:flex; align-items:center; gap:22px; }
.f-envelope{ width:84px; flex:0 0 84px; }

.f-news h3{
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:8px;
}
.f-news .f-text{ margin-bottom:12px; }

.newsletter{ display:flex; }
.newsletter input{
  flex:1 1 auto;
  min-width:0;
  padding:11px 14px;
  border:1px solid var(--line);
  background:#FFFDFB;
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink);
}
.newsletter input::placeholder{ color:#A99C8D; }
.newsletter input:focus{ outline:none; border-color:var(--terracotta); }
.newsletter button{
  padding:11px 18px;
  border:0;
  background:var(--terracotta);
  color:#fff;
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s;
}
.newsletter button:hover{ background:var(--terracotta-d); }

.form-msg{ margin:8px 0 0; font-size:12px; min-height:16px; color:#6E7F52; }
.form-msg.is-error{ color:var(--terracotta-d); }

/* ---- Réseaux ---- */
.f-social h3{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:16px;
}
.socials{ display:flex; gap:16px; }
.socials a{ width:27px; height:27px; color:var(--ink); transition:color .25s, transform .25s; }
.socials a svg{ fill:none; stroke:currentColor; stroke-width:1.7; }
.socials a:hover{ color:var(--terracotta-t); transform:translateY(-3px); }

/* ---- Ligne finale ---- */
.footer-bottom{ border-top:1px solid var(--line-f); }
.footer-bottom .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:15px;
}
.footer-bottom p{ margin:0; font-size:12px; color:var(--ink-mute); }
.footer-bottom ul{ display:flex; gap:22px; }
.footer-bottom a{ font-size:12px; color:var(--ink-mute); transition:color .25s; }
.footer-bottom a:hover{ color:var(--terracotta-t); }

/* =========================================================
   ADAPTATIF
   ========================================================= */
@media (max-width:1330px){
  .header-inner{ gap:16px; padding-inline:20px; }
  .main-nav ul{ gap:20px; }
  .main-nav a{ font-size:11px; letter-spacing:.04em; }
  .logo-mark{ width:96px; height:96px; }
  .logo-script{ font-size:52px; }
  .logo-serif{ font-size:20px; }
  .hero-script{ font-size:58px; }
  .hero-title{ font-size:44px; }
}

@media (max-width:1080px){
  .burger{ display:block; }
  .header-tools{ margin-left:16px; }
  .main-nav{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--cream-hi);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
  .main-nav.is-open{ max-height:430px; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; padding:8px 24px 18px; }
  .main-nav li{ width:100%; }
  .main-nav a{ padding:12px 0; font-size:12px; }
  .main-nav a::after{ display:none; }

  .grid-articles{ grid-template-columns:1fr 1fr; }
  .card-feature{ grid-column:1 / -1; }
  .card:not(.card-feature) .card-media{ height:190px; }

  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .f-col{ padding-inline:0; }
  .f-col + .f-col{ border-left:0; border-top:1px solid var(--line-f); padding-top:26px; }
}

@media (max-width:860px){
  .rubriques{ grid-template-columns:repeat(2,1fr); }
  .rubriques li:nth-child(odd){ border-left:0; }
  .rubriques li:nth-child(n+3){ border-top:1px solid var(--line); padding-top:18px; }
  .rubriques-wrap{ margin-top:-56px; }
}

@media (max-width:680px){
  .header-inner{ padding:8px 16px; }
  .logo-mark{ width:70px; height:70px; }
  .logo-script{ font-size:40px; }
  .logo-serif{ font-size:16px; }
  .logo-tag{ font-size:8px; letter-spacing:.15em; }
  .header-tools{ gap:14px; }
  .header-tools .ht-ico:not(.search-btn){ display:none; }

  .hero{ min-height:auto; }
  .hero-media img{ object-position:center 55%; }
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(249,245,240,.96) 0%,
      rgba(249,245,240,.9) 46%,
      rgba(249,245,240,.35) 100%);
  }
  .hero-inner{ padding:40px 20px 88px; }
  .hero-script{ font-size:44px; }
  .hero-title{ font-size:34px; }

  .rubriques{ grid-template-columns:1fr; }
  .rubriques li{ border-left:0 !important; }
  .rubriques li + li{ border-top:1px solid var(--line); padding-top:18px; }

  .section-head h2{ font-size:27px; gap:12px; }
  .section-head .rule{ width:32px; }

  .grid-articles{ grid-template-columns:1fr; }
  .card-feature{ grid-template-columns:1fr; }
  .card-feature .card-media{ min-height:210px; }
  .card-feature .card-body{ padding:24px 22px 28px; }
  .card-feature .card-title{ font-size:28px; }

  .f-about,.f-news{ flex-direction:column; text-align:center; }
  .f-social{ text-align:center; }
  .socials{ justify-content:center; }
  .hero-text br,.f-text br,.card-text br{ display:none; }

  .footer-bottom .container{ flex-direction:column; text-align:center; }
}