@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
/* ============================================================
   ÉTAPE 1 — Variables globales FQSG
   (mêmes noms que le site du Congrès, valeurs FQSG)
   ============================================================ */
:root {
  /* Couleurs de marque */
  --c-navy:#1a3663;
  --c-magenta:#ab3c83;     --c-magenta-hover:#be5999;
  --c-turquoise:#0ca3a3;   --c-turquoise-hover:#3fb6b6;
  --c-line:#e3e7ef;

  /* Rôles */
  --c-text:var(--c-navy);
  --c-primary:var(--c-magenta);       --c-primary-hover:var(--c-magenta-hover);
  --c-secondary:var(--c-turquoise);   --c-secondary-hover:var(--c-turquoise-hover);
  --c-link:var(--c-navy);
  --c-link-hover:var(--c-magenta);
  --c-link-line:var(--c-magenta);     /* couleur du soulignement */
     --link-color:var(--c-link);
  --link-weight:var(--fw-medium);
  --link-deco:underline;            /* underline | none */
  --link-thickness:1px;
  --link-offset:.2em;
  --link-line-color:currentColor;   /* trait de la même couleur que le texte */

  /* Typographie */
  --font-base:"Outfit",sans-serif;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fw-body:var(--fw-light);
  --fs-body:18px; --fs-small:16px; --fs-xs:14px;
   --fs-h1:clamp(28px, 2vw + 20px, 41px);     /* 41px dès ~1050px de large */
  --fs-h2:clamp(23px, 1.2vw + 15px, 29px);   /* 29px dès ~1170px */
  --fs-h3:clamp(20px, .6vw + 17px, 23px);    /* 23px dès ~1000px */
  --fs-h4:clamp(18px, .4vw + 16.5px, 20px);  /* 20px dès ~875px */
    --fs-h5:19px; --fs-h6:16px;
  --lh-body:1.5; --lh-heading:1.4;
}
/* Évite le double soulignement des <u><a>…</a></u> */
html body :where(.zone-html .content, .mod-article__content, .mod-article__intro,
                 .news-text, .news-accordion-content) u{
  text-decoration:none;
}

/* Liens du contenu */
html body :where(.zone-html .content, .mod-article__content, .mod-article__intro,
                 .news-text, .news-accordion-content, .table-striped td)
a:not(:where(.btn, [class*="btn-"], .back-to-list, .social-link,
             .zone-33 a, .line-footer a, .dropdown-menu a)){
  color:var(--link-color);
  font-weight:var(--link-weight);
  text-decoration-line:var(--link-deco);
  text-decoration-color:var(--link-line-color);
  text-decoration-thickness:var(--link-thickness);
  text-underline-offset:var(--link-offset);
  transition:color 150ms, text-decoration-color 150ms;
}
html body :where(.zone-html .content, .mod-article__content, .mod-article__intro,
                 .news-text, .news-accordion-content, .table-striped td)
a:not(:where(.btn, [class*="btn-"], .back-to-list, .social-link,
             .zone-33 a, .line-footer a, .dropdown-menu a)):is(:hover, :focus){
  color:var(--c-link-hover);
  text-decoration-line:underline;
  text-decoration-color:currentColor;
}

/* Liens dans un titre : pas de soulignement, graisse du titre */
html body :where(h1, h2, h3, h4, h5, h6) a:not(.btn){
  font-weight:inherit;
  text-decoration-line:none;
}
/* ============================================================
   ÉTAPE 3 — Typographie pilotée par :root
   (couleurs inchangées : elles restent gérées par le thème)
   ============================================================ */
