/*
Theme Name: HCM Partners Starter
Theme URI: https://hcmp.ch/
Author: webressources.ch
Author URI: https://webressources.ch/
Description: Thème de démarrage sur mesure reproduisant la structure, la navigation et l'identité visuelle (couleurs, typographies) du site HCM Partners. Contenu textuel repris du site existant comme base de départ, à enrichir. Logo et images à ajouter depuis l'ancien site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hcm-partners
License: GNU General Public License v2 or later
License URI: LICENSE
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root{
  --hcm-orange: #F05A28;
  --hcm-orange-dark: #D6481C;
  --hcm-yellow: #F7B733;
  --hcm-cream: #FEF3E7;
  --hcm-dark: #333333;
  --hcm-dark-soft: #4D4D4D;
  --hcm-text: #111111;
  --hcm-text-muted: #6b6b6b;
  --hcm-white: #FFFFFF;
  --hcm-border: #ece0d3;

  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Alex Brush', cursive;
  --font-alt: 'PT Sans', var(--font-body);

  --container-w: 1200px;
  --radius: 6px;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--hcm-text);
  background: var(--hcm-white);
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--hcm-orange); text-decoration:none; }
a:hover{ color: var(--hcm-orange-dark); }
ul{ padding-left: 1.2em; }
.container{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ==========================================================================
   3. Titres & accents "script"
   ========================================================================== */

h1,h2,h3,h4{ font-weight:600; line-height:1.25; margin: 0 0 .6em; }

.script-heading{
  font-family: var(--font-script);
  font-weight:400;
  color: var(--hcm-orange);
  font-size: 3.4rem;
  text-align:center;
  margin: 0 0 .4em;
}

.section-title{
  text-align:center;
  margin-bottom: 2.2rem;
}

/* ==========================================================================
   4. Header / navigation
   ========================================================================== */

.site-header{
  position: relative;
  background: linear-gradient(115deg, var(--hcm-orange) 0%, var(--hcm-yellow) 65%, #ffd98c 100%);
  /* pas d'overflow:hidden ici : ça coupait les sous-menus déroulants */
}
.site-header__bg{
  /* motif géométrique léger en superposition, à la place du visuel d'origine */
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 35%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.08) 0 2px, transparent 2px 40px);
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.header-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 24px;
  max-width: var(--container-w);
  margin:0 auto;
  z-index: 2;
}
.site-branding{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.site-branding .logo-link{ display:flex; flex-direction:column; }
.site-title{
  font-family: var(--font-script);
  font-size: 2.6rem;
  color: var(--hcm-orange-dark);
  margin:0;
}
.site-tagline{
  font-family: var(--font-alt);
  font-size: .68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--hcm-text);
  opacity:.75;
}
/* si un logo image est ajouté (voir assets/images/logo.png), il remplace le texte */
.site-branding img.custom-logo{ max-height:64px; width:auto; }

.menu-toggle{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:8px;
  z-index:20;
}
.menu-toggle span{
  display:block;
  width:26px; height:3px;
  background: var(--hcm-text);
  margin: 5px 0;
  border-radius:2px;
}

.primary-nav{ position:relative; z-index:10; }
.primary-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap: 4px;
  margin:0; padding:0;
}
.primary-nav li{ position:relative; }
.primary-nav a{
  display:block;
  padding: 10px 16px;
  font-size:.95rem;
  font-weight:600;
  color: var(--hcm-text);
  white-space:nowrap;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a{ color: var(--hcm-white); }
.primary-nav .lang-switch a{
  border: 1px solid rgba(17,17,17,.4);
  border-radius: 3px;
  padding: 6px 10px;
  font-size:.8rem;
}

.primary-nav li.has-children > a::after{
  content:"▾"; font-size:.7em; margin-left:5px; opacity:.7;
}
.primary-nav .sub-menu{
  display:none;
  position:absolute;
  top:100%; left:0;
  min-width: 260px;
  background: var(--hcm-white);
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
  border-radius: var(--radius);
  padding: 8px 0;
  flex-direction:column;
}
.primary-nav .sub-menu .sub-menu{
  top:0; left:100%;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li.sub-menu-open > .sub-menu{ display:flex; }
.primary-nav .sub-menu a{
  color: var(--hcm-text);
  padding: 9px 18px;
  font-weight:500;
}
.primary-nav .sub-menu a:hover{ color: var(--hcm-orange); background: var(--hcm-cream); }

.page-hero{
  position:relative;
  padding: 70px 24px 60px;
  text-align:center;
}
.page-hero h1{
  font-size: 2.2rem;
  color: var(--hcm-dark);
  margin:0;
}

/* ==========================================================================
   5. Sections génériques
   ========================================================================== */

.section{ padding: 64px 0; }
.section--cream{ background: var(--hcm-cream); }
.section--white{ background: var(--hcm-white); }
.section--dark{ background: var(--hcm-dark); color: var(--hcm-white); }

.intro-text{
  max-width: 880px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--hcm-text);
}
.intro-text p{ margin: 0 0 1.1em; }

/* ==========================================================================
   6. Grille de services / cartes
   ========================================================================== */

.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px){
  .services-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .services-grid{ grid-template-columns: 1fr; }
}

