/* =====================================================================
   Martinez Presse — site vitrine
   Feuille de styles unique. Organisation :
     1. Variables et base      5. Réseau, carte, galerie
     2. Utilitaires            6. Pourquoi / Pour qui
     3. En-tête et navigation  7. Module « Visualisez votre affiche »
     4. Hero et chiffres       8. Références, contact, pied de page
   ===================================================================== */

/* 1 ─────────────────────────────────────────────── Variables et base */

:root{
  --ink:#15171c;          /* noir profond du logo */
  --ink-soft:#33373f;
  --accent:#d11f26;       /* rouge RM.PRESSE */
  --accent-d:#a8141a;
  --steel:#8a9099;
  --gold:#e0a23d;
  --cream:#f5f3f0;
  --paper:#fff;
  --line:#e3ddd5;
  --muted:#6a7079;
  --radius:14px;
  --maxw:1180px;
  --shadow:0 18px 40px rgba(21,23,28,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  font-family:'Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word;
}
/* Pas de « overflow:hidden » sur body à l'ouverture du menu. C'est la recette
   habituelle pour bloquer le défilement de l'arrière-plan, et elle se retourne
   contre nous : sur iOS elle ne bloque rien et provoque des sauts de page, et
   ici, page défilée, elle renvoyait le panneau des centaines de pixels
   au-dessus de l'écran — le menu disparaissait purement et simplement.
   Le panneau couvre déjà tout l'écran, et « overscroll-behavior:contain » sur
   lui empêche le défilement de se propager à la page. Cela suffit. */

h1,h2,h3{line-height:1.15;font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Un anneau de focus visible partout : c'est la base de la navigation clavier. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* 2 ───────────────────────────────────────────────────── Utilitaires */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section.block{padding:84px 0}
.center{text-align:center;max-width:720px;margin:0 auto 50px}
.center p{color:var(--muted);font-size:1.08rem;margin-top:12px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:var(--accent)}
.eyebrow.or{color:var(--gold)}
.small{font-size:.85rem;color:var(--muted)}

.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 20px;z-index:200}
.saut-contenu:focus{left:12px;top:12px}

.btn{
  display:inline-block;background:var(--accent);color:#fff;padding:14px 26px;
  border-radius:999px;font-weight:700;border:none;cursor:pointer;font-size:1rem;
  font-family:inherit;transition:background .2s,transform .2s;text-align:center;
}
.btn:hover{background:var(--accent-d);transform:translateY(-2px)}
.btn:disabled{opacity:.55;cursor:progress;transform:none}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.45);color:#fff}
.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn.dark{background:var(--ink)}
.btn.dark:hover{background:var(--ink-soft)}

/* 3 ────────────────────────────────────────── En-tête et navigation */

/* Le fond translucide et le flou sont portés par un pseudo-élément, PAS par
   l'en-tête lui-même. Ce n'est pas une coquetterie : « backdrop-filter » fait
   de l'élément un bloc conteneur pour ses descendants en position fixe. Posé
   sur <header>, il enfermait le panneau du menu mobile — pourtant en
   position:fixed — dans les 79 px de l'en-tête. Le menu s'ouvrait donc en
   bandeau de 56 px sous le logo au lieu d'occuper l'écran.
   Sur un pseudo-élément, l'effet visuel est identique et le menu s'échappe. */
header{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--line);
}
header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.nav .logo img{height:48px;width:auto}
.nav-liens ul{display:flex;gap:26px;list-style:none;align-items:center}
.nav-liens a{font-weight:600;font-size:.95rem;color:var(--ink-soft);transition:color .2s}
.nav-liens a:hover,.nav-liens a[aria-current="true"]{color:var(--accent)}
.menu-cta{display:flex;align-items:center;gap:14px}
/* Le bouton du panneau mobile ne doit pas doubler celui de l'en-tête. */
.nav-liens > .btn{display:none}