body{
  font-family:var(--font-base);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,p{
  font-family:var(--font-base);
  line-height:var(--lh-heading);
}
p{
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
}
h1,.h1{font-size:var(--fs-h1);font-weight:var(--fw-semibold)}
h2,.h2{font-size:var(--fs-h2);font-weight:var(--fw-bold)}
h3,.h3{font-size:var(--fs-h3);font-weight:var(--fw-medium)}
h4,.h4{font-size:var(--fs-h4);font-weight:var(--fw-regular)}
h5,.h5{font-size:var(--fs-h5);font-weight:var(--fw-semibold)}
h6,.h6{font-size:var(--fs-h6);font-weight:var(--fw-semibold)}

/* Finitions de lecture (ignorées par les vieux navigateurs, sans conséquence) */
h1,h2,h3,.h1,.h2,.h3{text-wrap:pretty}   /* évite le mot orphelin sur la 2e ligne */
.line-banner h1{text-wrap:pretty}       /* le long titre du bandeau reste équilibré */
p,li{text-wrap:pretty}
html body :where(.zone-html .content, .mod-article__content, .news-text) li + li{margin-top:.25em}

/* ============================================================
   BQACG
   ============================================================ */
.line-bqacg{
  --c-soft:#f3f6fb;
    --bq-h1-fs:clamp(26px,1.2vw + 20px,34px)
  --bq-menu-fs:var(--fs-h3);   /* taille du Sommaire : --fs-h3 (23px), --fs-h4 (20px) ou --fs-body (18px) */
  padding-block:clamp(24px,4vw,48px) clamp(56px,8vw,112px);
  min-height:50vh;
}

.line-bqacg [hidden]{display:none!important}
.line-bqacg > .container{padding-inline:clamp(16px,4vw,32px)}
.line-bqacg .zone-33,
.line-bqacg .zone-67{padding-inline:0}
.line-bqacg .zone-67 [id]{scroll-margin-top:24px}
.line-bqacg .zone-67 img[style*="width"]{max-width:100%;height:auto!important}

/* Ordinateur : 2 colonnes, Sommaire collant */
@media (min-width:768px){
  .line-bqacg > .container > .row{
    display:grid;
    grid-template-columns:minmax(220px,300px) minmax(0,1fr);
    column-gap:clamp(32px,5vw,72px);
    align-items:start;margin-inline:0;
  }
  .line-bqacg > .container > .row::before,
  .line-bqacg > .container > .row::after{display:none}
  .line-bqacg .zone-33,
  .line-bqacg .zone-67{float:none;width:auto}
  .line-bqacg .zone-33{position:sticky;top:24px}
}

/* Sommaire */
.line-bqacg .zone-33 h3{margin:0;font-weight:var(--fw-medium);line-height:1.3}
.line-bqacg .zone-33 h3 a{
  display:flex;align-items:center;gap:.5em;min-height:48px;padding: 10px;
  border-left:3px solid transparent;border-radius:0 8px 8px 0;
  color:var(--c-navy);font-weight:var(--fw-semibold);text-decoration:none;
  transition:background-color .15s,border-color .15s;
}
.line-bqacg .zone-33 h3 a::before{
  content:"chevron_right";
  font:normal 400 2rem/1 "Material Symbols Rounded";
  font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
  -webkit-font-feature-settings:"liga";font-feature-settings:"liga";
  text-transform:none;letter-spacing:normal;white-space:nowrap;direction:ltr;
  color:var(--c-magenta);flex:none;
}
.line-bqacg .zone-33 a[href$="/fr/bqacg"]::before{content:"account_balance"}
.line-bqacg .zone-33 a[href$="/titres-bqacg"]::before{content:"workspace_premium"}
.line-bqacg .zone-33 a[href$="/bqacg-obtenir-une-attestation"]::before{content:"verified"}
.line-bqacg .zone-33 a[href$="/bqacg-inscription"]::before{content:"edit_note"}
.line-bqacg .zone-33 a[href$="/bqacg-reglement"]::before{content:"gavel"}
.line-bqacg .zone-33 a[href$="/bqacg-bottin-des-genealogistes-agrees"]::before{content:"groups"}
.line-bqacg .zone-33 h3 a:hover{background:rgba(171,60,131,.08)}
.line-bqacg .zone-33 h3 a:focus-visible{outline:3px solid var(--c-turquoise);outline-offset:2px}
.line-bqacg .zone-33 h3 a[aria-current="page"]{
  background:rgba(26,54,99,.07);border-left-color:var(--c-magenta);
}

/* Mobile : le Sommaire devient une grille de tuiles 2×3 */
/* Mobile : le Sommaire devient une grille de grandes tuiles */
@media (max-width:767px){
  .line-bqacg{--bq-menu-fs:var(--fs-body)}          /* 18px sur mobile */
  .line-bqacg .zone-33 .content{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px;
  }
  .line-bqacg .zone-33 h2{grid-column:1/-1;margin:0 0 4px}
  .line-bqacg .zone-33 h3 a{
    border:1px solid var(--c-line);border-radius:10px;
    min-height:56px;padding:10px 12px;gap:10px;line-height:1.25;
  }
  .line-bqacg .zone-33 h3 a::before{font-size:24px}
  .line-bqacg .zone-33 h3 a[aria-current="page"]{border-color:var(--c-magenta)}
}

/* Petit téléphone : une tuile par ligne, texte sur une seule ligne */
@media (max-width:575px){
  .line-bqacg .zone-33 .content{grid-template-columns:1fr}
}

/* Page BQACG : actualités */
.line-bqacg .mod-article__content h6{
  margin:36px 0 4px;padding-top:24px;border-top:1px solid var(--c-line);
  font-size:var(--fs-xs);letter-spacing:.04em;
}
.line-bqacg .mod-article__content h6 em{font-style:normal}
.line-bqacg .mod-article__content h6 + h3{margin-top:0}

/* Bottin */
.line-bqacg .news-accordion-content ul{list-style:none;margin:0;padding:0}
.line-bqacg .news-accordion-content li{padding:.3em 0;overflow-wrap:anywhere;font-weight:var(--fw-regular)}
.line-bqacg .news-accordion-content li a{
  font-weight:var(--fw-regular);
  text-decoration-thickness:1px;
  text-decoration-color:rgba(171,60,131,.5);
}
.line-bqacg .news-accordion-content li a:hover{text-decoration-color:currentColor}
.line-bqacg .news-accordion-content p:empty{display:none}
.line-bqacg a.news-accordion-header:focus-visible{outline:3px solid var(--c-turquoise);outline-offset:2px}

/* Bottin : groupes par lettre — version sobre */
.line-bqacg .bq-groupes{--bq-lettre-w:40px}
.line-bqacg .bq-groupe{
  display:grid;grid-template-columns:var(--bq-lettre-w) minmax(0,1fr);
  align-items:start;margin:0 0 10px;
}
.line-bqacg .bq-groupe:last-child{margin-bottom:0}
.line-bqacg .bq-lettre{
  padding-top:.3em;font-size:var(--fs-body);font-weight:var(--fw-bold);
  line-height:1.3;color:var(--c-magenta);
}
.line-bqacg .bq-groupe ul{padding:0;border:0}
.line-bqacg .bq-groupe ul::before{display:none}

@media (max-width:767px){
  .line-bqacg .bq-groupes{--bq-lettre-w:32px}
}
/* Encadré réutilisable (remplace le bloc « Nouveau ! » en styles inline) */
.line-bqacg .bq-callout{background:var(--c-soft);border-left:5px solid var(--c-magenta);border-radius:6px;padding:20px 24px;margin:0 0 2rem}
.line-bqacg .bq-callout h4{margin:0 0 8px;color:var(--c-magenta);font-size:var(--fs-body);text-transform:uppercase;letter-spacing:.04em}

@media (prefers-reduced-motion:reduce){.line-bqacg .zone-33 h3 a{transition:none}}

/* Image d'en-tête des articles */
.line-bqacg .mod-article__img{display:block;max-width:100%;height:auto;border-radius:12px;margin:0 0 28px}

/* Rythme des titres dans le contenu (remplace les paragraphes &nbsp; vides) */
.line-bqacg .mod-article__content h2{margin-top:48px}
.line-bqacg .mod-article__content > h2:first-child{margin-top:0}
.line-bqacg .mod-article__content h3{margin-top:36px}
.line-bqacg .mod-article__content h4{margin-top:24px;font-weight:var(--fw-semibold)}
.line-bqacg .bq-vide{display:none}

/* Boutons : espace aussi quand ils passent à la ligne */
.line-bqacg .zone-67 .btn{margin:0 16px 12px 0}
.line-bqacg .zone-67 .btn:last-child{margin-right:0}

/* Note discrète (mise à jour, « en cours de révision »…) */
.line-bqacg .bq-note{font-size:var(--fs-small);color:#5b6579}

/* Encadré : le dernier paragraphe n'ajoute pas d'espace */
.line-bqacg .bq-callout p:last-child{margin-bottom:0}

/* Ancres : le titre ne colle pas au haut de la fenêtre */
.line-bqacg .zone-67 h3[id]{scroll-margin-top:24px}

@media (prefers-reduced-motion:no-preference){
  html:has(.line-bqacg){scroll-behavior:smooth}
}
.line-bqacg .zone-67 h3[id]:target{color:var(--c-magenta)}

/* ============================================================
SUITE
   ============================================================ */

.fa-facebook:before {
    content: "\f39e";
}
.mod-header-logo {
max-width: 400px;
}
.mod-article__content {
    margin-top : 15px;}
/* ─── HEADER : liens texte (Savoir, Nous contacter) ─── */
.header-ext-custom a:hover span {
    color: #0ca3a3 !important;
}
.header-ext-custom a:hover {
    color: #0ca3a3 !important;
}

/* ─── HEADER : icône Savoir (PNG) ─── */
.header-ext-custom a[href*="savoir"] img {
    transition: filter 73ms ease-in-out;
}
.header-ext-custom a[href*="savoir"]:hover img {
    filter: brightness(0) saturate(100%) invert(32%) sepia(75%) 
            saturate(1800%) hue-rotate(156deg) brightness(105%);
}

/* ─── NEWSLETTER : dimensions communes (header + footer) ─── */
.social-link.newsletter {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    vertical-align: middle;
}
.social-link.newsletter .fa-envelope-open-text {
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

/* Supprime la marge social-links */
.mod-header .header-ext + .header-ext {
    margin-left: 0px;
}

.line-header-top .mod-header .header-ext + .header-ext {
    margin-left: 15px;
}

.social-link {
    margin-right: 5px;
    margin-left: 5px;
}

.mod-social-links .social-link:last-child {
    margin-right: 0;
}

/* ─── NEWSLETTER HEADER : fond bleu, icône blanche, hover turquoise ─── */
.line-header .social-link.newsletter {
    background-color: #1a3663;
    transition: background-color 73ms ease-in-out;
}
.line-header .social-link.newsletter .fa-envelope-open-text {
    color: #ffffff !important;
}
.line-header .social-link.newsletter:hover {
    background-color: #0ca3a3;
}
.line-header .social-link.newsletter:hover .fa-envelope-open-text {
    color: #ffffff !important;
}

/* ─── NEWSLETTER FOOTER : fond blanc, icône bleu foncé, hover icône bleu ─── */
.line-footer .social-link.newsletter {
    background-color: #ffffff;
    transition: all 73ms ease-in-out;
}
.line-footer .social-link.newsletter .fa-envelope-open-text {
    color: #1a3663;
}
.line-footer .social-link.newsletter:hover .fa-envelope-open-text {
    color: #517ebc !important;
}

.event-jumbotron__contact-wrapper .email a{
color: #ffffff;
}
#T7lby8cxiGRLqZ0DyvdlZmhw > div > div > div > ul > li.header-ext.header-ext-login > a {
font-size:0px;
}
#T7lby8cxiGRLqZ0DyvdlZmhw > div > div > div > ul > li.header-ext.header-ext-login > a:before {
content:"Espace membre";
font-size:18px;
margin-left:-3px;
}

.image-box {
  float: right;              /* place la box à droite du texte */
  margin-left: 15px;         /* espace entre l’image et le texte */
  margin-bottom: 15px;
  max-width: 400px;          /* largeur maximale */
  max-height: 300px;         /* hauteur maximale */
  overflow: hidden;          /* cache ce qui dépasse */
}

.image-box img {
  width: 100%;               /* l’image s’adapte à la largeur de la box */
  height: auto;              /* conserve les proportions */
  display: block;
  object-fit: contain;       /* ajuste l’image sans la déformer */
  max-height: 300px;         /* limite la hauteur */
}
.contact-box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.contact-columns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* permet de passer en ligne suivante si pas assez de place */
}

