/* cm. — Charte Blu Lepards · feuille de style commune des pages portfolio */
@import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=DM+Sans:ital,wght@0,400;0,700;1,400&display=swap');
:root{--petrole:#0E4C5D;--foret:#1D2E1D;--ocre:#C5811C;--sable:#D5C8A9;--bleuvert:#438683;--camel:#AF8562;--blanc:#FFFFFF;--sable-clair:#EFE9DC}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--foret);font-family:'DM Sans',Arial,sans-serif;font-size:18px;line-height:1.65}
a{color:var(--petrole)}a:hover{color:var(--foret)}
img{max-width:100%;height:auto}
.cm-wrap{max-width:1040px;margin:0 auto;padding:0 24px}
/* Navigation */
.cm-nav{background:var(--blanc);border-bottom:1px solid var(--sable)}
.cm-nav .cm-wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.cm-nav img{height:40px;width:auto;display:block}
.cm-nav a.cm-back{font-family:'Agbalumo',Georgia,serif;font-size:18px;text-decoration:none}
/* Titres */
.cm-eyebrow{font-weight:700;font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--petrole);margin:0}
.cm-dark .cm-eyebrow{color:var(--ocre)}
h1,h2,h3{font-family:'Agbalumo',Georgia,serif;font-weight:400;color:var(--petrole);text-wrap:balance}
h1{font-size:clamp(42px,6vw,76px);line-height:1.04;margin:14px 0 0}
h2{font-size:clamp(32px,4vw,50px);line-height:1.1;margin:10px 0 0}
h3{font-size:26px;line-height:1.2;margin:0}
.cm-dark h1,.cm-dark h2,.cm-dark h3{color:var(--sable)}
/* Sections */
.cm-hero{background:var(--petrole);color:var(--sable);position:relative;overflow:hidden;padding:72px 0 80px}
.cm-hero .cm-hook{font-family:'Agbalumo',Georgia,serif;font-size:clamp(22px,2.4vw,30px);line-height:1.3;color:var(--sable);margin:24px 0 0;max-width:720px}
.cm-section{padding:88px 0}
.cm-section.cm-sable{background:var(--sable)}
.cm-section.cm-dark{background:var(--foret);color:var(--sable)}
.cm-lead{font-size:20px;max-width:720px;margin:18px 0 0}
/* Motif léopard (toujours en bordure, jamais derrière un texte) */
.cm-leo{position:absolute;pointer-events:none}
.cm-leo.coin{right:-30px;top:-20px;width:320px}
.cm-leo.frise{right:24px;bottom:12px;width:300px}
/* Chiffres clés */
.cm-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:40px}
.cm-figure{background:var(--blanc);border-radius:20px;padding:26px}
.cm-figure:nth-child(even){background:var(--petrole);color:var(--sable)}
.cm-figure strong{display:block;font-family:'Agbalumo',Georgia,serif;font-weight:400;font-size:48px;line-height:1;color:var(--petrole)}
.cm-figure:nth-child(even) strong{color:var(--ocre)}
/* Liste d'observations */
.cm-list{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:12px}
.cm-list li{display:flex;gap:14px;background:var(--sable-clair);border-radius:14px;padding:16px 20px}
.cm-list li::before{content:"✦";color:var(--ocre);font-family:'Agbalumo',Georgia,serif;flex:none}
/* L'email, présenté comme une lettre */
.cm-email{background:var(--blanc);border:2px solid var(--foret);border-radius:18px;box-shadow:8px 8px 0 var(--ocre);padding:32px 36px;margin-top:36px;max-width:760px}
.cm-email .cm-meta{font-size:15px;border-bottom:1px solid var(--sable);padding-bottom:12px;margin-bottom:18px}
.cm-email .cm-meta b{color:var(--petrole)}
.cm-email p{margin:0 0 14px}
/* Analyse « pourquoi ça marche » */
.cm-why{background:var(--sable-clair);border-radius:18px;padding:28px 32px;margin-top:32px}
.cm-why h3{margin-bottom:12px}
/* Cartes (options, textes prêts à l'emploi…) */
.cm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:40px}
.cm-card{border:2px solid var(--petrole);border-radius:24px;padding:30px;background:var(--blanc);position:relative}
.cm-card:nth-child(2){background:var(--petrole);color:var(--sable);border-color:var(--petrole)}
.cm-card:nth-child(2) h3{color:var(--sable)}
.cm-card .cm-num{font-family:'Agbalumo',Georgia,serif;font-size:44px;line-height:1;color:var(--ocre);margin:0 0 10px}
/* Texte flouté (aperçu) */
.cm-blur{position:relative;max-height:160px;overflow:hidden}
.cm-blur::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.cm-card:nth-child(2) .cm-blur::after{background:linear-gradient(rgba(14,76,93,0),var(--petrole))}
/* Bulle de Blue */
.cm-blue{display:flex;flex-direction:column;align-items:center;max-width:360px;margin:40px auto 0}
.cm-blue img{width:78px;height:78px;border-radius:50%;border:3px solid var(--ocre);background:#fff;position:relative;z-index:1;animation:cm-bob 4.5s ease-in-out infinite}
.cm-blue .cm-bulle{background:#fff;color:var(--petrole);border:2px solid var(--foret);border-radius:18px;padding:16px 20px 10px;margin-top:-10px;box-shadow:4px 4px 0 var(--foret);text-align:center;font-family:'Agbalumo',Georgia,serif;font-size:19px;line-height:1.25}
.cm-blue small{display:block;font-family:'DM Sans',Arial,sans-serif;font-size:12px;font-style:italic;color:var(--foret);margin-top:4px}
/* Boutons */
.cm-btn{display:inline-block;font-family:'Agbalumo',Georgia,serif;font-size:21px;background:var(--petrole);color:var(--sable);text-decoration:none;padding:14px 30px;border-radius:999px;box-shadow:5px 5px 0 var(--ocre);transition:transform .15s,box-shadow .15s}
.cm-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ocre);color:var(--sable)}
.cm-dark .cm-btn,.cm-hero .cm-btn{background:var(--ocre);color:var(--foret);box-shadow:5px 5px 0 var(--sable)}
.cm-btn:focus-visible{outline:3px solid var(--ocre);outline-offset:3px}
/* Bandeau qui défile */
.cm-marquee{background:var(--petrole);border-top:4px solid var(--ocre);border-bottom:4px solid var(--ocre);overflow:hidden;padding:14px 0}
.cm-marquee div{display:flex;width:max-content;animation:cm-mq 38s linear infinite;font-family:'Agbalumo',Georgia,serif;font-size:28px;color:var(--sable);white-space:nowrap}
.cm-marquee span{padding-right:24px}
/* Appel final + pied de page */
.cm-cta{text-align:center}
.cm-footer{background:var(--foret);color:var(--sable);padding:40px 0;font-size:14px}
.cm-footer a{color:var(--sable)}
.cm-footer .cm-wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
@keyframes cm-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes cm-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.cm-marquee div,.cm-blue img{animation:none}}
@media (max-width:600px){.cm-section{padding:64px 0}.cm-email{padding:24px 20px}}