/*
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 et la navigation du site HCM Partners, avec une mise en page inspirée d'emanence.ch (photo plein cadre, typographie Syne) tout en conservant les couleurs chaudes (orange/crème) de l'identité HCM Partners. Logo HCM Partners conservé. Contenu textuel repris du site existant comme base de départ, à enrichir.
Version: 2.12
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 — couleurs chaudes HCM Partners, mise en page emanence.ch
   ========================================================================== */

:root{
  --hcm-olive: #F05A28;
  --hcm-olive-dark: #C2451D;
  --hcm-olive-tint: rgba(240, 90, 40, .08);
  --hcm-tan: #E3A857;
  --hcm-tan-dark: #C98F3E;
  --hcm-cream: #FBF1E4;
  --hcm-cream-deep: #F3E4CE;
  --hcm-dark: #33241C;
  --hcm-text: #33241C;
  --hcm-text-muted: #8A7A6D;
  --hcm-white: #FFFFFF;
  --hcm-off-white: #FFF8EF;
  --hcm-border: #E8D9C3;

  /* alias conservés pour compatibilité avec les gabarits existants */
  --hcm-orange: var(--hcm-olive);
  --hcm-orange-dark: var(--hcm-olive-dark);
  --hcm-yellow: var(--hcm-tan);
  --hcm-dark-soft: var(--hcm-olive-dark);

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

  /* --- typographies personnalisables (Apparence > Personnaliser > Apparence HCM Partners) --- */
  --hcm-color-h1h2: var(--hcm-dark);
  --font-h3: var(--font-body);
  --hcm-color-h3: var(--hcm-dark);
  --font-h4: var(--font-body);
  --hcm-color-h4: var(--hcm-text-muted);

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

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

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;
  color: var(--hcm-text);
  background: var(--hcm-white);
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--hcm-olive); text-decoration:none; }
a:hover{ color: var(--hcm-olive-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
   ========================================================================== */

h1,h2{ font-family: var(--font-script); font-weight:400; line-height:1.15; margin: 0 0 .6em; color: var(--hcm-color-h1h2); }
h3{ font-family: var(--font-h3); font-weight:700; line-height:1.15; margin: 0 0 .6em; color: var(--hcm-color-h3); }
h4{ font-family: var(--font-h4); font-weight:700; line-height:1.15; margin: 0 0 .6em; color: var(--hcm-color-h4); }

.eyebrow{
  display:block;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--hcm-olive);
  margin: 0 0 .8em;
}

.script-heading{
  font-family: var(--font-script);
  font-weight:400;
  color: var(--hcm-color-h1h2);
  font-size: 3.4rem;
  text-align:center;
  margin: 0 0 .5em;
  line-height:1.15;
  opacity:0;
  transform: translateX(-56px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.script-heading.is-visible{ opacity:1; transform: translateX(0); }

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

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

.site-header{
  position: relative;
  background: var(--hcm-cream);
}

/* --- variante page d'accueil : photo plein cadre --- */
.site-header--photo{
  min-height: 92vh;
  display:flex;
  flex-direction:column;
  color: var(--hcm-off-white);
  background: var(--hcm-olive-dark);
  overflow:hidden;
}
.site-header__media{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center 60%;
  z-index:0;
  animation: hcm-hero-kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hcm-hero-kenburns{
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.14) translate3d(-2%, -1.5%, 0); }
}
.site-header__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(51,36,28,.55) 0%, rgba(51,36,28,.15) 30%, rgba(51,36,28,.1) 55%, rgba(51,36,28,.75) 100%);
  z-index:1;
}

