/* ==========================================================================
   formation-lithotherapie.fr — feuille unique
   --------------------------------------------------------------------------
   La charte est celle du site WordPress d'origine, relevee dans les variables
   globales d'Elementor (post-140.css) et dans les gabarits d'en-tete, de page
   et de pied (post-308, post-251, post-248) :

     primary   #16140C   noir chaud — texte et bandeau superieur
     secondary #FEFAF2   creme — fond de page et texte sur fonds colores
     accent    #9A4497   violet — boutons et liens du pied
     8a3cb1b   #5E9A04   vert — survol des boutons, bandes de section
     8bbe32c   #D4F479   lime — bandes de section, liens du bandeau
     32d715f   #F6F0E6   beige — bandes de section

   Police Epilogue (variable), servie en local : l'original la tirait de
   Google Fonts via le CDN.
   ========================================================================== */

/* Epilogue variable — sous-ensembles latin, latin-etendu et vietnamien. */
@font-face{font-family:Epilogue;font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/epilogue-o4zrfgj5hxf0ehjimliksgg.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Epilogue;font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/epilogue-o4zrfgj5hxf0ehjimliqsggqlg.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Epilogue;font-style:italic;font-weight:100 900;font-display:swap;
  src:url('../fonts/epilogue-o4zxfgj5hxf0ehjimlihggoykg.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --noir:#16140C;
  --creme:#FEFAF2;
  --violet:#9A4497;
  --vert:#5E9A04;
  --lime:#D4F479;
  --beige:#F6F0E6;
  --ligne:#E3DCD0;
  --gris:#5c574a;
  --ombre:0 18px 50px rgba(22,20,12,.10);
  --rayon:10px;
  --pilule:100px;
  --contenu:1200px;
  --lecture:760px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--creme);color:var(--noir);
  font-family:Epilogue,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:var(--noir);text-underline-offset:3px}
button,input,textarea{font:inherit}
button{cursor:pointer}

h1,h2,h3,h4{margin:0 0 .5em;color:var(--noir);font-family:Epilogue,Arial,sans-serif;font-weight:500}
h1{font-size:clamp(2.3rem,5vw,65px);line-height:1.3}
h2{font-size:clamp(1.85rem,3.6vw,45px);line-height:1.4}
h3{font-size:clamp(1.25rem,2.2vw,25px);line-height:1.4}
h4{font-size:20px;line-height:1.5}
p{margin:0 0 1.2em}
ul,ol{padding-left:1.2em}
strong{font-weight:600}

.container{width:min(calc(100% - 40px),var(--contenu));margin-inline:auto}
.lecture{width:min(100%,var(--lecture));margin-inline:auto}

/* Rythme vertical repris de l'original : 70 px en haut et en bas des
   sections, 40 px pour les bandes courtes, 30 px entre les blocs.
   Le dernier enfant d'un conteneur ne pousse pas sa marge dans le padding
   de la section — sinon on cumulait 89,6 + 19,2 px de vide en bas. */
.section{padding:70px 0}
.section-sm{padding:40px 0}
.container>*:last-child,.lecture>*:last-child,.card-corps>*:last-child{margin-bottom:0}

/* Deux sections de meme fond qui se suivent additionnaient leurs paddings :
   179 px de vide sans rupture visuelle. L'original mettait le padding haut
   a 0 dans ce cas ; on fait pareil, automatiquement. */
.band-creme+.band-creme,.band-beige+.band-beige,.band-lime+.band-lime,
.band-violet+.band-violet,.band-vert+.band-vert,.band-noir+.band-noir{padding-top:0}

/* Espacement standard sous un chapeau de section. */
.bloc{margin-top:30px}
.mention-affiliation{margin-top:20px;font-size:13px;line-height:1.6}
.center{text-align:center}
.muted{color:var(--gris)}
.lead{font-size:clamp(1.02rem,1.5vw,19px);line-height:1.7}

