/* Direction visuelle Timyko — beige doux, bleu ciel et touches joyeuses */
:root{
  --ink:#145777;
  --teal:#3a9aaa;
  --sky:#dff3f7;
  --cream:#fffaf1;
  --sand:#f8ecdc;
  --yellow:#f4b51b;
  --coral:#ef766a;
  --green:#8daf65;
  --shadow:0 20px 55px rgba(45,116,137,.10);
}
body{background:#fffdf8;color:#175a78}
.site-header{height:88px;background:rgba(255,253,248,.94);border-bottom:1px solid #e8ded0;box-shadow:0 6px 25px rgba(63,119,135,.05)}
.brand{width:152px;height:68px;display:flex;align-items:center;overflow:hidden}
.brand img{width:100%;height:100%;object-fit:contain;transform:scale(1.35)}
.brand-face{display:none}
.main-nav{font-size:15px;color:#426d7c}
.header-actions select{background:#fff;border-color:#d8cbbc}
.button{background:#2f91a0;box-shadow:0 10px 25px rgba(47,145,160,.18)}
.button:hover{background:#267e8c;box-shadow:0 14px 30px rgba(47,145,160,.25)}
.hero{min-height:690px;grid-template-columns:minmax(0,.92fr) minmax(470px,1.08fr);background:linear-gradient(115deg,#fffaf1 0 52%,#f4e5d5 100%);position:relative;padding-top:60px}
.hero:before,.hero:after{content:"";position:absolute;background:#dde8de;border-radius:60px;opacity:.55;filter:blur(.2px)}
.hero:before{width:115px;height:45px;left:6%;top:12%;box-shadow:44px 4px 0 -8px #dde8de,-32px 10px 0 -12px #dde8de}
.hero:after{width:94px;height:36px;right:7%;top:9%;box-shadow:36px 3px 0 -8px #dde8de,-28px 8px 0 -11px #dde8de}
.hero h1{color:#164f6d;font-size:clamp(42px,5vw,68px);max-width:680px}
.hero-copy>p{color:#52717c;max-width:620px}
.eyebrow{color:#3796a4}
.hero-visual{padding:22px;border-radius:38px;background:linear-gradient(145deg,#fff7e9,#e5f3f3);isolation:isolate}
.hero-visual>img{background:transparent;border-radius:30px;box-shadow:none;filter:none;mix-blend-mode:multiply}
.blob-one{display:none}
.blob-two{width:145px;height:145px;background:#f8c552;opacity:.75}
.floating-card{background:#ee776c;border:7px solid #fff7ec;width:108px;height:108px;right:0}
.reassurance>span{background:#fffdf8;border:1px solid #eadfce;color:#446c7b}
.benefits{margin-top:-38px}
.benefits article{border:1px solid #f1e6d8;box-shadow:0 15px 40px rgba(49,111,129,.08)}
.benefit-icon{border-radius:50%}
.products{background:linear-gradient(#fffdf8,#fffaf3)}
.section-heading{max-width:800px}
.section-heading .eyebrow,.universe .eyebrow,.cta .eyebrow{font-size:17px;letter-spacing:.1em;line-height:1.35}
.section-heading h2{color:#164f6d}
.product-card{background:#fffefb;border:1px solid #efe4d7;box-shadow:0 22px 60px rgba(46,105,122,.08);padding:clamp(24px,4vw,54px);gap:34px;grid-template-columns:1fr;max-width:1080px;position:relative;overflow:hidden}
.product-card:before{content:"";position:absolute;left:0;top:0;width:9px;height:100%;background:linear-gradient(#ef766a,#f5b71d)}
.product-card.reverse:before{background:linear-gradient(#3a9aaa,#8daf65)}
.product-copy{order:1;padding:6px 18px 12px;max-width:860px}
.product-gallery,.product-card.reverse .product-gallery{order:2;width:100%}
.product-gallery>img{background:#fbefe2;border:1px solid #f1e3d5;aspect-ratio:auto;max-height:none;object-fit:contain}
.product-copy h2{color:#175676;margin-top:12px}
.product-copy .product-tag{font-size:14px}
.product-copy .lead{max-width:820px;font-size:19px}
.product-copy .check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-bottom:30px}
.thumbnails{padding-top:4px}
.product-copy .lead{color:#57737e}
.check-list li{border-color:#ece4d9}
.check-list li:before{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#e9f1de;font-size:12px;top:13px}
.universe{background:#e5f3f4;position:relative}
.universe:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.6) 0 4%,transparent 4.2%),radial-gradient(circle at 88% 78%,rgba(255,255,255,.45) 0 6%,transparent 6.2%);pointer-events:none}
.universe-card{background:#fffdf9;box-shadow:0 20px 50px rgba(40,104,124,.08)}
.quote-card{background:#f8e6d4;color:#175676;box-shadow:0 20px 50px rgba(40,104,124,.06)}
.quote-card .quote-mark{color:#f4b51b}
.faq{background:#fffdf9}
.cta{background:linear-gradient(135deg,#f8ebdc,#fff6e9);position:relative;overflow:hidden}
.cta:before,.cta:after{content:"";position:absolute;border-radius:50%;opacity:.45}
.cta:before{width:180px;height:180px;background:#d8eff1;left:-65px;top:-50px}.cta:after{width:130px;height:130px;background:#f6c751;right:-40px;bottom:-60px}
footer{background:#e1f1f3;color:#175676;border-top:1px solid #d3e7e9}
.footer-brand{margin:0 auto 10px;width:180px;height:80px}
footer p,footer small{color:#52717c}
footer nav{color:#2d687e}
@media(max-width:980px){.hero{grid-template-columns:1fr}.brand{width:135px}.product-card{gap:24px}.product-copy .check-list{grid-template-columns:1fr}}
@media(max-width:600px){.site-header{height:72px}.brand{width:118px;height:58px}.hero{padding-top:45px;background:linear-gradient(150deg,#fffaf1 0 60%,#f5e6d7)}.hero h1{font-size:39px}.hero-visual{padding:3px;border-radius:24px}.hero-visual>img{border-radius:22px}.benefits{margin-top:-20px}.product-card{padding:22px 13px 15px}.product-card:before{width:6px}.product-copy{padding:4px 10px}.product-copy .lead{font-size:17px}.floating-card{width:82px;height:82px;border-width:4px}.footer-brand{width:155px}}

/* Variante de comparaison : texte à gauche, visuel à droite */
.product-card,.product-card.reverse{
  max-width:1360px;
  grid-template-columns:minmax(390px,.92fr) minmax(460px,1.08fr);
  align-items:center;
  gap:clamp(42px,6vw,90px);
  padding:clamp(38px,4.5vw,70px);
}
.product-copy,.product-card.reverse .product-copy{order:1;padding:24px 0 0;max-width:none;align-self:start}
.product-gallery,.product-card.reverse .product-gallery{order:2;width:100%}
.product-copy .check-list{grid-template-columns:1fr;gap:0;margin-top:30px}
.product-gallery>img{width:100%;max-height:680px;object-fit:contain;border-radius:26px}
.thumbnails{justify-content:flex-start;margin-top:18px}
@media(max-width:980px){
  .product-card,.product-card.reverse{grid-template-columns:1fr;gap:30px;padding:32px}
  .product-copy,.product-card.reverse .product-copy{order:1;padding-top:0}
  .product-gallery,.product-card.reverse .product-gallery{order:2}
}
@media(max-width:600px){.product-card,.product-card.reverse{padding:26px 18px 20px}.product-gallery>img{border-radius:18px}}