/* --- barre de navigation fixe, reste visible au scroll --- */
.site-navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  /* --- fond du menu, page d'accueil / autres pages : réglable dans
     Apparence > Personnaliser > Apparence HCM Partners > Menu de
     navigation. Les valeurs de repli ci-dessous reproduisent exactement
     le design d'origine (dégradé sombre sur l'accueil, blanc ailleurs)
     tant qu'aucun réglage n'a été enregistré. --- */
  background: var(--hcm-navbar-other-bg, #FFFFFF);
  color: var(--hcm-text);
  transition: background .35s ease, box-shadow .35s ease, color .35s ease;
}
.site-navbar--photo{
  color: var(--hcm-off-white);
  background: var(--hcm-navbar-home-bg, linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,0) 62%));
}
.site-navbar.is-scrolled{
  background: rgba(255,255,255,.88);
  box-shadow: 0 4px 24px rgba(51,36,28,.08);
}
.site-navbar--photo.is-scrolled{ color: var(--hcm-text); }
.site-navbar .header-divider{ transition: opacity .3s ease; }
.site-navbar.is-scrolled .header-divider{ opacity:0; }

/* --- sélecteur de langue, dans le bandeau avant le lien Accueil --- */
.lang-switcher-wrap{
  display:flex;
  align-items:center;
  margin-right: 4px;
}
.lang-switcher{ position:relative; }
.lang-switcher__toggle{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  background:none;
  border:0;
  padding:10px 16px;
  color:inherit;
  font-family: var(--font-body);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  cursor:pointer;
  transition: color .2s ease;
}
.lang-switcher__toggle:hover{ color: var(--hcm-tan); }
.lang-switcher__chevron{
  display:inline-block;
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s ease;
  opacity:.75;
}
.lang-switcher.is-open .lang-switcher__chevron{ transform: rotate(-135deg); }

.lang-switcher__menu{
  position:absolute;
  top: calc(100% + var(--header-dropdown-gap, 30px));
  left:0;
  text-align:left;
  margin:0;
  min-width:130px;
  list-style:none;
  padding:8px 0;
  background: rgba(0,0,0,.7);
  box-shadow: 0 16px 32px rgba(51,36,28,.16);
  opacity:0;
  visibility:hidden;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s cubic-bezier(.4,0,.2,1), visibility .22s;
  pointer-events:none;
}
.lang-switcher.is-open .lang-switcher__menu{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.lang-switcher__menu a{
  display:block;
  text-align:left;
  padding: 8px 18px;
  font-size:.85rem;
  font-weight:600;
  color: var(--hcm-white);
  transition: background .2s ease, color .2s ease;
}
.lang-switcher__menu a:hover,
.lang-switcher__menu a.is-active{ background: rgba(255,255,255,.12); color: var(--hcm-tan); }

.header-top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 30px 24px;
  max-width: var(--container-w);
  margin:0 auto;
  width:100%;
  z-index: 2;
  transition: padding .35s ease;
  --header-dropdown-gap: 43px; /* espace approximatif jusque sous la ligne blanche (.header-divider) */
}
.site-navbar.is-scrolled .header-top{ padding: 14px 24px; --header-dropdown-gap: 20px; }
.site-branding{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  animation: hcm-slide-in-left .8s cubic-bezier(.16,1,.3,1) both;
}
.site-branding .logo-link{ display:flex; flex-direction:column; position:relative; }
.site-title{
  font-family: var(--font-body);
  font-weight:700;
  font-size: 1.7rem;
  letter-spacing:.04em;
  color: inherit;
  margin:0;
}
.site-tagline{
  font-family: var(--font-body);
  font-size: .65rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: inherit;
  opacity:.75;
}
/* si un logo image est ajouté (voir assets/images/logo.png), il remplace le texte */
.site-branding img.custom-logo{
  max-height:74px; width:auto;
  background: transparent;
  transition: max-height .35s ease, opacity .35s ease;
}
.site-navbar.is-scrolled .site-branding img.custom-logo{ max-height:44px; }

/* --- logo dédié au défilement (Apparence HCM Partners > Logos), fondu enchaîné --- */
.site-branding img.custom-logo.has-scroll-logo{ opacity:1; }
.site-branding img.custom-logo.logo-scrolled{
  position:absolute; left:0; top:0;
  opacity:0;
  pointer-events:none;
}
.site-navbar.is-scrolled .site-branding img.custom-logo.has-scroll-logo{ opacity:0; }
.site-navbar.is-scrolled .site-branding img.custom-logo.logo-scrolled{
  opacity:1;
  pointer-events:auto;
}