.burger{
  display:none;width:44px;height:44px;background:none;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:11px;width:22px;height:2px;background:var(--ink);
  transition:transform .25s,opacity .2s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:940px){
  .burger{display:block}
  .menu-cta .btn{display:none}
  .nav-liens{
    position:fixed;inset:78px 0 0;background:#fff;padding:28px 24px;
    transform:translateX(100%);overflow-y:auto;overscroll-behavior:contain;
    /* Fermé, le panneau est aussi retiré du parcours au clavier et des
       lecteurs d'écran. Sans cela, ses liens restent atteignables à la
       tabulation alors qu'ils sont hors de l'écran : on tabule dans le vide.
       La visibilité ne bascule qu'à la fin du glissement, pour ne pas couper
       l'animation. */
    visibility:hidden;
    transition:transform .28s ease, visibility 0s linear .28s;
  }
  .nav-liens[data-ouvert="true"]{
    transform:translateX(0);
    visibility:visible;
    transition:transform .28s ease, visibility 0s;
  }
  /* Menu ouvert, l'en-tête devient franchement opaque : sur un panneau qui
     couvre tout l'écran, voir la page par transparence dans la bande du haut
     se lit comme un défaut d'affichage, pas comme un effet. */
  header:has(.nav-liens[data-ouvert="true"])::before{
    background:#fff;backdrop-filter:none;
  }
  .nav-liens ul{flex-direction:column;align-items:stretch;gap:0}
  .nav-liens li{border-bottom:1px solid var(--line)}
  .nav-liens a{display:block;padding:18px 4px;font-size:1.1rem}
  .nav-liens > .btn{display:block;margin-top:24px;width:100%}
}

/* 4 ───────────────────────────────────────────── Hero et chiffres */

.hero{position:relative;background:linear-gradient(135deg,#15171c 0%,#26282e 55%,#33363d 100%);color:#fff;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 85% 15%,rgba(209,31,38,.35),transparent 45%),
    radial-gradient(circle at 8% 92%,rgba(224,162,61,.14),transparent 42%);
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:80px 24px}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);margin:14px 0 18px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero .lead{font-size:1.16rem;color:#d8dade;max-width:560px}
.hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.trust{margin-top:32px;font-size:.85rem;color:#a7adb6}
.trust b{color:#fff;font-weight:600}

/* Diaporama du bandeau — quatre vues, inclinaisons différentes, formats mêlés.
   La hauteur du bloc est fixe pour que le texte à gauche ne bouge jamais ;
   chaque photo s'y inscrit à sa propre taille, ce qui fait alterner naturellement
   les cadres larges et les cadres hauts. */
.hero-diapo{position:relative;height:var(--h-diapo,420px)}
.dia{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .8s ease;
}
.dia.active{opacity:1;pointer-events:auto}
.dia .cadre{
  position:relative;display:block;max-width:100%;max-height:100%;
  border:6px solid #fff;border-radius:16px;overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  transform:rotate(calc(var(--incl) * 2.6)) scale(.93);
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
.dia.active .cadre{transform:rotate(var(--incl)) scale(1)}
.dia img{display:block;max-height:calc(var(--h-diapo,420px) - 12px);max-width:100%;width:auto;height:auto}
.dia .cap{
  position:absolute;inset:auto 0 0 0;color:#fff;font-size:.8rem;font-weight:600;
  padding:30px 14px 11px;background:linear-gradient(transparent,rgba(0,0,0,.8));
}

.diapo-points{display:flex;gap:8px;justify-content:center;margin-top:20px}
.diapo-points button{
  width:9px;height:9px;padding:0;border:none;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background .25s,width .25s;
}
.diapo-points button:hover{background:rgba(255,255,255,.6)}
.diapo-points button[aria-selected="true"]{background:var(--gold);width:24px}

/* Mouvement réduit : on garde le fondu, on supprime bascule et zoom. */
@media (prefers-reduced-motion:reduce){
  .dia .cadre,.dia.active .cadre{transform:rotate(var(--incl));transition:none}
}

@media(max-width:880px){
  .hero .wrap{grid-template-columns:1fr;padding:52px 24px}
  .hero-diapo{--h-diapo:330px}
}
@media(max-width:520px){ .hero-diapo{--h-diapo:280px} }

.stats{background:var(--cream);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:36px 24px;text-align:center}
.stat .n{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;color:var(--ink);line-height:1}
.stat .n i{color:var(--accent);font-style:normal}
/* Le réseau bouge en permanence : le site annonce des ordres de grandeur, pas
   des relevés. Le « + » est placé APRÈS le chiffre — « 100+ » et non « +100 »,
   qui se lirait comme une variation (cent de plus qu'avant) plutôt que comme un
   plancher. En suffixe il se cale aussi contre le flanc droit du zéro, là où il
   ne heurte rien ; devant le « 1 » il se serrait contre la hampe. La forme
   pleine « plus de 100 » reste dans les phrases, où elle se lit sans effort. */
.stat .n .suf{font-size:.58em;font-weight:800;color:var(--accent);
              vertical-align:.30em;margin-left:.04em;letter-spacing:0}
/* « 100+ » se voit d'un coup d'œil mais s'entend mal : un lecteur d'écran
   annoncerait « cent plus ». On lui donne la forme parlée et on lui cache le
   signe, pour qu'il lise « plus de 100 diffuseurs de presse ». */
.lecture-seule{position:absolute;width:1px;height:1px;overflow:hidden;
               clip-path:inset(50%);white-space:nowrap}
.stat .l{font-size:.84rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:8px;line-height:1.35}
.stat .l br + *,.stat .l br{font-weight:400}
@media(max-width:720px){.stats .wrap{grid-template-columns:repeat(2,1fr);gap:26px}}

/* 5 ────────────────────────────────────── Réseau, carte et galerie */

.reseau-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.map-box{position:relative;border:1px solid var(--line);border-radius:var(--radius);height:440px;overflow:hidden}
#carte{position:absolute;inset:0;z-index:1;background:var(--cream)}
.leaflet-popup-content{font:400 .86rem/1.45 'Segoe UI',sans-serif;margin:12px 14px}
.pop-nom{font-weight:800;display:block;margin-bottom:2px}
.pop-adr{color:var(--muted);display:block}
.pop-sup{display:inline-block;margin-top:7px;background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.76rem;font-weight:700}
.pop-approx{display:block;margin-top:6px;font-size:.74rem;color:var(--muted);font-style:italic}

.map-outils{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.map-outils label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.map-outils select{
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;
  font-size:.9rem;background:#fff;cursor:pointer;max-width:100%;
}
.map-compte{font-size:.85rem;color:var(--muted);margin-left:auto}
.map-compte[hidden]{display:none}
.map-compte b{color:var(--ink)}
.map-legende{font-size:.78rem;color:var(--muted);margin-top:10px}

.reseau-list{list-style:none}
.reseau-list li{display:flex;gap:14px;margin-bottom:18px}
/* Pastille rouge de la marque, pictogramme en blanc : 5,34:1, bien au-dessus
   du seuil de 3:1 exigé pour un élément graphique. */
.reseau-list .ic{
  flex:none;width:44px;height:44px;border-radius:11px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.reseau-list .ic svg{width:22px;height:22px;display:block}
/* Seul le titre de la puce passe à la ligne. Les <b> employés dans le texte
   de description doivent rester en ligne, sinon la phrase se disloque. */
.reseau-list > li > div > b{display:block}
.reseau-list span{color:var(--muted);font-size:.95rem}
@media(max-width:860px){.reseau-grid{grid-template-columns:1fr}}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:54px}
.gallery figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;background:#000}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{
  position:absolute;inset:auto 0 0 0;color:#fff;font-size:.78rem;font-weight:600;
  padding:24px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.78));
}
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr}}