/* --- bandes de section, comme sur l'original --- */
.band-creme{background:var(--creme)}
.band-beige{background:var(--beige)}
.band-lime{background:var(--lime)}
.band-violet{background:var(--violet);color:var(--creme)}
.band-vert{background:var(--vert);color:var(--creme)}
.band-noir{background:var(--noir);color:var(--creme)}
.band-violet h1,.band-violet h2,.band-violet h3,.band-violet h4,
.band-vert h1,.band-vert h2,.band-vert h3,.band-vert h4,
.band-noir h1,.band-noir h2,.band-noir h3,.band-noir h4{color:var(--creme)}
.band-violet a,.band-vert a,.band-noir a{color:var(--creme)}
.band-violet .muted,.band-vert .muted,.band-noir .muted{color:rgba(254,250,242,.78)}

.eyebrow{display:inline-block;margin-bottom:14px;color:var(--violet);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.band-violet .eyebrow,.band-vert .eyebrow,.band-noir .eyebrow{color:var(--lime)}

.skip-link{position:fixed;z-index:1000;left:14px;top:12px;padding:10px 15px;
  transform:translateY(-150%);border-radius:var(--rayon);background:var(--creme);
  color:var(--noir);font-weight:600;box-shadow:var(--ombre)}
.skip-link:focus{transform:none}

/* --- bandeau utilitaire, en haut, fond noir chaud --- */
.topbar{background:var(--noir);color:var(--creme);font-size:13px}
.topbar .container{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:22px;
  align-items:center;min-height:40px}
.topbar a{color:var(--lime);font-weight:500;text-decoration:none}
.topbar a:hover{text-decoration:underline}

/* --- mention d'affiliation : obligatoire, jamais masquee --- */
.disclosure{background:var(--beige);color:var(--noir);font-size:13px;
  border-bottom:1px solid var(--ligne)}
.disclosure .container{display:flex;align-items:center;justify-content:center;
  gap:8px;min-height:36px;text-align:center}
.disclosure a{color:var(--violet);font-weight:600}

/* --- en-tete --- */
.site-header{position:sticky;z-index:100;top:0;background:var(--creme);
  border-bottom:1px solid var(--ligne)}
.header-inner{display:flex;align-items:center;gap:28px;min-height:84px}
/* Marque : le logo est un carre 400x400 accompagne du mot-symbole,
   comme sur l'original. */
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none}
.brand img{width:52px;height:52px}
.mot-symbole{color:var(--noir);font-size:19px;font-weight:600;line-height:1.05;
  letter-spacing:.01em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{color:var(--noir);font-size:16px;font-weight:500;text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{color:var(--violet)}
.header-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;min-width:46px;min-height:46px;margin-left:auto;
  border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--creme);
  color:var(--noir);font-weight:600}