.menu-toggle{
  display:none;
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  padding:8px;
  z-index:20;
}
.menu-toggle span{
  display:block;
  width:26px; height:2px;
  background: currentColor;
  margin: 6px 0;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  transform-origin: center;
}

.primary-nav{ position:relative; z-index:10; color:inherit; display:flex; align-items:center; }
.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:1.05rem;
  font-weight:700;
  letter-spacing:.02em;
  color: inherit;
  white-space:nowrap;
  transition: color .2s ease;
}
.primary-nav .current-menu-item > a{ color: var(--hcm-tan); }
.primary-nav .lang-switch a{
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 6px 10px;
  font-size:.75rem;
}

/* --- lien animé : soulignement qui se déploie au survol --- */
.primary-nav > ul > li > a{ position:relative; }
.primary-nav > ul > li > a::before{
  content:"";
  position:absolute;
  left:16px; right:16px; bottom:6px;
  height:2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  opacity:.85;
}
.primary-nav > ul > li > a:hover::before,
.primary-nav > ul > li.current-menu-item > a::before{ transform: scaleX(1); }

/* --- chevron animé pour les items avec sous-menu --- */
.primary-nav li.has-children > a::after{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  margin-left:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .3s ease;
  opacity:.7;
  vertical-align:middle;
}
.primary-nav li.has-children:hover > a::after,
.primary-nav li.has-children.sub-menu-open > a::after{
  transform: rotate(-135deg) translateY(1px);
}

/* --- sous-menus : apparition en fondu + léger glissement --- */
.primary-nav .sub-menu{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  position:absolute;
  top:100%; left:0;
  min-width: 260px;
  background: rgba(0,0,0,.7);
  box-shadow: 0 16px 32px rgba(51,36,28,.16);
  padding: 8px 0;
  opacity:0;
  visibility:hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s cubic-bezier(.4,0,.2,1), visibility .25s;
  pointer-events:none;
}
.primary-nav .sub-menu .sub-menu{
  top:0; left:100%;
}
/* --- 1er niveau seulement : le menu déroulant commence sous la ligne
   blanche (.header-divider) au lieu de juste sous le lien --- */
.primary-nav > ul > li > .sub-menu{
  top: calc(100% + var(--header-dropdown-gap, 30px));
}
/* --- Pont invisible au survol : comble l'espace entre le lien et le menu
   déroulant (créé ci-dessus) pour que la souris ne quitte jamais le <li>
   en descendant vers le menu, sinon le survol (:hover) est perdu avant
   d'atteindre les liens et le menu se referme. --- */
@media (min-width: 901px){
  .primary-nav > ul > li.has-children{
    position:relative;
  }
  .primary-nav > ul > li.has-children::after{
    content:"";
    position:absolute;
    top:100%; left:0; right:0;
    height: var(--header-dropdown-gap, 30px);
    pointer-events:none;
  }
  .primary-nav > ul > li.has-children:hover::after{
    pointer-events:auto;
  }
}
.primary-nav li:hover > .sub-menu,
.primary-nav li.sub-menu-open > .sub-menu{
  opacity:1;
  visibility:visible;
  transform: translateY(0);
  pointer-events:auto;
}
.primary-nav .sub-menu a{
  display:block;
  text-align:left;
  color: var(--hcm-white);
  padding: 9px 18px;
  font-weight:500;
  letter-spacing:normal;
  transition: color .2s ease, background .2s ease, padding-left .2s ease;
}
.primary-nav .sub-menu a::before{ content:none; }
.primary-nav .sub-menu a:hover{ color: var(--hcm-tan); background: rgba(255,255,255,.12); padding-left: 22px; }

