/* MERIDIAN — Styles communs pages secondaires
   Partagé par : blog, sources, methodologie, cas-usage, cgv,
                 confidentialite, mentions-legales, articles de blog */

*{box-sizing:border-box;margin:0;padding:0;}
body{background:#F5F3EE;color:#333;font-family:'Source Sans 3',sans-serif;line-height:1.7;padding:40px 24px 80px;}
.container{max-width:760px;margin:0 auto;}

h1{font-family:'Playfair Display',serif;font-size:28px;color:#0A1E3D;margin-bottom:8px;}
.subtitle{font-size:15px;color:#888;margin-bottom:32px;}
h2{font-size:20px;font-weight:700;color:#0A1E3D;margin:36px 0 14px;padding-bottom:8px;border-bottom:2px solid #0A1E3D;}
h3{font-size:16px;font-weight:700;color:#0A1E3D;margin:24px 0 10px;}
p{margin-bottom:16px;font-size:15px;color:#444;}
ul,ol{margin:0 0 16px 24px;font-size:15px;color:#444;}
li{margin-bottom:6px;}
a{color:#0A1E3D;}

.back{display:inline-block;margin-bottom:24px;font-size:13px;color:#888;text-decoration:none;}
.back:hover{color:#0A1E3D;}

/* Métadonnées article */
.meta{font-size:14px;color:#888;margin-bottom:32px;}
.meta span{margin-right:16px;}

/* Tables */
table{width:100%;border-collapse:collapse;margin:16px 0 24px;}
th{text-align:left;padding:8px 14px;font-size:12px;font-weight:700;color:#0A1E3D;border-bottom:2px solid #ddd;text-transform:uppercase;letter-spacing:.05em;}
td{padding:8px 14px;font-size:14px;border-bottom:1px solid #eee;color:#444;}
tr:hover td{background:#f8f6f2;}

/* Badges Amirauté */
.badge{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11px;font-weight:700;margin-right:4px;}
.badge-green{background:rgba(26,127,75,.12);color:#1A7F4B;}
.badge-orange{background:rgba(200,100,0,.1);color:#B87333;}
.badge-red{background:rgba(192,57,43,.1);color:#C0392B;}
.badge-gray{background:rgba(100,100,100,.1);color:#666;}
.badge-purple{background:rgba(128,0,255,.1);color:#7B2FBE;}

/* Encadrés principe */
.principle{background:#fff;border-left:3px solid #0A1E3D;padding:16px 20px;margin:20px 0;border-radius:0 6px 6px 0;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.principle strong{color:#0A1E3D;}

/* CTA */
.cta{
  display:inline-block;padding:12px 28px;
  background:linear-gradient(90deg,#0A1E3D 0%,#1D4ED8 50%,#0A1E3D 100%);
  background-size:200% auto;
  color:#F5F3EE;border-radius:4px;text-decoration:none;font-weight:700;font-size:14px;margin-top:20px;
  transition:background-position .4s ease,box-shadow .2s ease,transform .2s ease;
  box-shadow:0 2px 10px rgba(10,30,61,.2);
}
.cta:hover{
  background-position:right center;
  box-shadow:0 6px 24px rgba(29,78,216,.3);
  transform:translateY(-1px);
}
.cta:active{transform:translateY(0);box-shadow:0 2px 8px rgba(29,78,216,.2);}
.cta-box{text-align:center;margin-top:48px;padding:32px;background:#fff;border-radius:8px;border:1px solid #e0ddd7;transition:box-shadow .2s ease;}
.cta-box:hover{box-shadow:0 8px 32px rgba(0,0,0,.07);}
.cta-box p{font-size:16px;color:#555;margin-bottom:16px;}

/* ══ PREMIUM ANIMATIONS — 2026-04-04 ══ */

/* Scroll progress bar — CSS scroll-driven (Chrome 115+ progressive enhancement) */
@supports(animation-timeline:scroll()){
  html::before{
    content:'';
    position:fixed;top:0;left:0;
    width:100%;height:2px;
    background:linear-gradient(90deg,#0A1E3D 0%,#1D4ED8 60%,#7B2FBE 100%);
    transform-origin:0 50%;transform:scaleX(0);
    z-index:9999;
    animation:secScrollProgress auto linear;
    animation-timeline:scroll(root block);
    pointer-events:none;
  }
  @keyframes secScrollProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
}

/* Page entrance animations */
@keyframes pageEntranceUp{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes pageEntranceFade{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}

.back{
  animation:pageEntranceFade .35s ease both;
}
h1{
  animation:pageEntranceUp .5s cubic-bezier(.16,1,.3,1) .05s both;
}
.subtitle,.meta{
  animation:pageEntranceFade .5s cubic-bezier(.16,1,.3,1) .15s both;
}

/* H2 reveal — slide-in underline on first appearance */
@keyframes h2LineGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
h2{
  position:relative;
  /* Remove static border-bottom, replace with animated pseudo-element */
  border-bottom:none;
  padding-bottom:10px;
}
h2::after{
  content:'';position:absolute;bottom:0;left:0;
  width:100%;height:2px;
  background:#0A1E3D;
  transform-origin:left;
  animation:h2LineGrow .5s cubic-bezier(.16,1,.3,1) .3s both;
}

/* Principle card hover */
.principle{
  transition:transform .2s ease,box-shadow .2s ease,border-left-color .2s ease;
}
.principle:hover{
  transform:translateX(4px);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  border-left-color:#1D4ED8;
}

/* Table row enhanced hover */
tr:hover td{
  background:#f4f2ee;
  transition:background .15s ease;
}

/* Badge hover */
.badge{
  transition:transform .15s ease,box-shadow .15s ease;
}
.badge:hover{transform:scale(1.06);box-shadow:0 2px 8px rgba(0,0,0,.1);}

/* Respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  .back,h1,.subtitle,.meta,h2::after,html::before{
    animation:none!important;opacity:1!important;transform:none!important;
  }
}