:root{
  --bg:#F4E7CB; --paper:#FFFCF5; --ink:#1D160E; --ink-soft:#5A4E3D;
  --accent:#E8571A; --accent-dark:#8F3410; --teal:#0B3634; --teal-light:#188579;
  --gold:#EFA61C; --peach:#FBDEB2; --line:#E3D1A6; --warn:#FCE9B5; --warn-ink:#7A5B00;
}
html{scroll-behavior:smooth;}
*{box-sizing:border-box;}
#siteScrollProgress{position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--accent), var(--gold)); z-index:200; transition:width .1s linear;}
@media (prefers-reduced-motion: reduce){#siteScrollProgress{transition:none;}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Work Sans', sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; animation:pageFade .45s ease;}
@keyframes pageFade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){body{animation:none;}}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.015em; margin:0;}
a{color:inherit;}
.wrap{max-width:1040px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){.wrap{padding:0 18px;}}
.todo{background:var(--warn); color:var(--warn-ink); font-weight:600; font-size:0.9em; padding:1px 7px; border-radius:3px;}
::selection{background:var(--accent); color:#fff;}

@keyframes fadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.fade-in{animation:fadeUp .7s cubic-bezier(.2,.7,.3,1) both;}
.fade-in.d1{animation-delay:.08s;} .fade-in.d2{animation-delay:.16s;} .fade-in.d3{animation-delay:.24s;}
@media (prefers-reduced-motion: reduce){.fade-in{animation:none;}}

/* ---------- En-tête (identique sur toutes les pages) ---------- */
.site-header{padding:48px 0 36px; text-align:center; background:var(--paper); border-bottom:1px solid var(--line);}
.logo{display:inline-flex; align-items:center; gap:12px; font-family:'Fraunces', serif; font-size:34px; font-weight:700; letter-spacing:0.01em; text-decoration:none; color:var(--ink);}
.logo img{height:50px; width:auto; display:block;}
.tabnav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:30px; flex-wrap:wrap;}
.tabnav .rule{flex:1; max-width:60px; height:1px; background:var(--line);}
.tabnav .pills{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:10px; box-shadow:0 2px 6px rgba(34,28,21,0.06);}
.tab-btn{
  font-size:15px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700;
  padding:16px 28px; border-radius:999px; border:none; background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:background .2s, color .2s; text-decoration:none; display:inline-block;
}
.tab-btn.active{background:var(--accent); color:#fff; box-shadow:0 2px 6px rgba(226,103,42,0.35);}
.tab-btn:not(.active):hover{background:var(--peach); color:var(--ink);}
.tab-btn.tab-account{background:var(--teal); color:#fff;}
.tab-btn.tab-account:hover{background:var(--teal-light); color:#fff;}
@media (max-width:760px){.tabnav .rule{display:none;}}

/* ---------- En-tête qui se réduit au défilement (pages sans dossier-nav) ---------- */
.site-header-sticky{position:sticky; top:0; z-index:120; transition:padding .25s ease, box-shadow .25s ease;}
.site-header-sticky.scrolled{padding:20px 0 16px; box-shadow:0 6px 18px rgba(34,28,21,0.08);}
.logo img{transition:height .25s ease;}
.logo{transition:font-size .25s ease;}
.site-header-sticky.scrolled .logo img{height:36px;}
.site-header-sticky.scrolled .logo{font-size:24px;}
.site-header-sticky.scrolled .tabnav{margin-top:14px;}
.tabnav{transition:margin-top .25s ease;}
@media (prefers-reduced-motion: reduce){.site-header-sticky, .site-header-sticky.scrolled, .logo, .logo img, .tabnav{transition:none;}}

/* ---------- Contenu des menus déroulants (FAQ / infos légales) qui glisse à l'ouverture ---------- */
@keyframes dropdownOpen{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}
.faq details[open] > *:not(summary),
details.quality-box[open] > *:not(summary){animation:dropdownOpen .32s ease both;}
@media (prefers-reduced-motion: reduce){
  .faq details[open] > *:not(summary), details.quality-box[open] > *:not(summary){animation:none;}
}

/* ---------- Transition douce entre les pages ---------- */
body.page-leaving{animation:pageLeave .16s ease forwards;}
@keyframes pageLeave{to{opacity:0; transform:translateY(-6px);}}
@media (prefers-reduced-motion: reduce){body.page-leaving{animation:none;}}

/* ---------- Effet de brillance sur les boutons principaux ---------- */
.btn-primary{position:relative; overflow:hidden;}
.btn-primary::before{
  content:''; position:absolute; top:0; left:-60%; width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform:skewX(-20deg); transition:left .55s ease; pointer-events:none;
}
.btn-primary:hover::before{left:130%;}
@media (prefers-reduced-motion: reduce){.btn-primary::before{transition:none; display:none;}}

/* ---------- Chiffres animés (compteurs) ---------- */
.kpi-num{transition:color .2s ease;}

/* ---------- Boutons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:transform .15s, background .15s, box-shadow .15s;}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(226,103,42,0.3);}
.btn-primary:hover{background:var(--accent-dark); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--ink); border:1px solid var(--line);}
.btn-outline:hover{background:var(--paper);}

/* ---------- Titres de section ---------- */
section{padding:56px 0;}
.page-title{text-align:center; margin-bottom:8px;}
.page-title .eyebrow{
  display:block; text-align:center; font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-dark); font-weight:700; margin-bottom:10px;
}
.page-title h2{font-size:clamp(28px,3.8vw,38px); font-style:italic; color:var(--accent-dark);}
.page-sub{text-align:center; color:var(--ink-soft); font-size:15px; max-width:560px; margin:14px auto 0;}
.section-alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* ---------- Pied de page (identique sur toutes les pages) ---------- */
.site-footer{margin-top:40px; border-top:1px solid var(--line); background:var(--paper);}
.footer-top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:32px; padding:48px 28px 36px;}
@media (max-width:750px){.footer-top{grid-template-columns:1fr; text-align:center;}}
.footer-col p{color:var(--ink-soft); font-size:13.5px; margin:14px 0 0;}
.footer-logo{display:inline-flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-size:22px; font-weight:700; text-decoration:none; color:var(--ink);}
.footer-logo img{height:32px; width:auto; display:block;}
.footer-title{display:block; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--accent-dark); margin-bottom:14px;}
.footer-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.footer-list li{font-size:13.5px; color:var(--ink-soft);}
.footer-list a{text-decoration:none; color:var(--ink-soft); transition:color .15s;}
.footer-list a:hover{color:var(--accent-dark);}
@media (max-width:750px){.footer-list{align-items:center;}}
.footer-bottom{border-top:1px solid var(--line); padding:20px 0; text-align:center;}
.footer-bottom p{margin:0 0 12px; font-size:11.5px; color:var(--ink-soft);}
.footer-legal-links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;}
.footer-legal-links a{font-size:12px; color:var(--ink-soft); text-decoration:none; transition:color .15s;}
.footer-legal-links a:hover{color:var(--accent-dark); text-decoration:underline;}