/* --- dernier lien du menu (Contact) : mis en avant façon bouton --- */
.primary-nav > ul > li:last-child{ margin-left: 6px; }
.primary-nav > ul > li:last-child > a{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  padding: 9px 20px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.primary-nav > ul > li:last-child > a::before{ content:none; }
.primary-nav > ul > li:last-child > a::after{
  content:"→";
  display:inline-block;
  transition: transform .25s ease;
}
.primary-nav > ul > li:last-child > a:hover{
  background: var(--hcm-olive);
  color: var(--hcm-white);
  border-color: var(--hcm-olive);
}
.primary-nav > ul > li:last-child > a:hover::after{ transform: translateX(3px); }

/* --- contenu du hero (page d'accueil) --- */
.hero-content{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  max-width: var(--container-w);
  margin: 0 auto;
  width:100%;
  padding: 24px 24px 80px;
}
.hero-content .eyebrow{ color: var(--hcm-tan); }

/* --- titre et CTA du hero : glissent depuis la gauche à l'affichage --- */
@keyframes hcm-slide-in-left{
  from{ opacity:0; transform: translateX(-64px); }
  to{ opacity:1; transform: translateX(0); }
}
.hero-title{
  font-family: var(--font-script);
  font-size: clamp(3.4rem, 8vw, 6.2rem);
  font-weight:400;
  line-height:1.15;
  color: var(--hcm-white);
  margin: 0 0 .5em;
  max-width: 18ch;
  animation: hcm-slide-in-left .9s cubic-bezier(.16,1,.3,1) .15s both;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  color: var(--hcm-white);
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:.02em;
  border-bottom: 1px solid rgba(255,255,255,.6);
  padding-bottom: .35em;
  width: fit-content;
  animation: hcm-slide-in-left .9s cubic-bezier(.16,1,.3,1) .45s both;
}
.hero-cta__arrow{
  display:inline-block;
  transition: transform .25s ease;
}
.hero-cta:hover{ color: var(--hcm-tan); border-color: var(--hcm-tan); }
.hero-cta:hover .hero-cta__arrow{ transform: translateX(-4px); }

/* --- barre blanche translucide sous le menu --- */
.header-divider{
  position:relative;
  z-index:2;
  height:1px;
  background: rgba(255,255,255,.45);
  box-shadow: 0 1px 6px rgba(255,255,255,.2);
}

/* --- variante pages intérieures : bandeau simple --- */
.page-hero{
  position:relative;
  padding: 150px 24px 56px;
  text-align:center;
  background: var(--hcm-cream);
}
.page-hero h1{
  font-family: var(--font-script);
  font-weight:400;
  font-size: 3rem;
  color: var(--hcm-color-h1h2);
  margin:0;
}

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

.section{ padding: 88px 0; }
.section--cream{ background: var(--hcm-off-white); }
.section--white{ background: var(--hcm-white); }
.section--dark{ background: var(--hcm-olive); color: var(--hcm-off-white); }
.section--dark h2, .section--dark h3{ color: var(--hcm-off-white); }

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

/* --- bloc "mission" de l'accueil : présentation éditoriale avec icône --- */
.intro-block{
  position:relative;
  max-width: var(--container-w);
  text-align:left;
  padding: 6px 0;
  opacity:0;
  transform: translateX(-40px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.intro-block.is-visible{ opacity:1; transform: translateX(0); }
.intro-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  margin: 0 auto 20px;
  animation: hcm-icon-sway 3.6s ease-in-out infinite;
}
.intro-icon img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
@keyframes hcm-icon-sway{
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-9px); }
  75% { transform: translateX(9px); }
}
.intro-lead{
  font-family: var(--font-body);
  font-weight:600;
  font-size: 1.32rem;
  line-height:1.55;
  color: var(--hcm-dark);
  margin: 0 0 1em;
}
.intro-support{
  font-size: 1.02rem;
  line-height:1.8;
  color: var(--hcm-text-muted);
  margin:0;
}
@media (max-width:640px){
  .intro-icon{ width:50px; height:50px; }
  .intro-lead{ font-size: 1.15rem; }
  .intro-block{ padding-left:15px; padding-right:15px; }
}

/* ==========================================================================
   5bis. Compatibilité éditeur de blocs (compositions)
   ========================================================================== */

/* Sur certaines installations WordPress, le bloc "Groupe" enveloppe son
   contenu dans un <div class="wp-block-group__inner-container">. Cette
   div supplémentaire casse les mises en page en grille/flex (grille de
   services, cartes horizontales des programmes, équipe, témoignages…) qui
   attendent leurs cartes comme enfants directs. "display:contents" retire
   cette div de la mise en page sans rien changer visuellement : ses enfants
   deviennent directement les enfants de leur parent (services-grid,
   service-card--horizontal, etc.), exactement comme avant. */