.contact-col {
  flex: 1;
  min-width: 250px; /* largeur minimale pour forcer le passage en colonne sur mobile */
}

.contact-col img {
  width: 20px;
  height: auto;
  margin-right: 5px;
  vertical-align: middle;
}

.contact-col h5 {
  color: #1a3663;
  margin-top: 10px;
}
.contact-item {
  display: flex;              /* aligne image + texte sur la même ligne */
  align-items: center;
  gap: 8px;                   /* espace entre l’icône et le texte */
  word-break: break-word;     /* coupe le texte si trop long */
  overflow-wrap: anywhere;    /* permet de passer à la ligne */
}

.contact-item img {
  width: 20px;
  height: auto;
  flex-shrink: 0;             /* empêche l’icône de se réduire */
}

.contact-item a, 
.contact-item span {
  flex: 1;                    /* occupe l’espace restant */
}

.shadow-in .mod-banner__img {
    position: relative;
}

.shadow-in .mod-banner__img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35); /* ajuste l’opacité ici */
    z-index: 1;
}

/* Pour que le texte reste visible */
.shadow-in .mod-banner__content {
    position: relative;
    z-index: 2;
}

.panel-news-accordion .panel-body p {
    color: #1a3663 !important;
}

/* --- 404 --- */
.page-404 {
  --p-1:  #1a3663;
  --p-2:  #2c557d;
  --p-3:  #447b9e;
  --p-4:  #7f9eb6;
  --p-owl:      #15607c;
  --p-squirrel: #11798a;

  position: relative;
  overflow: hidden;
  padding: 130px 0 70px;
  min-height: 85vh;
  background: linear-gradient(
    180deg,
    #ffffff  0%,
    #f0f5f9 40%,
    #c8dbe8 100%
  );
}