/* --- boutons : pilule violette, survol vert (releve sur l'original) --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 30px;border:2px solid transparent;
  border-radius:var(--pilule);background:var(--violet);color:var(--creme);
  font-size:18px;font-weight:600;line-height:1;text-align:center;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s}
.btn:hover,.btn:focus{background:var(--vert);color:var(--creme)}
.btn-lg{min-height:64px;padding:19px 40px;font-size:clamp(18px,2vw,26px)}
.btn-sm{min-height:44px;padding:11px 22px;font-size:15px}
.btn-ghost{background:transparent;border-color:var(--noir);color:var(--noir)}
.btn-ghost:hover{background:var(--noir);color:var(--creme);border-color:var(--noir)}
.band-violet .btn-ghost,.band-vert .btn-ghost,.band-noir .btn-ghost{
  border-color:var(--creme);color:var(--creme)}
.band-violet .btn-ghost:hover,.band-vert .btn-ghost:hover,.band-noir .btn-ghost:hover{
  background:var(--creme);color:var(--noir)}
.btn:focus-visible,.nav a:focus-visible,.menu-toggle:focus-visible,
.brand:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--violet);outline-offset:3px}
.lien-fleche{display:inline-flex;gap:7px;align-items:center;color:var(--violet);
  font-weight:600;text-decoration:none}
.lien-fleche:after{content:"→";transition:transform .2s}
.lien-fleche:hover:after{transform:translateX(4px)}
.band-violet .lien-fleche,.band-vert .lien-fleche,.band-noir .lien-fleche{color:var(--lime)}

/* --- heros --- */
.hero{padding:clamp(40px,5vw,70px) 0;background:var(--creme)}
/* La colonne de texte est nettement plus haute que la photo (865 px contre
   417 px sur l'accueil). Avec align-items:center, la photo flottait au milieu
   et laissait ~224 px de vide au-dessus ET au-dessous : c'etait le principal
   « espace bizarre ». La photo occupe desormais toute la hauteur de sa
   colonne, et ne reprend son ratio 4/3 qu'en une seule colonne. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);
  align-items:stretch;gap:clamp(34px,5vw,72px)}
.hero-grid>*{min-width:0}
.hero h1{margin-bottom:.4em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 0}
.hero-media{display:flex;min-height:420px}
.hero-media img{width:100%;height:100%;border-radius:var(--rayon);
  box-shadow:var(--ombre);object-fit:cover}
.points{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;padding:0;
  list-style:none;font-size:15px;font-weight:500}
.points li:before{content:"✓";display:inline-grid;place-items:center;width:21px;height:21px;
  margin-right:8px;border-radius:50%;background:var(--lime);color:var(--noir);
  font-size:12px;font-weight:600}
.band-violet .points li:before,.band-vert .points li:before{background:var(--lime);color:var(--noir)}

/* --- sous-heros des pages internes --- */
.subhero{padding:clamp(36px,4.5vw,60px) 0;background:var(--beige)}
.subhero h1{margin-bottom:.3em}
/* Sous-heros illustre : les 321 pages de questions et les 14 pages de theme
   n'avaient aucune image. Chacune porte desormais la photo de son theme. */
.subhero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  align-items:center;gap:clamp(26px,4vw,54px)}
.subhero-grid>*{min-width:0}
.subhero-grid h1{font-size:clamp(1.9rem,3.4vw,44px)}
.subhero-media img{width:100%;aspect-ratio:16/11;border-radius:var(--rayon);
  object-fit:cover;box-shadow:var(--ombre)}
.fil{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 20px;padding:0;
  list-style:none;color:var(--gris);font-size:13px}
