/*
Theme Name: MAD Communication
Theme URI: https://madcommunication.fr
Author: MAD Communication
Description: Thème one-page sur mesure basé sur la charte graphique M.AD — marketing digital food, beverage & édition.
Version: 1.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: mad-communication
*/

/* ─── Palette de la charte ─────────────────────────── */
:root{
  --rouge:#550F00;
  --rose:#F0A0AF;
  --vert:#AFA54B;
  --marron:#411E1E;
  --beige:#FFEBCD;

  --titre:"Archivo", sans-serif;      /* → remplacer par TASA Explorer */
  --corps:"Libre Caslon Text", serif; /* → Libre Caslon Condensed      */
  --manu:"Beth Ellen", cursive;
}

/* Pour brancher TASA Explorer :
   1. déposez TASAExplorer-Bold.woff2 dans le dossier /fonts du thème
   2. décommentez :
@font-face{
  font-family:"TASA Explorer";
  src:url("fonts/TASAExplorer-Bold.woff2") format("woff2");
  font-weight:700; font-display:swap;
}
   3. --titre:"TASA Explorer","Archivo",sans-serif;
*/

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--corps);
  background:var(--beige);
  color:var(--marron);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,.nav-mad a,.btn{
  font-family:var(--titre);
  font-weight:900;
  font-stretch:80%;
  letter-spacing:-.03em;       /* espacement -40 de la charte */
  line-height:.95;
  text-transform:uppercase;
}

.manu{
  font-family:var(--manu);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
}
.tilt{display:inline-block;transform:rotate(-6deg)} /* orienté à 6° */

.wrap{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}

/* ─── Header (rouge + logo rose) ───────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--rouge);color:var(--rose);
}
.nav-mad{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;max-width:1200px;margin:0 auto;
}
.logo-mad img{height:44px;width:auto}
.nav-mad nav a{
  text-decoration:none;font-size:.8rem;letter-spacing:.02em;
  margin-left:22px;font-weight:700;color:var(--rose);
}
.nav-mad nav a:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:640px){
  .nav-mad nav a{margin-left:12px;font-size:.7rem}
  .logo-mad img{height:34px}
}
.admin-bar .site-header{top:32px}
@media(max-width:782px){ .admin-bar .site-header{top:46px} }

/* ─── Hero : photo de fond + voile rouge ───────────── */
.hero{
  position:relative;overflow:hidden;
  padding:12vh 0 14vh;
  background:var(--rouge);
  background-size:cover;background-position:center;
  color:var(--rose);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(85,15,0,.75), rgba(85,15,0,.5));
}
.hero .wrap{position:relative;z-index:1}
.hero h1{
  font-size:clamp(1.9rem,4.5vw,3.4rem);
  max-width:22ch;
}
.hero .accroche{
  font-family:var(--corps);
  font-size:clamp(1rem,2vw,1.25rem);
  max-width:48ch;margin-top:22px;font-style:italic;
}
.hero .wow{
  font-size:clamp(1.5rem,3.5vw,2.2rem);
  color:var(--rose);
  position:absolute;z-index:1;
  right:clamp(16px,8vw,140px);
  bottom:clamp(24px,7vh,70px);
}
.hero .btn{
  display:inline-block;margin-top:34px;
  background:var(--rose);color:var(--rouge);
  padding:14px 26px;font-size:.9rem;text-decoration:none;
  transition:transform .18s ease;
}
.hero .btn:hover{transform:rotate(-2deg) scale(1.03)}

/* ─── Bandeau défilant (sobre, sans bordures) ──────── */
.marquee{
  background:var(--rose);color:var(--marron);
  overflow:hidden;white-space:nowrap;
  padding:14px 0;
}
.marquee span{
  display:inline-block;font-family:var(--manu);
  font-size:1.2rem;padding-right:3rem;
  animation:defile 26s linear infinite;
}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── Sections ─────────────────────────────────────── */
.section-mad{padding:90px 0}
.eyebrow{
  font-family:var(--manu);font-size:1.3rem;
  display:inline-block;transform:rotate(-4deg);
  margin-bottom:8px;
}
h2{font-size:clamp(2rem,5.5vw,3.4rem);margin-bottom:44px}

/* ─── Réalisations : la vedette du site ────────────── */
.projets-mad{background:var(--beige);padding:100px 0 110px}
.grille{
  display:grid;gap:30px;
  grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));
}
.projet{position:relative}
.projet a{text-decoration:none;display:block}
.projet .visuel{
  aspect-ratio:4/5;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--rose);
}
.projet .visuel img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s ease;
}
.projet:hover .visuel img{transform:scale(1.04)}
.ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.ph .manu{font-size:1.3rem;transform:rotate(-6deg)}
.ph--1{background:var(--rose);color:var(--marron)}
.ph--2{background:var(--vert);color:var(--marron)}
.projet figcaption{
  margin-top:14px;display:flex;justify-content:space-between;
  align-items:baseline;gap:12px;
}
.projet h3{font-size:1.15rem}
.projet .tag{font-family:var(--manu);font-size:1rem}