/* 6 ──────────────────────────────────────── Pourquoi et Pour qui */

.why{background:var(--ink);color:#fff}
.why .center p{color:#aab0ba}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:30px}
/* Sur fond sombre, l'or de la charte plutôt que le rouge, qui s'y éteindrait :
   pictogramme doré sur pastille dorée transparente, 6,07:1. */
.why-card .ic{
  width:46px;height:46px;border-radius:12px;margin-bottom:16px;
  background:rgba(224,162,61,.16);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.why-card .ic svg{width:23px;height:23px;display:block}
.why-card h3{font-size:1.2rem;margin-bottom:8px}
.why-card p{color:#aab0ba;font-size:.96rem}
@media(max-width:860px){.why-grid{grid-template-columns:1fr}}

.targets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* Bandeau visuel de la carte. Ratio 2:1 verrouillé : la hauteur suit la largeur,
   donc les six cartes restent alignées quelle que soit la taille d'écran.
   Les coins hauts sont arrondis par le débordement masqué de .tcard — l'image
   fournie doit donc être un rectangle plein, sans coins transparents. */
.tcard .top{
  aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;background:linear-gradient(135deg,var(--cream),#ece6dc);
  overflow:hidden;
}
.tcard .top picture,
.tcard .top img{width:100%;height:100%;object-fit:cover;display:block}
.tcard .body{padding:20px 22px}
.tcard h3{font-size:1.12rem;margin-bottom:6px}
.tcard p{color:var(--muted);font-size:.92rem}
.tcard.press .top{background:linear-gradient(135deg,#15171c,#3a3d44);color:#fff}
.tcard .top.avec-image{background:none}
@media(max-width:860px){.targets{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.targets{grid-template-columns:1fr}}

/* 7 ────────────────────────── Module « Visualisez votre affiche » */

.visu{background:var(--cream)}
.visu-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.uploader{
  display:block;background:#fff;border:2px dashed var(--accent);border-radius:var(--radius);
  padding:34px;text-align:center;cursor:pointer;transition:background .2s,border-color .2s;
}
.uploader:hover,.uploader.survol{background:#fff6f5}
.uploader .ic{font-size:2.4rem}
.uploader b{display:block;margin:10px 0 4px;font-size:1.05rem}
.uploader span{color:var(--muted);font-size:.9rem}
.visu-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}
.lien-sobre{background:none;border:none;font:inherit;font-size:.88rem;color:var(--muted);text-decoration:underline;cursor:pointer;padding:6px}
.lien-sobre:hover{color:var(--accent)}

.scene{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 22px 50px rgba(21,23,28,.22);max-width:420px;margin:0 auto}
.scene>img{width:100%;height:auto;display:block}
/* Le calque est calé sur le panneau réel de la photo, en pourcentage pour
   rester juste à toutes les tailles d'écran.
   Il doit RECOUVRIR le cadre de la photo, pas s'y inscrire : un calque calé
   sur l'ouverture laisse dépasser le cadre d'origine sur les bords, et on voit
   alors deux cadres l'un dans l'autre. Débords mesurés au rendu, à 3× :
   16 px à gauche, 21 px à droite, 23 px en bas, rien en haut — le calque y
   couvrait déjà. Repris avec 2 px CSS de marge de chaque côté. */
.scene .panel{
  position:absolute;left:27.1%;top:26.8%;width:47.3%;height:49.4%;
  background:#eef0f4 center/cover no-repeat;
  border:4px solid #14171f;border-radius:2px;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  color:#7a7f88;font-size:.78rem;text-align:center;padding:10px;
}
.scene .badge{position:absolute;left:14px;top:14px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:999px}
@media(max-width:860px){.visu-grid{grid-template-columns:1fr}}

/* 8 ─────────────────── Références, contact et pied de page */

/* Références : cartouches simples, filet gris et texte noir. Volontairement
   sobre — c'est une liste de noms, pas une galerie de logos. */
.refs{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px}
.refs span{
  border:1px solid var(--line);border-radius:999px;padding:11px 24px;
  font-weight:700;font-size:.95rem;color:var(--ink);background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.refs span:hover{border-color:#cfc7ba;box-shadow:0 6px 16px rgba(21,23,28,.07)}
.refs-note{font-size:.82rem;color:var(--muted);margin-top:22px}
@media(max-width:520px){.refs{gap:10px}.refs span{padding:9px 18px;font-size:.9rem}}

.contact{background:var(--ink);color:#fff}
.contact h2{color:#fff}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px}
.contact .lead{color:#aab0ba;margin:14px 0 26px}
.cinfo{list-style:none}
.cinfo li{margin-bottom:14px;color:#cdd2db}
.cinfo b{color:#fff}
.cinfo a:hover{color:#fff;text-decoration:underline}

form{background:#fff;border-radius:var(--radius);padding:28px;color:var(--ink)}
.field{margin-bottom:16px}
label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px}
input,select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;background:var(--paper);color:var(--ink);
}
textarea{resize:vertical;min-height:84px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--accent);background:#fff8f8}
.err{display:block;color:var(--accent);font-size:.8rem;font-weight:600;margin-top:5px;min-height:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rgpd{font-size:.78rem;color:var(--muted);margin-top:14px}
.rgpd a{text-decoration:underline}
/* Champ leurre : invisible pour l'humain, rempli par les robots. */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-msg{border-radius:10px;padding:14px 16px;font-size:.9rem;font-weight:600;margin-bottom:18px}
.form-msg.ok{background:#eef7f1;border:1px solid #b6ddc6;color:#175f3e}
.form-msg.ko{background:#fdecec;border:1px solid #f0b6b6;color:#96181e}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

footer{background:#0d0e11;color:#8a9099;padding:34px 0;font-size:.86rem}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a:hover{color:#fff;text-decoration:underline}

/* Le bandeau de consentement a été retiré : la mesure d'audience du site
   n'écrit rien sur l'appareil du visiteur, il n'y a donc rien à consentir.
   Les styles correspondants sont partis avec lui. */