.fil li:not(:last-child):after{content:"/";margin-left:7px;color:#a89f8d}
.fil a{color:var(--gris)}

/* --- bandeau accreditation IPHM --- */
.accred{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:clamp(24px,4vw,54px)}
.accred img{width:min(420px,100%);height:auto;aspect-ratio:1000/292}

/* --- cartes --- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--rayon);
  background:var(--creme);box-shadow:var(--ombre)}
.card .vignette{aspect-ratio:16/10;overflow:hidden;background:var(--beige)}
.card .vignette img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .vignette img{transform:scale(1.04)}
.card-corps{display:flex;flex:1;flex-direction:column;padding:26px}
.card h3{font-size:22px}
.card p{color:var(--gris);font-size:15px}
.card .lien-fleche{margin-top:auto}
.etiquette{display:inline-block;width:max-content;margin-bottom:12px;padding:5px 12px;
  border-radius:var(--pilule);background:var(--lime);color:var(--noir);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none}

/* --- chiffres cles --- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.chiffre{padding:26px;border-radius:var(--rayon);background:var(--beige);text-align:center}
.chiffre strong{display:block;font-size:38px;font-weight:600;line-height:1.1}
.chiffre span{color:var(--gris);font-size:14px}
.band-violet .chiffre,.band-vert .chiffre{background:rgba(254,250,242,.12)}
.band-violet .chiffre span,.band-vert .chiffre span{color:rgba(254,250,242,.8)}

/* --- programme et FAQ en accordeon natif --- */
.accordeon{display:grid;gap:12px}
.accordeon.deux{grid-template-columns:repeat(2,1fr)}
.accordeon details{border:1px solid var(--ligne);border-radius:var(--rayon);
  background:var(--creme)}
.accordeon summary{position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:20px 52px 20px 22px;font-size:17px;font-weight:600;line-height:1.5;
  list-style:none;cursor:pointer}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary:after{content:"+";position:absolute;right:22px;top:16px;
  color:var(--violet);font-size:24px;font-weight:400}
.accordeon details[open] summary:after{content:"−"}
.accordeon .num{display:grid;place-items:center;flex:0 0 30px;height:30px;
  border-radius:50%;background:var(--lime);color:var(--noir);font-size:13px}
.accordeon .corps{padding:0 22px 22px;color:var(--gris);font-size:15px}
.accordeon .corps p:last-child,.accordeon .corps ul:last-child{margin-bottom:0}
.accordeon.deux .corps{padding-left:66px}

/* --- listes --- */
.liste-check{display:grid;gap:11px;padding:0;list-style:none}
.liste-check li{position:relative;padding-left:32px}
.liste-check li:before{content:"✓";position:absolute;left:0;top:3px;display:grid;
  place-items:center;width:21px;height:21px;border-radius:50%;background:var(--lime);
  color:var(--noir);font-size:12px;font-weight:600}
.liste-croix li:before{content:"!";background:var(--beige);color:var(--violet)}
.band-violet .liste-croix li:before,.band-vert .liste-croix li:before{
  background:rgba(254,250,242,.2);color:var(--creme)}

/* --- encadre --- */
.encadre{padding:22px 24px;border-left:4px solid var(--violet);border-radius:0 var(--rayon) var(--rayon) 0;
  background:var(--beige);font-size:15px}
.encadre.lime{border-color:var(--vert);background:var(--lime)}
/* Clause de sante : lisible sans etre criarde. Elle doit se voir au contact
   de l'affirmation, pas se fondre dans la page. */
.encadre.sante{border-color:var(--vert);background:var(--beige);margin:30px 0;
  font-size:14px;line-height:1.65}
.article-corps .encadre.sante{margin:34px 0}
.encadre p:last-child{margin-bottom:0}

/* --- index de questions --- */
.qa-index{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0;list-style:none}
.qa-index a{display:block;padding:15px 18px;border:1px solid var(--ligne);
  border-radius:var(--rayon);background:var(--creme);color:var(--noir);font-size:15px;
  font-weight:500;line-height:1.5;text-decoration:none;transition:border-color .2s,background .2s}
.qa-index a:hover{border-color:var(--violet);background:var(--beige)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.theme-carte{display:flex;flex-direction:column;padding:26px;border-radius:var(--rayon);
  background:var(--beige);text-decoration:none;transition:background .2s}
.theme-carte:hover{background:var(--lime)}
.theme-carte strong{font-size:21px;font-weight:600;line-height:1.35}
.theme-carte span{margin-top:6px;color:var(--gris);font-size:14px}

/* --- bandeau d'appel a l'action --- */
.cta{padding:clamp(40px,5vw,68px);border-radius:var(--rayon);background:var(--violet);
  color:var(--creme)}
.cta h2{color:var(--creme)}
.cta .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.cta .btn{background:var(--lime);color:var(--noir)}
.cta .btn:hover{background:var(--creme);color:var(--noir)}
.cta .btn-ghost{background:transparent;border-color:var(--creme);color:var(--creme)}
.cta .btn-ghost:hover{background:var(--creme);color:var(--noir)}
.cta small{display:block;max-width:760px;margin-top:18px;color:rgba(254,250,242,.82);
  font-size:13px;line-height:1.6}

/* --- article --- */
.article{padding:70px 0}
.article-entete{width:min(100%,900px);margin:0 auto 40px;text-align:center}
.article-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;
  color:var(--gris);font-size:14px}
.article-couv{width:min(100%,1040px);margin:0 auto 48px;aspect-ratio:16/9;
  border-radius:var(--rayon);object-fit:cover;box-shadow:var(--ombre)}
.article-corps{width:min(100%,var(--lecture));margin-inline:auto;font-size:17px}
.article-corps h2{margin-top:1.5em;font-size:clamp(1.5rem,2.6vw,32px)}
.article-corps h3{margin-top:1.3em;font-size:clamp(1.2rem,2vw,23px)}
.article-corps img{margin:30px 0;border-radius:var(--rayon)}
.article-corps blockquote{margin:30px 0;padding:22px 26px;border-left:4px solid var(--violet);
  border-radius:0 var(--rayon) var(--rayon) 0;background:var(--beige);font-size:19px}
.article-corps .cta{margin:44px 0}
.article-corps table{width:100%;border-collapse:collapse;font-size:15px}
.article-corps th,.article-corps td{padding:13px 15px;border-bottom:1px solid var(--ligne);
  text-align:left;vertical-align:top}
.article-corps th{background:var(--beige);font-weight:600}

/* --- formulaire --- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.champ{display:flex;flex-direction:column;gap:7px}
.champ.plein{grid-column:1/-1}
.champ label{font-size:14px;font-weight:600}
.champ input,.champ textarea{width:100%;padding:14px 16px;border:1px solid var(--ligne);
  border-radius:var(--rayon);background:var(--creme);color:var(--noir)}
.champ textarea{min-height:180px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important}

/* --- pied de page --- */
.footer{padding:64px 0 26px;background:var(--creme);border-top:1px solid var(--ligne)}
.footer-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr .9fr;gap:38px}
.footer .brand img{width:52px;height:52px}
.footer h3{margin-bottom:14px;font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}
.footer a{display:block;margin:8px 0;color:var(--violet);font-size:15px;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer-note{max-width:400px;color:var(--gris);font-size:14px}
.footer-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--ligne);
  color:var(--gris);font-size:13px}