.wp-block-group__inner-container{
  display: contents;
}

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

.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px){
  .services-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .services-grid{ grid-template-columns: 1fr; }
}
/* --- variante "Programmes" : cartes horizontales empilées sur une seule colonne --- */
.services-grid--programmes{
  grid-template-columns: 1fr;
  gap: 24px;
}

.service-card{
  position:relative;
  background: var(--hcm-white);
  border: 1px solid var(--hcm-border);
  overflow:hidden;
  text-align:left;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, opacity .7s cubic-bezier(.16,1,.3,1);
  opacity:0;
  transform: translateY(52px);
  transition-delay: var(--reveal-delay, 0s);
}
.service-card.is-visible{ opacity:1; transform: translateY(0); }
.service-card.is-visible:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 40px rgba(51,36,28,.14);
}
.service-card__media{
  position:relative;
  aspect-ratio: 4/3;
  background: var(--hcm-cream);
  display:flex; align-items:center; justify-content:center;
  color: var(--hcm-olive);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  overflow:hidden;
}
.service-card__media--photo{ padding:0; }
/* Dans les compositions, la photo (bloc Image) est enveloppée avec le
   repère numéroté dans le bloc "media" — cette règle fait que le bloc
   Image occupe bien tout l'espace, comme avant. */
.service-card__media--photo .wp-block-image{ width:100%; height:100%; margin:0; }
.service-card__media--photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0;
  transform: scale(1.22);
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity 1s ease;
  transition-delay: inherit;
}
.service-card.is-visible .service-card__media--photo img{ opacity:1; transform: scale(1); }
.service-card.is-visible:hover .service-card__media--photo img{ transform: scale(1.09); }

/* --- repère numéroté superposé sur la photo --- */
.service-card__index{
  position:absolute;
  top:14px; left:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 34px;
  padding: 0 4px;
  background: rgba(251,241,228,.9);
  color: var(--hcm-olive);
  font-family: var(--font-body);
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.04em;
  border-radius: 999px;
  opacity:0;
  transform: translateY(-8px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: calc(var(--reveal-delay, 0s) + .35s);
}
.service-card.is-visible .service-card__index{ opacity:1; transform: translateY(0); }

.service-card__body{ padding: 24px 22px 28px; }
.service-card__title{
  position:relative;
  font-family: var(--font-h3);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size: 1.15rem;
  color: var(--hcm-color-h3);
  margin: 0 0 .6em;
  padding-bottom: .4em;
}
.service-card__title::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:2px;
  width: 28px;
  background: var(--hcm-tan);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.service-card.is-visible:hover .service-card__title{ color: var(--hcm-olive); }
.service-card.is-visible:hover .service-card__title::after{ width: 56px; background: var(--hcm-olive); }
.service-card__excerpt{
  font-size: .95rem;
  color: var(--hcm-text-muted);
  margin: 0;
}
.service-card__link{
  display:inline-block;
  margin-top: 16px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--hcm-olive);
  border-bottom: 1px solid currentColor;
  padding-bottom:2px;
  transition: letter-spacing .25s ease;
}
.service-card__link:hover{ letter-spacing:.14em; }

/* --- variante horizontale (section Programmes) : image à gauche, texte à droite --- */
.service-card--horizontal{
  display:flex;
  align-items:stretch;
}
.service-card--horizontal .service-card__media{
  aspect-ratio:auto;
  width: 42%;
  flex: 0 0 42%;
}
.service-card--horizontal .service-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
@media (max-width:640px){
  .service-card--horizontal{ flex-direction:column; }
  .service-card--horizontal .service-card__media{
    width:100%;
    flex: 0 0 auto;
    aspect-ratio: 4/3;
  }
}

