/* ========== CSM v1 : fiches portfolio existantes (brouillon 1381) ========== */
/* ====== CSM études de cas : sections texte + image ====== */
.csm-cas{max-width:100%;}
.csm-badge{display:inline-block;background:#ef9400;color:#151515;font-weight:700;font-size:1.4rem;text-transform:uppercase;letter-spacing:.06em;padding:.45em 1.1em;border-radius:50px;margin-bottom:18px;}
.csm-cas h2{color:#151515;font-weight:800;font-size:2.2rem;margin:1.8em 0 .7em;border-left:4px solid #ef9400;padding-left:.7em;}
.csm-cas h2:first-of-type{margin-top:0;}
.csm-cas p{color:#333;line-height:1.85;font-size:1.6rem;}
.csm-row{display:flex;align-items:center;gap:28px;margin:1.8em 0;flex-wrap:nowrap;}
.csm-row.rev{flex-direction:row-reverse;}
.csm-row .csm-txt{flex:1 1 50%;min-width:0;}
.csm-row .csm-txt h3{line-height:1.3;}
.csm-row .csm-txt p{margin:.5em 0;}
.csm-row .csm-pic{flex:1 1 50%;min-width:0;}
.csm-row .csm-pic img{width:100%;height:auto;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);object-fit:cover;}
.csm-step{display:block;color:#e88900;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;}
.csm-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1.5em 0;}
.csm-gal img{width:100%;height:200px;object-fit:cover;border-radius:8px;}
.csm-cta{background:#151515;color:#fff;text-align:center;padding:2.4em 1em;border-radius:14px;margin:2.5em 0;}
.csm-cta a{display:inline-block;background:#ef9400;color:#151515;font-weight:700;text-decoration:none;padding:.9em 2em;border-radius:50px;margin-top:10px;}
@media(max-width:700px){
  .csm-row{flex-direction:column !important;}
  .csm-row .csm-txt,.csm-row .csm-pic{flex:1 1 100%;}
  .csm-gal{grid-template-columns:repeat(2,1fr);}
}

/* ========== CSM v2 : gabarit etude de cas (08/10/2026) ========== */
/* ==========================================================================
   CSM — ÉTUDES DE CAS v2 : CSS complet (à porter dans functions.php)
   Palette : orange #ef9400 / noir #151515 / orange clair #e88900
   Zéro JS : accordéon en <details>, CTA sticky en position:sticky.
   ========================================================================== */
.csm-cas{max-width:100%;}

/* --- En-tête de fiche : badge + métadonnées --- */
.csm-cas .csm-head{margin:0 0 1.4em;}
.csm-badge{display:inline-block;background:#ef9400;color:#151515;font-weight:700;
  font-size:1.3rem;text-transform:uppercase;letter-spacing:.07em;padding:.45em 1.1em;
  border-radius:50px;margin:0 .6em .6em 0;vertical-align:middle;}
.csm-type{display:inline-block;background:#f2f2f2;color:#555;font-weight:600;
  font-size:1.3rem;letter-spacing:.03em;padding:.45em 1em;border-radius:50px;
  margin:0 0 .6em;vertical-align:middle;}

/* --- Chapo (accroche) : pas de H2 qui repete le titre du theme --- */
.csm-lead{font-size:1.75rem !important;line-height:1.7 !important;color:#222 !important;
  font-weight:500;border-left:4px solid #ef9400;padding-left:1em;margin:0 0 1.8em;}

/* --- Chiffres clés --- */
.csm-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 2.2em;}
.csm-fact{background:#151515;border-radius:12px;padding:1.2em .8em;text-align:center;}
.csm-fact span{display:block;color:#ef9400;font-size:1.15rem;text-transform:uppercase;
  letter-spacing:.09em;font-weight:700;margin-bottom:.35em;}
.csm-fact strong{display:block;color:#fff;font-size:1.75rem;font-weight:800;line-height:1.25;}

/* --- Sommaire ancré --- */
.csm-toc{background:#faf7f2;border:1px solid #f0e4d0;border-radius:12px;
  padding:1.3em 1.5em;margin:40px 0 2.2em;}
.csm-toc p{margin:0 0 .6em !important;font-size:1.25rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:#151515;}
.csm-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;}
.csm-toc li{counter-increment:toc;margin:.32em 0;font-size:1.5rem;line-height:1.5;}
.csm-toc li::before{content:counter(toc);display:inline-block;width:1.7em;height:1.7em;
  line-height:1.7em;text-align:center;background:#ef9400;color:#151515;border-radius:50%;
  font-size:.82em;font-weight:700;margin-right:.6em;vertical-align:middle;}
.csm-cas .csm-toc a{color:#333;text-decoration:none;border-bottom:1px solid #e6d8c3;}
.csm-cas .csm-toc a:hover{color:#e88900;}

/* --- Titres de section --- */
.csm-cas h2{color:#151515;font-weight:800;font-size:2.15rem;margin:2.2em 0 .8em;
  border-left:4px solid #ef9400;padding-left:.7em;}
.csm-cas h2:first-of-type{margin-top:0;}
.csm-cas p{color:#333;line-height:1.85;font-size:1.6rem;}
.csm-cas ul{margin:.6em 0 1.2em;padding-left:1.3em;}
.csm-cas li{margin:.35em 0;line-height:1.75;font-size:1.55rem;color:#333;}
.csm-cas a{color:#e88900;}

/* --- Étapes : timeline verticale --- */
.csm-steps{position:relative;margin:0 0 1em;padding-left:0;}
.csm-etape{position:relative;display:flex;gap:26px;align-items:center;
  padding:1.6em 0;border-top:1px solid #eee;}
.csm-etape:first-child{border-top:0;}
.csm-etape.rev{flex-direction:row-reverse;}
.csm-etape-txt{flex:1 1 52%;min-width:0;}
.csm-etape-txt .csm-num{display:inline-flex;align-items:center;justify-content:center;
  width:2.1em;height:2.1em;background:#ef9400;color:#151515;border-radius:50%;
  font-weight:800;font-size:1.4rem;margin-bottom:.5em;}
.csm-etape-txt h3{margin:.1em 0 .4em;font-size:1.85rem;font-weight:800;color:#151515;line-height:1.3;}
.csm-etape-txt p{margin:.4em 0;font-size:1.55rem;}
.csm-etape-pic{flex:1 1 48%;min-width:0;}
.csm-etape-pic img{width:100%;height:auto;border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.13);display:block;}

/* --- Avant / Après --- */
.csm-ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:1.4em 0 1em;}
.csm-ba figure{margin:0;position:relative;}
.csm-ba img{width:100%;height:280px;object-fit:cover;border-radius:12px;display:block;}
.csm-ba figcaption{position:absolute;top:12px;left:12px;background:#151515;color:#ef9400;
  font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.08em;
  padding:.35em .9em;border-radius:50px;}

/* --- Résultat --- */
.csm-result{background:#151515;color:#fff;border-radius:14px;padding:1.8em 1.6em;margin:1.6em 0;}
.csm-result h2{color:#fff !important;border-left-color:#ef9400;margin-top:0 !important;}
.csm-result p{color:#e8e8e8 !important;}
.csm-result ul{margin:0;padding-left:1.3em;}
.csm-result li{color:#e8e8e8 !important;}

/* --- FAQ native (accordéon sans JS) --- */
.csm-faq{margin:1.2em 0;}
.csm-faq details{border:1px solid #eee;border-radius:10px;padding:.9em 1.2em;
  margin:.6em 0;background:#fff;}
.csm-faq summary{cursor:pointer;font-weight:700;color:#151515;font-size:1.55rem;
  list-style:none;position:relative;padding-right:2em;}
.csm-faq summary::-webkit-details-marker{display:none;}
.csm-faq summary::after{content:"+";position:absolute;right:0;top:-.15em;color:#ef9400;
  font-size:1.9rem;font-weight:800;}
.csm-faq details[open] summary::after{content:"\2013";}
.csm-faq details p{margin:.7em 0 0 !important;font-size:1.5rem;}

/* --- Maillage interne --- */
.csm-links{display:flex;flex-wrap:wrap;gap:10px;margin:1.4em 0;}
.csm-links a{display:inline-block;background:#fff;border:1px solid #e6d8c3;border-radius:50px;
  padding:.55em 1.15em;font-size:1.4rem;font-weight:600;color:#151515;text-decoration:none;}
.csm-links a:hover{border-color:#ef9400;color:#e88900;}

/* --- CTA final --- */
.csm-cta{background:#151515;color:#fff;text-align:center;padding:2.4em 1.2em;
  border-radius:14px;margin:2.4em 0 0;}
.csm-cta strong{display:block;font-size:1.9rem;margin-bottom:.5em;color:#fff;}
.csm-cta p{color:#dcdcdc !important;margin:0 0 1em !important;}
.csm-cta a{display:inline-block;background:#ef9400;color:#151515;font-weight:800;
  text-decoration:none;padding:.95em 2.2em;border-radius:50px;font-size:1.6rem;}
.csm-cta a:hover{background:#ffb229;}
.csm-cta .csm-tel{display:block;margin-top:1em;color:#ef9400;font-weight:700;font-size:1.55rem;}

/* --- Barre CTA collante (mobile) --- */
.csm-sticky{display:none;position:sticky;bottom:0;z-index:50;background:#151515;
  padding:.8em 1em;margin:1.6em 0 0;border-radius:12px 12px 0 0;text-align:center;}
.csm-sticky a{display:block;background:#ef9400;color:#151515;font-weight:800;
  text-decoration:none;padding:.85em;border-radius:50px;font-size:1.55rem;}

/* --- Responsive --- */
@media(max-width:900px){
  .csm-facts{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:700px){
  .csm-etape{flex-direction:column !important;gap:14px;align-items:stretch;}
  .csm-etape-txt,.csm-etape-pic{flex:1 1 100%;}
  .csm-ba{grid-template-columns:1fr;}
  .csm-ba img{height:220px;}
  .csm-lead{font-size:1.6rem !important;}
  .csm-cas h2{font-size:1.95rem;}
  .csm-sticky{display:block;}
}

/* ===== CSM : lisibilite du hero (texte clair sur fond sombre) ===== */
/* .csm-cas p{color:#333} ecrasait le hero -> on reprend la main */
.csm-cas .hero,
.csm-cas .hero *{}
.csm-cas .hero-h1{color:#f5f5f5 !important;}
.csm-cas .hero .hero-sub{color:#f5a313 !important;}
.csm-cas .hero .hero-d{color:rgba(255,255,255,.88) !important;}
.csm-cas .hero .hero-bdg{color:#f5a313 !important;}
.csm-cas .hero .btn-p{color:#fff !important;}
.csm-cas .hero .btn-s{color:#fff !important;}
.csm-cas .hero h1{color:#f5f5f5 !important;}
/* le hero ne doit pas heriter des marges des paragraphes de fiche */
.csm-cas .hero p{margin:0 0 14px;}
.csm-cas .hero .hero-h1{margin:0 0 16px;}
.csm-cas .hero .hero-d{margin-bottom:32px;}

/* le titre du hero : taille explicite (c est un <p>, pas un <h1>) */


/* bouton secondaire du hero : fond plus opaque pour tenir sur la photo */
.csm-cas .hero .btn-s{background:rgba(18,22,26,.55) !important;border-color:rgba(255,255,255,.75) !important;
  backdrop-filter:blur(4px);}
.csm-cas .hero .btn-s:hover{background:rgba(239,148,0,.9) !important;border-color:#ef9400 !important;color:#151515 !important;}

/* ===== CSM : le hero REMPLACE le bandeau de titre du theme ===== */
/* SCOPE csm-fiche-v2 (nouvelles fiches AVEC hero uniquement) : les fiches
   publiees n ont pas de hero, il ne faut PAS leur masquer leur titre. */
body.csm-fiche-v2 #pageheader,
body.csm-fiche-v2 .titleclass{display:none !important;}

.csm-cas .csm-etape-pic img,
.csm-cas .csm-ap img,
.csm-cas .csm-shot img{cursor:zoom-in;transition:opacity .2s,transform .2s;}
.csm-cas .csm-etape-pic img:hover,
.csm-cas .csm-ap img:hover,
.csm-cas .csm-shot img:hover{opacity:.92;}
.csm-lb{position:fixed;inset:0;background:rgba(12,12,12,.95);z-index:99999;
  display:none;align-items:center;justify-content:center;touch-action:pan-y;}
.csm-lb.on{display:flex;}
.csm-lb img{max-width:92vw;max-height:84vh;width:auto;height:auto;object-fit:contain;
  border-radius:6px;box-shadow:0 18px 60px rgba(0,0,0,.6);cursor:default;}
.csm-lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;
  width:52px;height:52px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s;}
.csm-lb button:hover{background:#ef9400;color:#151515;}
.csm-lb .csm-lb-x{top:22px;right:22px;}
.csm-lb .csm-lb-p{left:22px;top:50%;transform:translateY(-50%);}
.csm-lb .csm-lb-n{right:22px;top:50%;transform:translateY(-50%);}
.csm-lb .csm-lb-c{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:#ef9400;font-weight:700;font-size:1.5rem;letter-spacing:.08em;}
@media(max-width:700px){
  .csm-lb button{width:44px;height:44px;font-size:22px;}
  .csm-lb .csm-lb-p{left:8px;} .csm-lb .csm-lb-n{right:8px;}
  .csm-lb img{max-width:96vw;max-height:78vh;}
}

/* ============================================================
   CSM : HERO + HEADER EN PLEINE LARGEUR (fiches portfolio)
   Le theme enferme tout dans #wrapper.container (1200px) :
   le header etait a 1080px, le hero a 960px -> decales.
   On les fait sortir du conteneur, bord a bord.
   ============================================================ */
body.csm-fiche-v2{overflow-x:clip;}

/* le header : bandeau bord a bord, le menu reste centre dans .container */
body.csm-fiche-v2 #kad-header-menu{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* le hero de la fiche : bord a bord egalement */
body.csm-fiche-v2 .csm-cas .hero{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* le hero bord a bord garde un fond couvert */
body.csm-fiche-v2 .csm-cas .hero .hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* le texte du hero reste lisible et aligne sur la grille du site */
/* le conteneur .portfolio-content ajoute un padding : on l annule sur le hero */
body.csm-fiche-v2 .csm-cas{padding-left:0;padding-right:0;}

/* ============================================================
   CSM : HEADER BLANC EN POSITION HAUTE, INCHANGE EN STICKY
   Le theme met un blanc semi-transparent (rgba(255,255,255,.9)) :
   sur la page d accueil rien de sombre ne passe derriere, mais sur
   une fiche le hero sombre transparait -> le header parait GRIS.

   MECANISME DU THEME (verifie par mesure) : le plugin jQuery Sticky
   passe #kad-header-menu en position:fixed et pose la classe
   `is-sticky` sur son PARENT, c est-a-dire #wrapper. Le theme
   conditionne ensuite son fond a des selecteurs div:not(.is-sticky).

   Correctif : blanc PLEIN uniquement tant que #wrapper n est PAS
   sticky. Des que le header devient collant, ces regles cessent de
   s appliquer et le theme reprend la main -> comportement identique
   a la page d accueil. On ne touche donc JAMAIS a l etat sticky.
   ============================================================ */
body.csm-fiche-v2 #wrapper:not(.is-sticky) #topbar,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .topbarclass,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .outside-top-headerclass,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .outside-headerclass,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .kad-header-menu-outer,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .headerclass,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .kad-header-topbar-primary-outer,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .second-navclass,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .mobile-headerclass,
body.csm-fiche-v2 #wrapper:not(.is-sticky) .kad-mobile-banner{
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
}

/* ============================================================
   CSM : la rangee de chiffres cle CHEVAUCHE le hero
   Meme technique que la page d accueil (rangee "10+ annees" en
   margin-top:-40px) pour un rendu identique a la DA du site.
   Le hero est en position:relative/z-index bas, la rangee remontee
   passe devant -> on lui donne un z-index superieur.
   ============================================================ */
body.csm-fiche-v2 .csm-cas .csm-facts{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(1200px, calc(100vw - 40px));
  max-width:none;
  z-index:3;
  margin-top:-40px;
  margin-bottom:0;
  padding:0 20px;
}
/* sur mobile, chevauchement reduit pour ne pas manger le hero */
@media(max-width:960px){
  body.csm-fiche-v2 .csm-cas .csm-facts{
    width:calc(100vw - 24px);
    margin-top:-20px;
    padding:0 12px;
  }
}

/* ============================================================
   CSM : ECHELLE TYPOGRAPHIQUE DU HERO (identique au site)
   ⚠️ Le site est en base 62.5% : 1rem = 10px (PAS 16px).
   Le sous-titre et la description tombaient a 10.2px parce que
   la regle .csm-cas p ecrasait celle du theme. On force donc ici
   EXACTEMENT les tailles des pages du site (mesurees a l accueil) :
     h1 = 54px | sous-titre = 21px | description = 16px | badge = 12px
   ============================================================ */
body.csm-fiche-v2 .csm-cas .hero .hero-h1{
  font-size:clamp(34px,4.8vw,54px) !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  margin:0 0 16px !important;
}
body.csm-fiche-v2 .csm-cas .hero .hero-sub{
  font-size:clamp(17px,1.8vw,21px) !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  margin:0 0 14px !important;
}
body.csm-fiche-v2 .csm-cas .hero .hero-d{
  font-size:clamp(14px,1.2vw,16px) !important;
  line-height:1.7 !important;
  font-weight:400 !important;
  margin:0 0 32px !important;
}
body.csm-fiche-v2 .csm-cas .hero .hero-bdg{
  font-size:12px !important;
  font-weight:600 !important;
}

/* ============================================================
   CSM : CHARTE TYPOGRAPHIQUE DES FICHES (= celle du site)
   ⚠️ CAUSE DU PROBLEME "textes hyper petits" :
     - le site est en base 62.5%  ->  1rem = 10px (PAS 16px)
     - une ancienne regle du 15/09 dans le style.css du theme
       enfant (.csm-cas p{font-size:1.02rem} et .csm-etapes li)
       ECRASE la notre par specificite -> 10.2px au lieu de 16px.
   On reprend donc les tailles REELLES mesurees sur la page d accueil
   et on les rend prioritaires via le prefixe body.csm-fiche-v2
   (specificite superieure, sans casser le reste du site).

   ECHELLE DE REFERENCE (relevee sur l accueil et les pages prestations) :
     h1 hero 54px | sous-titre hero 21px | description hero 16px | badge 12px
     corps de texte 16px | h2 38px/800 | h3 19px/800 | boutons 14px
   ============================================================ */
body.csm-fiche-v2 .csm-cas p,
body.csm-fiche-v2 .csm-cas .csm-etapes li,
body.csm-fiche-v2 .csm-cas .csm-etape-txt p,
body.csm-fiche-v2 .csm-cas .csm-faq details p{
  font-size:1.6rem;          /* 16px */
  line-height:1.75;
}
body.csm-fiche-v2 .csm-cas h2{
  font-size:3.8rem;          /* 38px, comme les titres de section du site */
  font-weight:800;
  line-height:1.2;
}
body.csm-fiche-v2 .csm-cas h3,
body.csm-fiche-v2 .csm-cas .csm-etape-txt h3{
  font-size:1.9rem;          /* 19px */
  font-weight:800;
  line-height:1.35;
}
body.csm-fiche-v2 .csm-cas li{
  font-size:1.6rem;          /* 16px */
  line-height:1.7;
}
body.csm-fiche-v2 .csm-cas .csm-num{
  font-size:1.4rem;          /* 14px */
}
body.csm-fiche-v2 .csm-cas .csm-faq summary{
  font-size:1.6rem;          /* 16px */
}
body.csm-fiche-v2 .csm-cas .csm-facts .csm-fact span{
  font-size:1.2rem;          /* 12px, comme le badge du hero */
}
body.csm-fiche-v2 .csm-cas .csm-facts .csm-fact strong{
  font-size:1.8rem;          /* 18px */
}
body.csm-fiche-v2 .csm-cas .csm-toc li,
body.csm-fiche-v2 .csm-cas .csm-toc p{
  font-size:1.5rem;          /* 15px */
}
body.csm-fiche-v2 .csm-cas .csm-cta a,
body.csm-fiche-v2 .csm-cas .csm-sticky a,
body.csm-fiche-v2 .csm-cas .csm-links a{
  font-size:1.4rem;          /* 14px, comme les boutons du site */
}

/* ============================================================
   CSM : LE HEADER NE DOIT PAS RECOUVRIR LE HERO
   Le theme applique `body.trans-header #kad-header-menu{position:absolute}`
   sur les fiches portfolio : le header passe PAR-DESSUS le contenu et
   masque 132px du haut du hero (badge et debut du titre coupes).
   Sur les pages prestations de reference, le header est `static` et le
   hero demarre exactement a son pied (ecart mesure = 0).
   On remet donc le header dans le flux sur les fiches etude de cas.
   PAS de !important : le plugin sticky pose `position:fixed` en style
   inline au scroll, et doit pouvoir reprendre la main.
   ============================================================ */
body.csm-fiche-v2.trans-header #kad-header-menu,
body.csm-fiche-v2.trans-header #kad-mobile-banner{
  position:relative;
}


/* --- CTA en colonne centree : bouton sur sa propre ligne, centre (consigne Thonny 25/10/2026) --- */
body.csm-fiche-v2 .csm-cas .csm-cta{display:flex;flex-direction:column;align-items:center;text-align:center;}
body.csm-fiche-v2 .csm-cas .csm-cta > a{display:block;margin:1.2em auto .2em;}
body.csm-fiche-v2 .csm-cas .csm-cta .csm-tel{margin-top:1.1em;}