/* ── Zone animaux / arbres ── */
.trees {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ── Animation défilement ── */
@keyframes moveclouds {
  0%   { transform: translateX(120vw); }
  100% { transform: translateX(-120vw); }
}

/* ── Arbres ── */
.tree {
  position: absolute;
  z-index: 2;
  animation: moveclouds linear infinite;
  filter: drop-shadow(0 5px 8px rgba(26,54,99,0.13));
}
.tree::before {
  content: "";
  position: absolute;
  left: 50%;
  background: var(--p-1);
  transform: translateX(-50%);
  border-radius: 0 0 5px 5px;
}
.tree::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Tailles — tronc tree-B plus court via surcharge */
.size-S { width: 90px;  height: 160px; }
.size-S::before { bottom: 0;    width: 10px; height:  55px; }
.size-S::after  { bottom: 55px; width: 90px; height: 105px; }

.size-M { width: 130px; height: 210px; }
.size-M::before { bottom: 0;    width:  14px; height:  75px; }
.size-M::after  { bottom: 75px; width: 130px; height: 135px; }

.size-L { width: 180px; height: 260px; }
.size-L::before { bottom: 0;    width:  18px; height:  95px; }
.size-L::after  { bottom: 95px; width: 180px; height: 165px; }

/* Tronc plus court pour tree-B uniquement */
.tree-B.size-S::before { height: 30px; }
.tree-B.size-S::after  { bottom: 30px; height: 130px; }
.tree-B.size-M::before { height: 44px; }
.tree-B.size-M::after  { bottom: 44px; height: 166px; }
.tree-B.size-L::before { height: 55px; }
.tree-B.size-L::after  { bottom: 55px; height: 205px; }

/* Tronc plus court pour tree-C uniquement */
.tree-C.size-S::before { height: 40px; }
.tree-C.size-S::after  { bottom: 40px; height: 140px; }
.tree-C.size-M::before { height: 54px; }
.tree-C.size-M::after  { bottom: 54px; height: 175px; }
.tree-C.size-L::before { height: 65px; }
.tree-C.size-L::after  { bottom: 65px; height: 215px; }

/* Feuillu organique — légèrement bombé d'un côté */
.tree-A::after {
  border-radius: 42% 58% 38% 62% / 55% 48% 72% 45%;
}

/* Arbre compact — rectangle arrondi, style "lollipop" élégant */
.tree-B::after {
  clip-path: none;
  border-radius: 40% 40% 35% 35% / 45% 45% 38% 38%;
}

/* Conifère étagé — 3 paliers de branches */
.tree-C::after {
  clip-path: polygon(
    50%  0%,
    22% 36%,  34% 36%,
    12% 62%,  30% 62%,
     4% 100%, 96% 100%,
    70% 62%,  88% 62%,
    66% 36%,  78% 36%
  );
  border-radius: 0;
}

/* Couleurs intentionnellement mélangées —pâles et foncés présents à toutes les hauteurs */
.x1::after  { background: var(--p-1); }
.x2::after  { background: var(--p-4); }
.x3::after  { background: var(--p-2); }
.x4::after  { background: var(--p-1); }
.x5::after  { background: var(--p-3); }
.x6::after  { background: var(--p-4); }
.x7::after  { background: var(--p-2); }
.x8::after  { background: var(--p-1); }
.x9::after  { background: var(--p-3); }
.x10::after { background: var(--p-4); }
.x11::after { background: var(--p-1); }
.x12::after { background: var(--p-2); }

/* POSITIONS & DÉLAIS*/
/*  arbre          top   left   durée   délai                  opacité  */
.x1  { top:  6%;  left: 15%;  animation-duration: 34s; animation-delay:  -3s; opacity: 0.42; } /*  9% */
.x2  { top: 65%;  left:  8%;  animation-duration: 40s; animation-delay: -30s; opacity: 0.92; } /* 75% */
.x3  { top: 38%;  left: 22%;  animation-duration: 32s; animation-delay:  -6s; opacity: 0.62; } /* 19% */
.x4  { top: 10%;  left: 55%;  animation-duration: 32s; animation-delay: -16s; opacity: 0.38; } /* 50% */
.x5  { top: 72%;  left: 72%;  animation-duration: 36s; animation-delay: -27s; opacity: 0.90; } /* 75% */
.x6  { top: 22%;  left: 40%;  animation-duration: 34s; animation-delay: -22s; opacity: 0.52; } /* 65% */
.x7  { top: 55%;  left: 85%;  animation-duration: 44s; animation-delay: -11s; opacity: 0.78; } /* 25% */
.x8  { top:  8%;  left: 78%;  animation-duration: 38s; animation-delay: -29s; opacity: 0.35; } /* 76% */
.x9  { top: 48%;  left: 33%;  animation-duration: 36s; animation-delay: -13s; opacity: 0.68; } /* 36% */
.x10 { top: 18%;  left: 62%;  animation-duration: 30s; animation-delay:  -9s; opacity: 0.44; } /* 30% */
.x11 { top: 60%;  left: 48%;  animation-duration: 40s; animation-delay: -34s; opacity: 0.85; } /* 85% */
.x12 { top: 32%;  left: 90%;  animation-duration: 30s; animation-delay: -24s; opacity: 0.55; } /* 80% */

/*   ÉCUREUIL   */
.squirrel {
  position: absolute;
      bottom: 15%;
  left: 130%;
  font-size: 46px;
  color: #11798a;
  z-index: 4;
  filter: drop-shadow(0 3px 7px rgba(17,121,138,0.28));
  animation:
    squirrelRun 28s linear infinite,
    squirrelBob  0.4s ease-in-out infinite;
}

@keyframes squirrelBob {
  0%, 100% { transform: scaleX(-1) translateY(0px);  }
  50%       { transform: scaleX(-1) translateY(-5px); }
}

@keyframes squirrelRun {
  0%    { left: 130%; opacity: 0; }
  7%    { left: 110%; opacity: 1; }
  92%   { left: -10%; opacity: 1; }
  98%   { left: -10%; opacity: 0; }
  100%  { left: 130%; opacity: 0; }
}

/* ──────────────────────────
   CONTENU 404
────────────────────────── */
.content-404 {
  position: relative;
  z-index: 10;
  text-align: center;
}

.code-404 {
   font-size: 200px;
  font-weight: 700;
    letter-spacing: 15px;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.6),
    0 8px 24px rgba(26,54,99,0.14);
  margin-bottom: 4px;
}