@media (prefers-reduced-motion: reduce){
  .service-card,
  .service-card__media--photo img,
  .service-card__index,
  .script-heading,
  .hero-title,
  .hero-cta,
  .site-branding,
  .intro-block,
  .intro-icon,
  .site-header__media{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
}

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

.page-content{
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 24px;
}
.page-content h2{ color: var(--hcm-olive); font-family: var(--font-alt); font-size:1.4rem; text-transform:uppercase; letter-spacing:.03em; }
.page-content ul{ margin: 0 0 1.4em; }
.page-content li{ margin-bottom: .4em; }
.page-content blockquote{
  border-left: 3px solid var(--hcm-olive);
  margin: 1.8em 0;
  padding: .3em 1.4em;
  font-style: italic;
  color: var(--hcm-text-muted);
}
.cta-box{
  margin-top: 2.6em;
  padding: 32px;
  background: var(--hcm-cream);
  text-align:center;
}
.cta-box a.button{
  display:inline-block;
  margin-top: 14px;
  padding: 13px 30px;
  background: var(--hcm-olive);
  color: var(--hcm-white);
  font-weight:700;
  letter-spacing:.03em;
}
.cta-box a.button:hover{ background: var(--hcm-olive-dark); color:var(--hcm-white); }

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

.team-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width:760px){ .team-grid{ grid-template-columns: 1fr; } }
.team-member{ text-align:center; }
/* --- photo de la collaboratrice, centrée au-dessus du nom --- */
.team-member__photo{
  width: 160px;
  aspect-ratio: 3/4;
  margin: 0 auto 22px;
  overflow:hidden;
  border: 1px solid var(--hcm-border);
  background: var(--hcm-cream);
}
.team-member__photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.team-member__name{
  font-family: var(--font-body);
  font-weight:700;
  color: var(--hcm-olive);
  font-size: 1.5rem;
  margin-bottom:.3em;
}
.team-member__bio{ text-align:left; }
.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: 18px 0 18px 44px;
  border-bottom: 1px solid var(--hcm-border);
  position:relative;
  font-size: 1.05rem;
}
.values-list li::before{
  content:"";
  position:absolute; left:0; top:22px;
  width:10px; height:10px;
  background: var(--hcm-tan);
}

.testimonials-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  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);
  padding: 30px 28px;
  position:relative;
}
.testimonial-card::before{
  content:"\201C";
  display:block;
  font-family: Georgia, serif;
  font-size: 3.5rem;
  line-height:1;
  color: var(--hcm-tan);
  margin-bottom: .1em;
}
.testimonial-card cite{
  display:block;
  margin-top: 16px;
  font-style: normal;
  font-weight:700;
  color: var(--hcm-olive);
}

/* ==========================================================================
   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:1.2em;
  text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color: var(--hcm-olive);
}
.contact-form input,
.contact-form textarea{
  width:100%;
  padding: 13px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--hcm-border);
  background: var(--hcm-off-white);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .95rem;
}
.contact-form button{
  padding: 13px 32px;
  background: var(--hcm-tan);
  color: var(--hcm-dark);
  border:0;
  font-weight:700;
  letter-spacing:.03em;
  cursor:pointer;
}
.contact-form button:hover{ background: var(--hcm-tan-dark); }

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

.site-footer{
  background: var(--hcm-cream-deep);
  color: var(--hcm-text);
  padding: 72px 0 28px;
  border-top: 1px solid var(--hcm-border);
}
.site-footer a{ color: var(--hcm-olive); font-weight:600; }
.site-footer a:hover{ color: var(--hcm-olive-dark); }
.site-footer .footer-name{
  font-weight:700; font-size:1.2rem; letter-spacing:.03em; color: var(--hcm-dark);
}
.site-footer p{ margin: 0 0 .5em; }

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.3fr;
  gap: 48px;
  text-align:left;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hcm-border);
}
@media (max-width:900px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-col--form{ grid-column: 1 / -1; }
}
@media (max-width:600px){
  .footer-grid{ grid-template-columns: 1fr; }
}

.footer-tagline{
  font-size:.85rem;
  color: var(--hcm-text-muted);
  margin-bottom: 1.2em;
}
.footer-col__title{
  font-family: var(--font-h4);
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color: var(--hcm-color-h4);
  margin: 0 0 .9em;
}
.footer-links + .footer-col__title{ margin-top: 1.8em; }
.footer-links{
  list-style:none;
  margin:0 0 .2em;
  padding:0;
}
.footer-links li + li{ margin-top: .5em; }
.footer-links a{
  display:inline-block;
  font-family: var(--font-body);
  font-weight:700;
  font-size:1.3rem;
  text-transform:uppercase;
  letter-spacing:.01em;
  color: var(--hcm-dark);
  position:relative;
  transition: color .2s ease;
}
.footer-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background: var(--hcm-olive);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.footer-links a:hover{ color: var(--hcm-olive); }
.footer-links a:hover::after{ width:100%; }

.footer-contact-form{ max-width: 360px; }
.footer-contact-form input{
  width:100%;
  padding: 13px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--hcm-border);
  background: var(--hcm-white);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--hcm-text);
}
.footer-contact-form input::placeholder{ color: var(--hcm-text-muted); }
.footer-contact-form button{
  padding: 12px 30px;
  background: var(--hcm-olive);
  color: var(--hcm-white);
  border:0;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.78rem;
  cursor:pointer;
  transition: background .2s ease;
}
.footer-contact-form button:hover{ background: var(--hcm-olive-dark); }
.footer-form-message{
  font-size:.9rem;
  font-weight:600;
  color: var(--hcm-olive);
  margin-bottom: 1em;
}
.footer-form-message--error{ color: #b00020; }

.footer-widgets{ padding: 32px 0 0; }
.site-footer .footer-meta{
  margin-top: 32px;
  padding: 0 24px;
  font-size:.78rem;
  text-align:center;
  opacity:.6;
}

/* ==========================================================================
   11. Bannière cookies
   ========================================================================== */