/* ─── Expertises (duo vert / marron de la charte) ──── */
.expertises{background:var(--vert);color:var(--marron)}
.expertises .cartes{
  display:grid;gap:40px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.expertise img{height:64px;width:auto;margin-bottom:18px}
.expertise h3{font-size:1.2rem;margin-bottom:12px}
.expertise p{font-size:1rem;max-width:38ch}

/* ─── Engagement (duo rouge / rose de la charte) ───── */
.vision{background:var(--rouge);color:var(--rose)}
.vision blockquote{
  font-family:var(--corps);
  font-size:clamp(1.4rem,3.2vw,2.3rem);
  line-height:1.3;max-width:30ch;
}
.vision .manu{
  font-size:clamp(1.3rem,2.6vw,1.8rem);display:inline-block;
  transform:rotate(-6deg);margin-top:26px;
}

/* ─── L'agence (beige + photo) ─────────────────────── */
.apropos{background:var(--beige)}
.apropos h2{max-width:18ch}
.apropos .cols{
  display:grid;gap:56px;
  grid-template-columns:0.9fr 1.1fr;
  align-items:start;
}
@media(max-width:820px){.apropos .cols{grid-template-columns:1fr}}
.apropos .photo{
  aspect-ratio:4/5;overflow:hidden;background:var(--rose);
  display:flex;align-items:center;justify-content:center;
}
.apropos .photo img{width:100%;height:100%;object-fit:cover}
.apropos .photo .manu{font-size:1.3rem;transform:rotate(-6deg);text-align:center}
.apropos .texte h3{font-size:1.2rem;margin:26px 0 10px}
.apropos .texte h3:first-child{margin-top:0}
.apropos .texte p{max-width:56ch;font-size:1rem}
.apropos .texte p + p{margin-top:12px}
.valeurs{list-style:none;margin-top:14px}
.valeurs li{
  border-top:2px solid var(--marron);
  padding:12px 0;display:flex;align-items:baseline;
  justify-content:space-between;gap:16px;
}
.valeurs li:last-child{border-bottom:2px solid var(--marron)}
.valeurs .nom{font-family:var(--titre);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;font-size:1rem}
.valeurs .note{font-family:var(--manu);font-size:.9rem;text-align:right}

/* ─── Contact / footer (rouge / rose) ──────────────── */
.site-footer{
  background:var(--rouge);color:var(--rose);
  padding:90px 0 40px;position:relative;overflow:hidden;
}
.site-footer h2{margin-bottom:14px}
.site-footer .invit{max-width:46ch;margin-bottom:26px;font-style:italic}
.site-footer .picto-contact{height:56px;width:auto;margin-bottom:18px}
.site-footer .mail{
  font-family:var(--titre);font-weight:900;text-transform:lowercase;
  letter-spacing:-.02em;
  font-size:clamp(1.2rem,4vw,2.2rem);
  color:var(--rose);text-decoration:none;word-break:break-all;
}
.site-footer .mail:hover{text-decoration:underline;text-underline-offset:6px}
.site-footer .btn-rdv{
  background:var(--rose);color:var(--rouge);
  padding:14px 26px;text-decoration:none;display:inline-block;
  font-family:var(--titre);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;font-size:.9rem;
  transition:transform .18s ease;
}
.site-footer .btn-rdv:hover{transform:rotate(-2deg) scale(1.03)}
.footline{
  margin-top:70px;padding-top:20px;
  border-top:1px solid rgba(240,160,175,.3);
  display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:.85rem;
  position:relative;z-index:1;
}
.footline a{text-decoration:none}
.footline a:hover{text-decoration:underline}

/* ─── Apparition au scroll ─────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease}
.reveal.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee span{animation:none}
  html{scroll-behavior:auto}
}

/* ─── Pages internes (mentions légales, projet seul) ─ */
.page-simple{padding:80px 24px;max-width:800px;margin:0 auto}
.page-simple h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:32px}
.page-simple h2{font-size:1.4rem;margin:32px 0 12px}
.page-simple p,.page-simple li{margin-bottom:12px;font-size:1rem}
.page-simple ul{padding-left:20px}
.page-simple .visuel-projet{margin:0 0 32px}
.page-simple .tag{font-family:var(--manu);font-size:1.1rem;display:inline-block;
  transform:rotate(-4deg);margin-bottom:16px}
.page-simple iframe,.page-simple video{max-width:100%;margin:16px 0}
.page-simple .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto}
.retour{display:inline-block;margin-top:40px;font-family:var(--titre);
  font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  text-decoration:none;font-size:.9rem}
.retour:hover{text-decoration:underline}