/* ---------- Pages légales ---------- */
.legal-content{max-width:760px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:40px; box-shadow:0 2px 10px rgba(34,28,21,0.04);}
.legal-content h2{font-size:15px; text-transform:uppercase; letter-spacing:0.05em; font-style:normal; color:var(--accent-dark); margin:32px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--ink-soft); font-size:14.5px; margin:0 0 14px;}
.legal-content ul{color:var(--ink-soft); font-size:14.5px; padding-left:20px; margin:0 0 14px;}
.legal-content li{margin-bottom:6px;}
.legal-content .updated{font-size:12px; color:var(--ink-soft); margin-bottom:30px; font-style:italic;}
.legal-content table{width:100%; border-collapse:collapse; margin:0 0 14px;}
.legal-content td{padding:8px 0; font-size:13.5px; border-top:1px solid var(--line); vertical-align:top; color:var(--ink-soft);}
.legal-content tr:first-child td{border-top:none;}
.legal-content td:first-child{color:var(--ink); font-weight:600; width:240px;}

/* ---------- Messages d'alerte (formulaires) ---------- */
.alert{max-width:480px; margin:0 auto 20px; padding:12px 18px; border-radius:8px; font-size:13.5px; text-align:center;}
.alert-error{background:#FCE4E1; color:#A63F17; border:1px solid #F1D9D2;}
.alert-success{background:#DCEBDD; color:#2C6360; border:1px solid #C5DDC7;}

/* ---------- Animation au défilement (site entier) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;}}

/* ---------- Touches de couleur sur les cartes répétées ---------- */
.feature, .path-card, .step{border-top:4px solid transparent; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.feature:nth-child(3n+1), .path-card:nth-child(3n+1), .step:nth-child(3n+1){border-top-color:var(--accent);}
.feature:nth-child(3n+2), .path-card:nth-child(3n+2), .step:nth-child(3n+2){border-top-color:var(--teal);}
.feature:nth-child(3n+3), .path-card:nth-child(3n+3), .step:nth-child(3n+3){border-top-color:var(--gold);}

.fact, .qstat, .opco-chip{border-left:3px solid transparent; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.fact:hover, .qstat:hover, .opco-chip:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(34,28,21,0.08);}
.fact:nth-child(4n+1), .qstat:nth-child(4n+1), .opco-chip:nth-child(4n+1){border-left-color:var(--accent);}
.fact:nth-child(4n+2), .qstat:nth-child(4n+2), .opco-chip:nth-child(4n+2){border-left-color:var(--teal);}
.fact:nth-child(4n+3), .qstat:nth-child(4n+3), .opco-chip:nth-child(4n+3){border-left-color:var(--gold);}
.fact:nth-child(4n+4), .qstat:nth-child(4n+4), .opco-chip:nth-child(4n+4){border-left-color:var(--teal-light);}

.course-card{border-left:4px solid transparent;}
.course-card:nth-of-type(3n+1){border-left-color:var(--accent);}
.course-card:nth-of-type(3n+2){border-left-color:var(--teal);}
.course-card:nth-of-type(3n+3){border-left-color:var(--gold);}

/* ---------- Halo au survol (cartes captivantes) ---------- */
.feature, .path-card, .course-card{position:relative; overflow:hidden;}
.feature::after, .path-card::after, .course-card::after{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .35s ease;
  background:radial-gradient(circle at 50% 0%, rgba(226,103,42,0.12), transparent 65%);
}
.feature:hover::after, .path-card:hover::after, .course-card:hover::after{opacity:1;}
.feature, .path-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
.feature:hover, .path-card:hover{box-shadow:0 12px 28px rgba(34,28,21,0.12);}

/* ---------- Carrousel de formations : cartes qui se retournent, défilement auto ---------- */
.carousel-wrap{position:relative; margin-top:40px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.carousel-track{display:flex; gap:20px; width:max-content; animation:carouselScroll 34s linear infinite; padding:8px 4px 18px;}
.carousel-wrap:hover .carousel-track{animation-play-state:paused;}
@keyframes carouselScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.carousel-track{animation:none;}}

.flip-card{flex:0 0 260px; height:230px; perspective:1400px;}
.flip-inner{position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.2,.7,.3,1); transform-style:preserve-3d;}
.flip-card:hover .flip-inner, .flip-card:focus-within .flip-inner{transform:rotateY(180deg);}
.flip-front, .flip-back{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:12px; border:1px solid var(--line); background:var(--paper); box-shadow:0 4px 14px rgba(34,28,21,0.07);
  padding:24px; display:flex; flex-direction:column; gap:8px;
}
.flip-front .cc-icon{font-size:28px;}
.flip-front h3, .flip-back h3{font-size:15.5px; font-style:italic; color:var(--accent-dark); margin:0; line-height:1.3;}
.flip-front p, .flip-back p{font-size:12.5px; color:var(--ink-soft); margin:0;}
.flip-hint{margin-top:auto; font-size:11px; color:var(--ink-soft); font-style:italic; display:flex; align-items:center; gap:5px;}
.flip-back{transform:rotateY(180deg); justify-content:center;}
.flip-back p{font-size:13px; margin-bottom:6px;}
.flip-back .btn{align-self:flex-start; margin-top:4px;}
.flip-card:nth-of-type(6n+1) .flip-front, .flip-card:nth-of-type(6n+1) .flip-back{border-top:4px solid var(--accent);}
.flip-card:nth-of-type(6n+2) .flip-front, .flip-card:nth-of-type(6n+2) .flip-back{border-top:4px solid var(--teal);}
.flip-card:nth-of-type(6n+3) .flip-front, .flip-card:nth-of-type(6n+3) .flip-back{border-top:4px solid var(--gold);}
.flip-card:nth-of-type(6n+4) .flip-front, .flip-card:nth-of-type(6n+4) .flip-back{border-top:4px solid var(--teal-light);}
.flip-card:nth-of-type(6n+5) .flip-front, .flip-card:nth-of-type(6n+5) .flip-back{border-top:4px solid var(--accent-dark);}
.flip-card:nth-of-type(6n+6) .flip-front, .flip-card:nth-of-type(6n+6) .flip-back{border-top:4px solid var(--gold);}

/* ---------- Bandeau défilant infini (certifications & partenaires) ---------- */
.marquee-wrap{
  overflow:hidden; width:100%; margin-top:40px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{display:flex; gap:16px; width:max-content; animation:marqueeScroll 24s linear infinite;}
.marquee-wrap:hover .marquee-track{animation-play-state:paused;}
@keyframes marqueeScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){.marquee-track{animation:none;}}
.marquee-item{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:14px 22px; font-size:14px; font-weight:700; color:var(--ink); white-space:nowrap;
  box-shadow:0 2px 8px rgba(34,28,21,0.05); transition:border-color .2s ease, transform .2s ease;
}
.marquee-item:hover{border-color:var(--accent); transform:translateY(-2px);}
.marquee-item .mi-icon{margin-right:6px;}
.marquee-item small{font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft);}

/* ---------- Bandeau sombre (CTA de contraste) ---------- */
.cta-dark{
  background:linear-gradient(160deg, #1B4644 0%, #16403E 55%, #0F2E2C 100%); border-radius:16px; padding:52px 40px;
  text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cta-dark::before{
  content:''; position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background:radial-gradient(circle at 20% 20%, rgba(232,169,61,0.18), transparent 55%),
             radial-gradient(circle at 85% 80%, rgba(226,103,42,0.15), transparent 55%);
}
.cta-dark > *{position:relative;}
.cta-dark h2{font-size:clamp(24px,3vw,32px); font-style:italic; color:#fff; margin-bottom:12px;}
.cta-dark p{color:#D9EAE8; font-size:15px; max-width:520px; margin:0 auto 26px;}
.cta-dark .btn-primary{background:var(--gold); color:#221C15; box-shadow:0 4px 14px rgba(232,169,61,0.35);}
.cta-dark .btn-primary:hover{background:#fff; color:var(--teal-dark, #0F2E2C);}

/* ---------- FAQ (flèche animée, réutilisable) ---------- */
.faq{max-width:780px; margin:44px auto 0;}
.faq details{background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:16px 20px; margin-bottom:10px; transition:border-color .2s ease, box-shadow .2s ease;}
.faq details:hover{border-color:var(--accent);}
.faq details[open]{box-shadow:0 4px 14px rgba(34,28,21,0.06);}
.faq summary{cursor:pointer; font-weight:600; font-size:14.5px; color:var(--ink); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .faq-arrow{flex:0 0 auto; font-size:16px; color:var(--accent-dark); transition:transform .3s ease;}
.faq details[open] summary .faq-arrow{transform:rotate(90deg);}
.faq p{color:var(--ink-soft); font-size:14px; margin:10px 0 0;}

/* ---------- Cascade au défilement (grilles) ---------- */
.features .reveal, .path-cards .reveal, .facts .reveal, .quality-grid .reveal,
.features.reveal, .path-cards.reveal{transition-delay:0s;}
.features > .feature:nth-child(1), .path-cards > .path-card:nth-child(1), .facts > .fact:nth-child(1){transition-delay:.02s;}
.features > .feature:nth-child(2), .path-cards > .path-card:nth-child(2), .facts > .fact:nth-child(2){transition-delay:.1s;}
.features > .feature:nth-child(3), .path-cards > .path-card:nth-child(3), .facts > .fact:nth-child(3){transition-delay:.18s;}
.facts > .fact:nth-child(4){transition-delay:.26s;}

/* ---------- Retour en haut ---------- */
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--teal); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; box-shadow:0 6px 18px rgba(11,54,52,0.35);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .2s ease; z-index:150;
}
.back-to-top.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.back-to-top:hover{background:var(--accent);}
@media (prefers-reduced-motion: reduce){.back-to-top{transition:opacity .01ms;}}

/* ---------- Liens de pied de page : soulignement animé ---------- */
.footer-list a, .footer-legal-links a{position:relative;}
.footer-list a::after, .footer-legal-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:currentColor;
  transition:width .25s ease;
}
.footer-list a:hover::after, .footer-legal-links a:hover::after{width:100%;}