.footer-bas p{margin:0}
.footer-bas a{display:inline;margin:0 0 0 16px}

.introuvable{display:grid;place-items:center;min-height:60vh;text-align:center}
.introuvable strong{display:block;color:var(--violet);font-size:clamp(5rem,16vw,11rem);
  font-weight:600;line-height:.9}

/* ================================ adaptatif ============================== */
@media(max-width:1040px){
  .header-inner{flex-wrap:wrap}
  .nav{position:absolute;left:20px;right:20px;top:84px;display:none;flex-direction:column;
    align-items:stretch;gap:0;margin:0;padding:12px;border:1px solid var(--ligne);
    border-radius:var(--rayon);background:var(--creme);box-shadow:var(--ombre);z-index:99}
  .nav.is-open{display:flex}
  .nav a{padding:13px 10px}
  .menu-toggle{display:block}
  .header-actions{display:none}
  .cards,.cards.four{grid-template-columns:repeat(2,1fr)}
  .themes{grid-template-columns:repeat(2,1fr)}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .accred{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media(max-width:760px){
  .section{padding:48px 0}
  .section-sm{padding:32px 0}
  .article{padding:48px 0}
  .container{width:min(calc(100% - 28px),var(--contenu))}
  /* Cibles tactiles : les liens utilitaires faisaient 22 px de haut au doigt. */
  .topbar .container{justify-content:center;gap:4px 14px;font-size:12px;padding-block:4px}
  .topbar a{display:inline-flex;align-items:center;min-height:36px;padding:0 4px}
  .hero-grid,.cards,.cards.two,.cards.four,.themes,.chiffres,
  .accordeon.deux,.qa-index,.form-grid{grid-template-columns:1fr}
  .subhero-grid{grid-template-columns:1fr}
  .subhero-media{order:-1}
  .hero-media{min-height:auto}
  .hero-media img{height:auto;aspect-ratio:4/3}
  .accordeon.deux .corps{padding-left:22px}
  .champ.plein{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .cta{padding:34px 24px}
  .article-couv{aspect-ratio:4/3}
  .footer-bas a{margin:0 16px 0 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}