/* ═══ Page projet — version visuelle (v1.4) ═════════ */
.wrap-etroit{max-width:820px;margin:0 auto;padding:0 24px}

/* En-tête du projet (duo rouge / rose) */
.projet-hero{
  background:var(--rouge);color:var(--rose);
  padding:80px 0 70px;
}
.projet-hero .tag-hero{font-size:1.4rem;margin-bottom:14px}
.projet-hero h1{
  font-size:clamp(2.4rem,7vw,4.6rem);
  max-width:16ch;
}

/* Photo pleine largeur */
.projet-banniere{margin:0}
.projet-banniere img{
  width:100%;height:clamp(280px,50vh,560px);object-fit:cover;
}

/* Chiffres clés (duo vert / marron) */
.projet-resultats{
  background:var(--vert);color:var(--marron);
  padding:80px 0;
}
.projet-resultats .eyebrow{margin-bottom:30px}
.chiffres{
  display:grid;gap:40px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.chiffre .valeur{
  display:block;
  font-family:var(--titre);font-weight:900;font-stretch:80%;
  letter-spacing:-.03em;line-height:.9;text-transform:uppercase;
  font-size:clamp(3.2rem,9vw,6rem);
}
.chiffre .legende{
  display:inline-block;font-size:1.15rem;margin-top:10px;
  transform:rotate(-4deg);
}

/* Contenu libre, mis en forme */
.projet-contenu{background:var(--beige);padding:80px 0}
.projet-contenu h2{
  font-size:clamp(1.6rem,4vw,2.4rem);
  margin:44px 0 18px;
}
.projet-contenu h2:first-child{margin-top:0}
.projet-contenu h3{font-size:1.2rem;margin:30px 0 12px}
.projet-contenu p{margin-bottom:14px;font-size:1.05rem;max-width:62ch}
.projet-contenu ul{list-style:none;margin:18px 0 26px}
.projet-contenu ul li{
  border-top:2px solid var(--marron);
  padding:12px 0;font-size:1rem;
}
.projet-contenu ul li:last-child{border-bottom:2px solid var(--marron)}
.projet-contenu strong{font-family:var(--titre);font-weight:900;
  text-transform:uppercase;letter-spacing:-.02em;font-size:.95em}
.projet-contenu iframe,.projet-contenu video{max-width:100%;margin:22px 0}
.projet-contenu .wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto}
.projet-contenu img{margin:22px 0}

/* Appel à l'action final (rouge / rose) */
.projet-cta{
  background:var(--rouge);color:var(--rose);
  padding:90px 0;text-align:left;
}
.projet-cta .punchline{
  font-family:var(--titre);font-weight:900;font-stretch:80%;
  letter-spacing:-.03em;line-height:.95;text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,3.2rem);max-width:18ch;
}
.projet-cta .manu{font-size:clamp(1.3rem,3vw,1.9rem);margin-top:14px}
.btn-rose{
  display:inline-block;background:var(--rose);color:var(--rouge);
  padding:14px 26px;text-decoration:none;
  font-family:var(--titre);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;font-size:.9rem;
  transition:transform .18s ease;
}
.btn-rose:hover{transform:rotate(-2deg) scale(1.03)}
.lien-retour{
  margin-left:22px;text-decoration:none;font-size:.95rem;
}
.lien-retour:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:560px){
  .lien-retour{display:block;margin:18px 0 0}
}

/* ─── Photos & galeries dans les projets (v1.4.1) ──── */
.projet-contenu .wp-block-image img{
  width:100%;height:auto;
}
.projet-contenu .wp-block-gallery{
  display:grid !important;gap:18px;margin:28px 0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.projet-contenu .wp-block-gallery .wp-block-image,
.projet-contenu .wp-block-gallery figure{
  margin:0 !important;width:100% !important;
}
.projet-contenu .wp-block-gallery img{
  width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;
  margin:0;transition:transform .35s ease;
}
.projet-contenu .wp-block-gallery img:hover{transform:scale(1.03)}
/* légendes de photos en manuscrit */
.projet-contenu figcaption{
  font-family:var(--manu);font-size:.95rem;
  margin-top:8px;text-align:left;color:var(--marron);
}

/* ─── Anciennes galeries (éditeur classique) : rattrapage ─ */
.projet-contenu .gallery{
  display:grid !important;gap:18px;margin:28px 0;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.projet-contenu .gallery .gallery-item{
  width:100% !important;margin:0 !important;float:none !important;
}
.projet-contenu .gallery .gallery-icon{margin:0}
.projet-contenu .gallery img{
  width:100% !important;height:100% !important;
  aspect-ratio:4/5;object-fit:cover;
  border:none !important;margin:0 !important;
  transition:transform .35s ease;
}
.projet-contenu .gallery img:hover{transform:scale(1.03)}
.projet-contenu .gallery br{display:none}