.line-404 {
  width: 420px;
  border: none;
  border-top: 5px solid var(--p-1);
  margin: 0 auto 20px;
  position: relative;
}

.line-404::after {
  content: "•";
  position: relative;
  top: -0.75em;
    font-size: 2em;
  transform: translate(-50%, -55%);
  line-height: 1;
  color: var(--p-1);
  background: linear-gradient(180deg, #ffffff 0%, #f0f5f9 100%);
  padding: 0 0.25em;
}

.title-404 {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 10px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--p-1);
}

.subtitle-404 {
  font-size: 18px;
     font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--p-2);
  margin-top: 6px;
  margin-bottom: 30px;
}

/* ==================== 
    AUTRE CORRECTIF 
===================== */
form.form-horizontal input:not(.btn), form.form-horizontal select, form.form-horizontal textarea {
    border: 1px solid #c7cfdc !important;
}
sup {
  font-size: 0.7em;
  vertical-align: inherit;
  line-height: 0;
}
.btn-inactif {
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.55 !important;
    box-shadow: none !important;
    transform: none !important;}
/* ============================================================
BOUTON RETOUR EN HAUT
============================================================ */
#btn-top {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  width: 46px;
  height: 46px;
  background: #1A3663;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(25, 37, 69, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease;
  z-index: 999;
}
#btn-top.visible {
  opacity: 1;
  visibility: visible;
}
#btn-top:hover, #btn-top:focus {
  background: #0ca3a3;
  color: #1A3663;
  outline: 2px solid #1A3663;
}
#btn-top svg {
  width: 22px;
  height: 22px;
}