.service-card{
  background: var(--hcm-white);
  border: 1px solid var(--hcm-border);
  border-radius: var(--radius);
  overflow:hidden;
  text-align:center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.08);
}
.service-card__media{
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--hcm-cream), #f3e3cf);
  display:flex; align-items:center; justify-content:center;
  color: var(--hcm-orange);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  overflow:hidden;
}
.service-card__media--photo{ padding:0; }
.service-card__media--photo img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.service-card__body{ padding: 20px 18px 26px; }
.service-card__title{
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: #8a8a8a;
  margin: 0 0 .3em;
}
.service-card:hover .service-card__title{ color: var(--hcm-orange); }
.service-card__excerpt{
  font-size: .92rem;
  color: var(--hcm-text-muted);
  margin: 0;
}
.service-card__link{
  display:inline-block;
  margin-top: 14px;
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color: var(--hcm-orange);
}

/* ==========================================================================
   7. Contenu de page standard / pages de service
   ========================================================================== */

.page-content{
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 24px;
}
.page-content h2{ color: var(--hcm-orange); font-family: var(--font-alt); font-size:1.5rem; }
.page-content ul{ margin: 0 0 1.4em; }
.page-content li{ margin-bottom: .4em; }
.page-content blockquote{
  border-left: 3px solid var(--hcm-orange);
  margin: 1.6em 0;
  padding: .3em 1.2em;
  font-style: italic;
  color: var(--hcm-text-muted);
}
.cta-box{
  margin-top: 2.4em;
  padding: 28px;
  background: var(--hcm-cream);
  border-radius: var(--radius);
  text-align:center;
}
.cta-box a.button{
  display:inline-block;
  margin-top: 12px;
  padding: 12px 28px;
  background: var(--hcm-orange);
  color: var(--hcm-white);
  border-radius: 4px;
  font-weight:700;
}
.cta-box a.button:hover{ background: var(--hcm-orange-dark); color:var(--hcm-white); }

/* ==========================================================================
   8. Équipe / valeurs / témoignages
   ========================================================================== */

.team-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width:760px){ .team-grid{ grid-template-columns: 1fr; } }
.team-member__name{
  font-family: var(--font-script);
  color: var(--hcm-orange);
  font-size: 2rem;
  margin-bottom:.2em;
}
.team-member__bio p{ margin: 0 0 1em; font-size:.96rem; }

.values-list{
  list-style:none;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
}
.values-list li{
  padding: 16px 0 16px 40px;
  border-bottom: 1px solid var(--hcm-border);
  position:relative;
  font-size: 1.05rem;
}
.values-list li::before{
  content:"✓";
  position:absolute; left:0; top:14px;
  color: var(--hcm-orange);
  font-weight:700;
}

.testimonials-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width:760px){ .testimonials-grid{ grid-template-columns: 1fr; } }
.testimonial-card{
  background: var(--hcm-white);
  border: 1px solid var(--hcm-border);
  border-radius: var(--radius);
  padding: 22px 24px;
  font-style: italic;
}
.testimonial-card cite{
  display:block;
  margin-top: 12px;
  font-style: normal;
  font-weight:700;
  color: var(--hcm-orange);
}

/* ==========================================================================
   9. Contact
   ========================================================================== */

.contact-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width:760px){ .contact-wrap{ grid-template-columns: 1fr; } }
.contact-info p{ margin: 0 0 .6em; }
.contact-info .label{ font-weight:700; display:block; margin-top:1em; }
.contact-form input,
.contact-form textarea{
  width:100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--hcm-border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: .95rem;
}
.contact-form button{
  padding: 12px 30px;
  background: var(--hcm-orange);
  color: var(--hcm-white);
  border:0;
  border-radius:4px;
  font-weight:700;
  cursor:pointer;
}
.contact-form button:hover{ background: var(--hcm-orange-dark); }

/* ==========================================================================
   10. Footer
   ========================================================================== */

.site-footer{
  background: var(--hcm-dark);
  color: var(--hcm-white);
  padding: 48px 0 24px;
  text-align:center;
}
.site-footer a{ color: var(--hcm-white); }
.site-footer a:hover{ color: var(--hcm-yellow); }
.site-footer .footer-name{ font-weight:700; }
.site-footer .footer-meta{
  margin-top: 18px;
  font-size:.8rem;
  opacity:.6;
}

/* ==========================================================================
   11. Bannière cookies (statique, reproduit le comportement d'origine)
   ========================================================================== */

.cookie-banner{
  position: fixed;
  left:0; right:0; bottom:0;
  background: var(--hcm-dark-soft);
  color: var(--hcm-white);
  padding: 20px 24px;
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  align-items:center;
  justify-content:space-between;
  z-index: 999;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ margin:0; font-size:.85rem; max-width: 700px; }
.cookie-banner a{ text-decoration:underline; }
.cookie-banner button{
  background: var(--hcm-orange);
  color:#fff; border:0; padding: 10px 22px;
  border-radius:4px; font-weight:700; cursor:pointer;
}

/* ==========================================================================
   12. Responsive nav (mobile)
   ========================================================================== */

@media (max-width: 900px){
  .menu-toggle{ display:block; }
  .primary-nav{
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--hcm-white);
    box-shadow: 0 12px 24px rgba(0,0,0,.14);
    display:none;
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{ flex-direction:column; align-items:stretch; }
  .primary-nav a{ color: var(--hcm-text); padding: 14px 24px; border-bottom:1px solid var(--hcm-border); }
  .primary-nav .sub-menu{
    position:static; box-shadow:none; display:none; padding-left: 16px;
    min-width:0;
  }
  .primary-nav .sub-menu .sub-menu{ left:0; }
  .primary-nav li.sub-menu-open > .sub-menu{ display:flex; }
}