/* Syntora Software — styles communs.
   La mise en page de chaque bloc est portée par les attributs style du HTML ;
   ce fichier regroupe polices, base, états interactifs et animations. */

/* Polices auto-hébergées (variables, sous-ensemble latin : tout le français, €, guillemets). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin.woff2") format('woff2');
}

/* Base */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#F1F6F9;color:#3A4D5C;font-family:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
a{color:#0E5C8A}a:hover{color:#0B4468}
:focus-visible{outline:2px solid #0E5C8A;outline-offset:3px;border-radius:6px}
.dark :focus-visible{outline-color:#9FD0EA}
.dark .light :focus-visible{outline-color:#0E5C8A}
.skip{position:absolute;left:16px;top:-80px;z-index:30;background:#11314A;color:#FFFFFF;padding:10px 16px;border-radius:8px;text-decoration:none;font-weight:600}
.skip:focus{top:12px;color:#FFFFFF}

/* Navigation */
.navlink{position:relative;text-decoration:none;transition:color .2s ease}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:#0E5C8A;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.navlink:hover{color:#11314A}
.navlink:hover::after{transform:scaleX(1)}

/* Boutons et liens */
.btn{transition:background-color .2s ease,box-shadow .25s ease,translate .15s ease}
.btn .arr{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover .arr{transform:translateX(4px)}
.btn:active{translate:0 1px}
.btn-blue:hover{background:#0B4A70 !important;color:#FFFFFF}
.btn-white:hover{background:#E4F0F8 !important;color:#11314A}
.textlink{text-underline-offset:4px;text-decoration-thickness:1px}
.lift{transition:translate .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease}
.lift:hover{translate:0 -3px;box-shadow:0 22px 44px -26px rgba(17,49,74,.45)}
.row-link{transition:background-color .2s ease}
.row-link:hover{background:#F1F6F9}
.row-link .arr{transition:transform .25s cubic-bezier(.16,1,.3,1)}
.row-link:hover .arr{transform:translate(3px,-3px)}

/* Questions fréquentes */
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.faq{transition:border-color .25s ease,box-shadow .25s ease}
.faq[open]{border-color:#B8CDDC !important;box-shadow:0 14px 32px -24px rgba(17,49,74,.4)}
.faq .chev{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.faq[open] .chev{transform:rotate(180deg)}

/* Animations */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(14,92,138,.45)}70%{box-shadow:0 0 0 7px rgba(14,92,138,0)}100%{box-shadow:0 0 0 0 rgba(14,92,138,0)}}
@media (prefers-reduced-motion:no-preference){
.in{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
.live{animation:pulse 2.4s ease-out infinite}
.faq[open] .faq-a{animation:rise .45s cubic-bezier(.16,1,.3,1) both}
@supports (animation-timeline:view()){
.rv{animation:rise ease-out both;animation-timeline:view();animation-range:entry 0% entry 45%}
.draw{transform-origin:left;animation:grow ease-out both;animation-timeline:view();animation-range:entry 30% cover 50%}
}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* Responsive */
@media (max-width:1100px){.navlinks{display:none !important}}
@media (max-width:720px){.backlink{display:none !important}}
/* Petits téléphones : l'en-tête doit tenir sur 320 px. */
@media (max-width:400px){
.hdr{gap:12px !important}
.hdr-cta{padding:0 12px !important;font-size:14px !important}
}
@media (max-width:350px){.brand-txt{display:none !important}}