.cookie-banner{
  position: fixed;
  left:0; right:0; bottom:0;
  background: var(--hcm-olive-dark);
  color: var(--hcm-off-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{ color: inherit; text-decoration:underline; }
.cookie-banner button{
  background: var(--hcm-tan);
  color: var(--hcm-dark); border:0; padding: 10px 24px;
  font-weight:700; cursor:pointer;
}

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

@media (max-width: 900px){
  .menu-toggle{ display:block; z-index:1001; }
  .menu-toggle.is-active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .menu-toggle.is-active span:nth-child(2){ opacity:0; }
  .menu-toggle.is-active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  .primary-nav{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background: var(--hcm-cream);
    color: var(--hcm-text);
    opacity:0;
    visibility:hidden;
    transform: translateY(-16px);
    transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1), visibility .35s;
    z-index:1000;
  }
  .primary-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
  .primary-nav > ul{
    flex-direction:column;
    align-items:center;
    gap: 6px;
    width:100%;
    max-height: 88vh;
    overflow-y:auto;
    padding: 90px 24px 40px;
    text-align:center;
  }
  .primary-nav .sub-menu ul,
  .primary-nav ul ul{ flex-direction:column; align-items:center; }
  .primary-nav a{
    color: var(--hcm-text);
    padding: 12px 24px;
    border-bottom:0;
    font-size: 1.35rem;
  }
  .primary-nav > ul > li > a::before{ display:none; }
  .primary-nav > ul > li:last-child{ margin-left:0; margin-top:12px; }
  .primary-nav > ul > li:last-child > a{ font-size:1rem; }
  .primary-nav .sub-menu{
    position:static;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    display:block;
    max-height:0;
    overflow:hidden;
    min-width:0;
    padding: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
  }
  .primary-nav .sub-menu .sub-menu{ left:0; }
  .primary-nav li.sub-menu-open > .sub-menu{ max-height: 600px; }
  .primary-nav .sub-menu a{
    font-size:1.05rem;
    font-weight:600;
    padding: 10px 0;
    color:inherit;
  }
  .primary-nav .sub-menu a:hover{ background:none; padding-left:0; color: var(--hcm-olive); }
  .lang-switcher-wrap{ margin-right:0; margin-bottom:6px; }
  .lang-switcher__menu{ top:100%; left:50%; right:auto; transform: translate(-50%,8px); text-align:center; }
  .lang-switcher.is-open .lang-switcher__menu{ transform: translate(-50%,0); }
  body.nav-open{ overflow:hidden; }
  .site-header--photo{ min-height: 78vh; }
  .hero-content{ padding-bottom: 56px; }
}