/*
Theme Name: L2S Média
Theme URI: https://www.l2smedia.fr
Author: L2S Média
Description: Thème sur-mesure pour L2S Média — deux univers (Communication & Documentaire) sur un socle WordPress natif, sans extension.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: l2smedia
*/

/* ============ POLICES ============ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root{
  --l2s-red:#E30613;
  --l2s-black:#1D1D1B;
  --l2s-dark:#0d0d0d;
  --l2s-white:#ffffff;
  --l2s-gray-bg:#f6f6f6;
  --l2s-gray-text:#5a5a5a;
  --l2s-border:#e6e6e6;
  --font-display:'Anton', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-script:'Caveat', cursive;
  --container:1180px;
}

/* ============ RESET DE BASE ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--l2s-black);
  line-height:1.65;
  background:var(--l2s-white);
  font-size:16px;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{padding-left:1.2em;}
.l2s-container{max-width:var(--container) !important;margin:0 auto !important;padding:0 24px !important;box-sizing:border-box !important;width:auto !important;}
@media(max-width:480px){.l2s-container{padding:0 18px !important;}}

/* ============ EN-TÊTE ============ */
.l2s-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--l2s-border);z-index:100;}
.l2s-header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:14px !important;padding-bottom:14px !important;gap:24px;}
.l2s-logo img{height:42px;width:auto;}
.l2s-nav{position:relative;}
.l2s-menu{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.l2s-menu li{margin:0;}
.l2s-menu a{font-weight:600;text-transform:uppercase;font-size:.8rem;letter-spacing:.05em;}
.l2s-menu a:hover{color:var(--l2s-red);}
.l2s-switcher{display:flex;gap:10px;}
.l2s-switcher a{background:var(--l2s-black);color:#fff;padding:10px 18px;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;transition:background .2s ease;}
.l2s-switcher a:hover{background:var(--l2s-red);}
.l2s-burger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;line-height:1;padding:4px 8px;}

@media(max-width:900px){
  .l2s-nav{position:static;}
  .l2s-menu{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:10px 24px;display:none;border-bottom:1px solid var(--l2s-border);box-shadow:0 8px 16px rgba(0,0,0,.06);z-index:150;}
  .l2s-menu.is-open{display:flex;}
  .l2s-menu a{display:block;padding:12px 0;border-bottom:1px solid var(--l2s-border);}
  .l2s-burger{display:block;}
}

/* ============ TYPOGRAPHIE DE MARQUE ============ */
.l2s-kicker{
  font-family:var(--font-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--l2s-red);font-size:.78rem;display:flex;align-items:center;gap:10px;margin:0 0 18px;
}
.l2s-kicker::before{content:"";width:28px;height:2px;background:var(--l2s-red);display:inline-block;flex:none;}

.l2s-h1, h1.l2s-h1{
  font-family:var(--font-display);font-style:italic;text-transform:uppercase;
  font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.04;margin:0 0 24px;
}
.l2s-h2, h2.l2s-h2{
  font-family:var(--font-display);font-style:italic;text-transform:uppercase;
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.06;margin:0 0 20px;
}
.l2s-underline{position:relative;display:inline-block;}
.l2s-underline::after{
  content:"";position:absolute;left:2px;right:2px;bottom:2px;height:9px;
  background:var(--l2s-red);transform:skewX(-10deg);z-index:-1;
}
.l2s-script{font-family:var(--font-script);color:var(--l2s-red);font-size:1.4rem;}

mark, .l2s-mark{background:var(--l2s-black);color:#fff;padding:2px 8px;border-radius:2px;font-style:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.l2s-mark.is-red{background:var(--l2s-red);}

/* ============ SECTIONS / GABARIT DE PAGE ============ */
.l2s-main{min-height:60vh;}
.l2s-page-content{padding-top:44px !important;padding-bottom:70px !important;}
.l2s-page-content > *:first-child{margin-top:0;}
.l2s-section{padding:56px 24px !important;}
.l2s-section.is-dark{background:var(--l2s-dark);color:#fff;}
.l2s-section.is-dark .l2s-h1,.l2s-section.is-dark .l2s-h2{color:#fff;}
.l2s-section.is-gray{background:var(--l2s-gray-bg);}
.l2s-lead{font-size:1.15rem;color:var(--l2s-gray-text);max-width:760px;}
.l2s-section.is-dark .l2s-lead{color:#cfcfcf;}

/* ============ BOUTONS (blocs natifs WordPress) ============ */
.wp-block-button__link, .l2s-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--l2s-black);color:#fff !important;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:15px 30px;border-radius:999px;font-size:.82rem;
  transition:background .2s ease, transform .2s ease;
}
.wp-block-button__link:hover{background:var(--l2s-red);transform:translateY(-2px);}
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;border:2px solid currentColor;color:var(--l2s-black) !important;
}
.l2s-section.is-dark .wp-block-button.is-style-outline .wp-block-button__link{color:#fff !important;}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--l2s-red);border-color:var(--l2s-red);color:#fff !important;}
.wp-block-buttons{gap:14px;flex-wrap:wrap;}

/* ============ HERO 2 COLONNES (page "Accueil" de chaque univers) ============ */
.l2s-hero-split{display:grid !important;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;padding:50px 0 60px;}
.l2s-hero-photo{margin:0;}
.l2s-hero-photo figure{margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:#ddd;position:relative;}
.l2s-hero-photo figure::before{
  content:"Photo à remplacer";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:#888;text-transform:uppercase;letter-spacing:.05em;pointer-events:none;
}
.l2s-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;position:relative;z-index:1;}
@media(max-width:900px){.l2s-hero-split{grid-template-columns:1fr;gap:30px;padding:30px 0 40px;}}

/* ============ CARTES NUMÉROTÉES (services / domaines) ============ */
.l2s-cards{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:36px 0;}
.l2s-card{background:var(--l2s-dark);color:#fff;padding:34px 28px !important;border-radius:6px;box-sizing:border-box;}
.l2s-cards > .wp-block-column{padding:34px 28px !important;border-radius:6px !important;}
.l2s-card.is-highlight{background:var(--l2s-red);}
.l2s-card .l2s-card-num{font-family:var(--font-display);font-style:italic;color:var(--l2s-red);font-size:1.7rem;margin:0 0 8px;display:block;}
.l2s-card.is-highlight .l2s-card-num{color:#fff;}
.l2s-card h3{font-size:.95rem;text-transform:uppercase;margin:0 0 10px;font-weight:800;letter-spacing:.02em;}
.l2s-card p{font-size:.87rem;color:#cfcfcf;margin:0;}
.l2s-card.is-highlight p{color:rgba(255,255,255,.9);}
@media(max-width:980px){.l2s-cards{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.l2s-cards{grid-template-columns:1fr;}}

/* ============ ÉTAPES / MÉTHODE (avec flèches) ============ */
.l2s-steps{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:36px 0;}
@media(max-width:980px){.l2s-steps{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.l2s-steps{grid-template-columns:1fr;}}
.l2s-step{flex:1 1 190px;background:var(--l2s-gray-bg);border-radius:6px;padding:32px 26px !important;position:relative;box-sizing:border-box;}
.l2s-steps > .wp-block-column{flex:1 1 190px;background:var(--l2s-gray-bg) !important;border-radius:6px !important;padding:32px 26px !important;}
.l2s-section.is-dark .l2s-steps > .wp-block-column{background:rgba(255,255,255,.06) !important;}
.l2s-section.is-dark .l2s-step{background:rgba(255,255,255,.06);}
.l2s-step .l2s-step-num{font-family:var(--font-display);font-style:italic;font-size:2.1rem;color:var(--l2s-red);display:block;}
.l2s-step h3{text-transform:uppercase;font-size:.9rem;margin:8px 0;font-weight:800;}
.l2s-step p{font-size:.85rem;color:var(--l2s-gray-text);margin:0;}
.l2s-section.is-dark .l2s-step p{color:#cfcfcf;}
.l2s-step-arrow{display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--l2s-red);flex:0 0 auto;padding:0 2px;}
@media(max-width:700px){.l2s-step-arrow{display:none;}}

/* ============ CHIFFRES CLÉS (fond sombre) ============ */
.l2s-stats-grid{display:flex !important;gap:48px;flex-wrap:wrap;margin-bottom:44px;}
@media(max-width:600px){.l2s-stats-grid{flex-direction:column;gap:28px;}}
.l2s-stat .l2s-stat-num{font-family:var(--font-display);font-style:italic;color:var(--l2s-red);font-size:3rem;line-height:1;display:block;}
.l2s-stat p{margin:8px 0 0;font-size:.9rem;color:#cfcfcf;max-width:220px;}
.l2s-info-boxes{display:grid !important;grid-template-columns:1fr 1fr;gap:20px;}
.l2s-info-box{padding:40px !important;border-radius:6px;box-sizing:border-box;}
.l2s-info-boxes > .wp-block-column{padding:40px !important;border-radius:6px !important;}
.l2s-info-box.is-outline{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.05);}
.l2s-info-box.is-filled{background:#fff;color:var(--l2s-black);}
.l2s-info-box h4{text-transform:uppercase;font-size:.95rem;margin:0 0 12px;font-weight:800;}
.l2s-info-box .l2s-badge{background:var(--l2s-red);color:#fff;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:3px;margin-right:8px;}
@media(max-width:700px){.l2s-info-boxes{grid-template-columns:1fr;}}

/* ============ PARCOURS / TIMELINE (pages "Qui suis-je") ============ */
.l2s-timeline-block{border-left:3px solid var(--l2s-red);padding:4px 0 4px 22px;margin:0 0 28px;}
.l2s-timeline-block:last-child{margin-bottom:0;}
.l2s-timeline-block .l2s-timeline-date{color:var(--l2s-red);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;display:block;margin-bottom:4px;}
.l2s-timeline-block h3{text-transform:uppercase;font-size:1rem;margin:0 0 8px;font-weight:800;}
.l2s-timeline-block p{margin:0;color:var(--l2s-gray-text);font-size:.92rem;}

/* ============ TÉMOIGNAGES ============ */
.l2s-testimonials{display:grid !important;grid-template-columns:repeat(2,1fr);gap:22px;margin:36px 0;}
.l2s-quote{background:var(--l2s-gray-bg);border-left:4px solid var(--l2s-red);padding:34px 34px !important;border-radius:6px;box-sizing:border-box;}
.l2s-testimonials > .wp-block-column{background:var(--l2s-gray-bg) !important;border-left:4px solid var(--l2s-red) !important;padding:34px 34px !important;border-radius:6px !important;}
.l2s-quote p.l2s-quote-text{font-style:italic;margin:0 0 16px;color:var(--l2s-black);}
.l2s-quote .l2s-quote-author{font-weight:800;text-transform:uppercase;font-size:.82rem;display:block;}
.l2s-quote .l2s-quote-role{color:var(--l2s-gray-text);font-size:.8rem;display:block;margin-top:2px;}
@media(max-width:800px){.l2s-testimonials{grid-template-columns:1fr;}}

/* ============ GRILLE DE LOGOS CLIENTS ============ */
.l2s-logos{display:grid !important;grid-template-columns:repeat(5,1fr);gap:16px;margin:36px 0;}
.l2s-logo-cell{border:1px solid var(--l2s-border);border-radius:6px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;padding:14px !important;text-align:center;box-sizing:border-box;}
.l2s-logos > .wp-block-column{border:1px solid var(--l2s-border) !important;border-radius:6px !important;aspect-ratio:16/10;display:flex !important;align-items:center;justify-content:center;padding:14px !important;text-align:center;}
.l2s-logo-cell img{max-height:48px;max-width:80%;width:auto;margin:0 auto;object-fit:contain;}
.l2s-logo-cell span{font-size:.75rem;color:var(--l2s-gray-text);text-transform:uppercase;letter-spacing:.03em;}
@media(max-width:900px){.l2s-logos{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.l2s-logos{grid-template-columns:repeat(2,1fr);}}

/* ============ CONTACT ============ */
.l2s-contact{display:grid !important;grid-template-columns:0.9fr 1.1fr;gap:50px;align-items:stretch;padding:20px 0 20px;}
.l2s-contact-brand{background:var(--l2s-dark);color:#fff;padding:44px;border-radius:6px;display:flex;flex-direction:column;justify-content:center;}
.l2s-contact-brand img{max-width:150px;margin-bottom:22px;}
.l2s-contact-brand p{color:#cfcfcf;}
.l2s-contact-brand .l2s-script{display:block;margin-top:18px;}
.l2s-contact-info p{padding:16px 0;border-bottom:1px solid var(--l2s-border);margin:0;}
.l2s-contact-info p:last-of-type{border-bottom:none;}
.l2s-contact-info strong{display:block;text-transform:uppercase;font-size:.7rem;color:var(--l2s-red);letter-spacing:.06em;margin-bottom:4px;}
.l2s-contact-info a:hover{color:var(--l2s-red);}
@media(max-width:800px){.l2s-contact{grid-template-columns:1fr;}}

/* ============ GALERIE / PORTFOLIO (grille générique) ============ */
.l2s-portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0;}
.l2s-portfolio-item{border-radius:6px;overflow:hidden;background:#ddd;position:relative;}
.l2s-portfolio-item figure{margin:0;aspect-ratio:16/10;position:relative;}
.l2s-portfolio-item figure::before{
  content:"Média à remplacer";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;color:#888;text-transform:uppercase;letter-spacing:.04em;
}
.l2s-portfolio-item img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.l2s-portfolio-caption{padding:14px 4px 0;}
.l2s-portfolio-caption .l2s-tag{color:var(--l2s-red);font-weight:700;text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;}
@media(max-width:900px){.l2s-portfolio-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.l2s-portfolio-grid{grid-template-columns:1fr;}}

/* ============ ÉLÉMENTS NATIFS (au cas où utilisés) ============ */
.wp-block-embed, .wp-block-video{max-width:100%;margin:28px 0;}
.wp-block-embed iframe{width:100%;aspect-ratio:16/9;height:auto;border-radius:6px;}
.wp-block-quote{border-left:4px solid var(--l2s-red);padding-left:20px;font-style:italic;margin:28px 0;}
.wp-block-separator{border:none;border-top:1px solid var(--l2s-border);margin:40px 0;}

/* ============ PIED DE PAGE ============ */
.l2s-footer{background:var(--l2s-dark);color:#fff;padding:54px 0 20px;margin-top:20px;}
.l2s-footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12);}
.l2s-footer-logo{height:48px;width:auto;margin-bottom:12px;}
.l2s-footer-tagline{font-family:var(--font-script);font-size:1.25rem;color:#cfcfcf;margin:0;}
.l2s-footer-contact p{margin:5px 0;font-size:.92rem;}
.l2s-footer-contact a:hover{color:var(--l2s-red);}
.l2s-footer-copy{text-align:center;color:#777;font-size:.76rem;margin:22px 0 0;}
.l2s-footer-legal{text-align:center;font-size:.76rem;margin:8px 0 0;}
.l2s-footer-legal a{color:#999;}
.l2s-footer-legal a:hover{color:#fff;}
.l2s-footer-legal span{color:#555;margin:0 6px;}

/* ============ PAGE D'ACCUEIL — SÉLECTEUR ============ */
body.l2s-splash-body{margin:0;background:#000;}
.l2s-splash{min-height:100vh;display:flex;flex-direction:column;}
.l2s-splash-logo{text-align:center;padding:44px 20px 30px;}
.l2s-splash-logo img{max-width:190px;margin:0 auto 14px;}
.l2s-splash-logo p{color:#eee;font-family:var(--font-script);font-size:1.3rem;margin:0;}
.l2s-splash-panels{flex:1;display:flex;min-height:420px;}
.l2s-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px;transition:flex .35s ease;position:relative;}
.l2s-panel-dark{background:#111;color:#fff;}
.l2s-panel-red{background:var(--l2s-red);color:#fff;}
.l2s-panel:hover{flex:1.15;}
.l2s-panel-label{font-family:var(--font-display);font-style:italic;font-size:clamp(2rem,6vw,4rem);text-transform:uppercase;}
.l2s-panel-sub{margin-top:12px;font-size:1rem;opacity:.85;max-width:280px;}
.l2s-splash-legal{text-align:center;font-size:.72rem;color:#777;padding:14px 20px;background:#000;margin:0;}
.l2s-splash-legal a{color:#999;}
.l2s-splash-legal a:hover{color:#fff;}
.l2s-splash-legal span{margin:0 6px;color:#555;}
@media(max-width:700px){.l2s-splash-panels{flex-direction:column;}.l2s-splash-panels{min-height:auto;}.l2s-panel{padding:50px 30px;}}