@font-face{
  font-family: 'Freshhand';
  src: url('fonts/Freshhand.woff2') format('woff2'), /* si tu l’as */
       url('fonts/Freshhand.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* Minimal, modern CSS with CSS variables */
:root{
  --brand: #3b82f6;
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --card:#DBEAFE;
  --line: #e5e7eb;
}
@media (prefers-color-scheme: dark){
 :root{
    --bg:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;
    --card:#DBEAFE;
    --line:#e5e7eb; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;
background-color:#ffffff !important;
  color:#1f2937 !important; /* noir/gris foncé lisible */}
body{font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; background:var(--bg); color:var(--text); line-height:1.6;}
img{display:block}


a{color:inherit; text-decoration:none}

/* Centre le contenu du hero au milieu de l'écran */
#accueil.section--full{
  display: grid;
  place-items: center;   /* = align-items:center + justify-items:center */
}

/* S'assure que le texte passe bien au-dessus du fond/overlay */
#accueil .container.center{
  position: relative;
  z-index: 1;
  margin-inline: auto;   /* sécurité pour l'alignement horizontal */
}




.container{max-width:1100px; margin:0 auto; padding:0 1.25rem}
.wrap{max-width:1200px; margin:0 auto; padding:0 .75rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip:focus{left:1rem; top:1rem; width:auto; height:auto; background:var(--brand); color:#fff; padding:.5rem .75rem; border-radius:.5rem;}
/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px); background: color-mix(in oklab, var(--bg) 80%, transparent); border-bottom:1px solid var(--line)}
.site-header .brand{display:inline-flex; align-items:center}
.site-header nav a{padding:.5rem .25rem; margin-left:.75rem}
.site-header nav a:hover{color:var(--brand)}
/* Sections */
.section{padding:4rem 0}
.section--mid{padding:3.5rem 0}
.section--tall{padding:7rem 0}
.section--muted{background: color-mix(in oklab, var(--line) 35%, var(--bg))}
.section__head{ text-align:center; margin-bottom:2rem}



.kicker{ text-transform:uppercase; letter-spacing:.12em; font-weight:700; color: color-mix(in oklab, var(--brand) 65%, var(--text)); font-size:.75rem}
.sub{ color:var(--muted); margin-top:.25rem}
.display{ font-size: clamp(2rem, 6vw, 4rem); line-height:1.1; margin:0 }
.lead{ font-size:1.25rem; color:#fff ; font-weight:500}
.center{ text-align:center }
/* Buttons */
.btn{display:inline-block; padding:.75rem 1rem; border-radius:1rem; border:1px solid var(--line); background:var(--card); color:var(--text); font-weight:600}
.btn--primary{ background:var(--brand); color:#fff; border-color: transparent}
.btn--ghost{ background: color-mix(in oklab, var(--brand) 12%, transparent); color:#fff; border-color: color-mix(in oklab, #fff 35%, transparent) }
.btn--link{ color:var(--brand); padding:.25rem 0; border:none; background:transparent}
.btn:hover{filter:brightness(1.05)}
/* Cards & grids */
.grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(220px,1fr) ); gap:1rem }

.card{ background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:1rem; box-shadow: 0 1px 0 rgba(0,0,0,.02) ; border-bottom:solid 3px #FF8000}
.card_actu{ border:1px solid var(--line); border-radius:1rem; padding:1rem; box-shadow: 0 1px 0 rgba(0,0,0,.02) ; }

.cards-3{ display:grid; grid-template-columns: repeat( auto-fit, minmax(260px,1fr) ); gap:1rem }
.news{ background:var(--card); border:1px solid var(--line); border-radius:1rem; overflow:hidden}
.news .media{ aspect-ratio:16/9; background: #111 center/cover no-repeat; background-image: var(--img); }
.news .pad{ padding:1rem }
/* Parallax */
.has-parallax{ position:relative; overflow:hidden; isolation:isolate }
.parallax__bg{ position:absolute; inset:-20%; z-index:-1; background: #FFF center / cover no-repeat; background-image: var(--bg); transform: translate3d(0,0,0) scale(1.05); will-change: transform }
.overlay{ position:absolute; inset:0; z-index:-1;  }



/* Désactive les dégradés superposés aux images de fond */
.overlay--dark,
.overlay--green {
  background: none !important;
}


/* Sections plein écran / capées (déjà en place chez toi normalement) */
.section--full{ height: 75svh; padding: 0; overflow: hidden; }
.section--cap{ height: clamp(var(--cap-min,320px), var(--cap-ideal,60vh), var(--cap-max,520px)); padding:0; overflow:hidden; }

/* Parallax — fond absolument positionné avec petite sur-taille */
.has-parallax{ position:relative; overflow:hidden; isolation:isolate }

.has-parallax .parallax__bg{
  position: absolute;
  inset: -10%;                 /* marge pour bouger sans voir les bords */
  z-index: -1;
  background-position: center;
  background-size:100%;
  background-image: var(--bg); /* tu fournis l'URL via --bg= url(...) */
  will-change: transform;
  transform: translate3d(0,0,0) scale(1.06);
}



/* Cap the height of a section (for the CALLOUT PARALLAX) */
.section--cap{
  max-height: 520px;
  overflow: hidden;           /* hide overflow if content exceeds cap */
  display: flex;              /* vertically center content */
  align-items: center;
  padding: 0;                 /* remove default vertical padding to respect the cap */
}
.section--cap .container{ padding: 2rem 1.25rem; }
/* Footer */
.site-footer{ border-top:1px solid var(--line); background:#DDD; padding:2.5rem 0; position:relative }
.site-footer .cols{ display:grid; grid-template-columns: repeat( auto-fit, minmax(220px,1fr) ); gap:1rem }
.legal{ text-align:center; color:var(--muted); margin-top:1rem }
/* Misc */
.muted{ color:var(--muted) }
.actions{ display:flex; justify-content:center; gap:.75rem; margin-top:1rem }
.newsletter{ display:grid; grid-template-columns: 1fr auto; gap:.5rem; max-width:520px }
.newsletter input{ padding:.75rem .9rem; border-radius:.9rem; border:1px solid var(--line); background:var(--card); color:var(--text) }
.to-top{ position:fixed; right:1rem; bottom:1rem; padding:.5rem .7rem; background:var(--text); color:var(--bg); border-radius:.8rem; box-shadow:0 6px 16px rgba(0,0,0,.15) }


@media (max-width: 480px){
  .has-parallax .parallax__bg{ inset:-12%; }
  /* option: amplitude mobile plus douce via HTML alternatif
     <div class="parallax__bg" data-shift="120"> ... */
}


/* Pastels un peu plus contrastés pour "Accès rapides" */
#demarches .grid .card{
  border: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  color: #0b1220;
}

/* Accès rapides — palette ++ (plus saturée/contrastée) */
#demarches .grid .card{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
  color: #0b1220;
  transition: transform .18s ease, filter .18s ease;
}

#demarches .grid .card:nth-child(8n+1){ background:#93C5FD; } /* bleu 300 */
#demarches .grid .card:nth-child(8n+2){ background:#86EFAC; } /* vert 300 */
#demarches .grid .card:nth-child(8n+3){ background:#FCD34D; } /* ambre 300 */
#demarches .grid .card:nth-child(8n+4){ background:#FDA4AF; } /* rose 300 */
#demarches .grid .card:nth-child(8n+5){ background:#C4B5FD; } /* violet 300 */
#demarches .grid .card:nth-child(8n+6){ background:#67E8F9; } /* cyan 300 */
#demarches .grid .card:nth-child(8n+7){ background:#FDBA74; } /* orange 300 */
#demarches .grid .card:nth-child(8n+8){ background:#CBD5E1; } /* ardoise 300 */

#demarches .grid .card:hover{
  transform: translateY(-2px);
  filter: saturate(1.05) brightness(0.98);
}

/* Mode sombre : conserve la teinte mais évite l’éblouissement */
@media (prefers-color-scheme: dark){
  #demarches .grid .card{ color: var(--text); }
  #demarches .grid .card:nth-child(8n+1){ background: color-mix(in oklab, var(--card) 60%, #93C5FD 40%); }
  #demarches .grid .card:nth-child(8n+2){ background: color-mix(in oklab, var(--card) 60%, #86EFAC 40%); }
  #demarches .grid .card:nth-child(8n+3){ background: color-mix(in oklab, var(--card) 60%, #FCD34D 40%); }
  #demarches .grid .card:nth-child(8n+4){ background: color-mix(in oklab, var(--card) 60%, #FDA4AF 40%); }
  #demarches .grid .card:nth-child(8n+5){ background: color-mix(in oklab, var(--card) 60%, #C4B5FD 40%); }
  #demarches .grid .card:nth-child(8n+6){ background: color-mix(in oklab, var(--card) 60%, #67E8F9 40%); }
  #demarches .grid .card:nth-child(8n+7){ background: color-mix(in oklab, var(--card) 60%, #FDBA74 40%); }
  #demarches .grid .card:nth-child(8n+8){ background: color-mix(in oklab, var(--card) 60%, #CBD5E1 40%); }
}


/* Section : centre verticalement et pousse le contenu à droite */
.align-right{
  display: flex;
  align-items: center;        /* centrage vertical */
  justify-content: flex-end;  /* tout à droite */
  /* optionnel : hauteur de bandeau */
  /* min-height: clamp(280px, 55vh, 520px); */
}

/* Le bloc de texte collé à droite */
.align-right .container{
  margin: 0 1.25rem 0 auto;  /* “auto” à gauche => pousse à droite */
  text-align: left;
  position: relative;         /* au-dessus du fond parallax */
  z-index: 1;
  max-width: 560px;           /* optionnel : largeur confortable */
  background:rgba(250,250,250,0.8);
  padding:30px ; 
  border-radius:10px; 
}

/* Aligne le formulaire à droite aussi */
.align-right .newsletter{
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: end;
  gap: .5rem;
}

/* Responsive : recentre sur petits écrans (optionnel) */
@media (max-width: 640px){
  .align-right{ justify-content: center; }
  .align-right .container{ text-align: center; margin: 0 1rem; max-width: 100%; }
  .align-right .newsletter{ justify-content: center; grid-template-columns: 1fr; }
}


#agenda .grid .card:nth-child(8n+1){ border-bottom:solid 5px #93C5FD; } /* bleu 300 */
#agenda .grid .card:nth-child(8n+2){ border-bottom:solid 5px #86EFAC; } /* vert 300 */
#agenda .grid .card:nth-child(8n+3){ border-bottom:solid 5px #FCD34D; } /* ambre 300 */
#agenda .grid .card:nth-child(8n+4){ border-bottom:solid 5px #FDA4AF; } /* rose 300 */
#agenda .grid .card:nth-child(8n+5){ border-bottom:solid 5px #C4B5FD; } /* violet 300 */
#agenda .grid .card:nth-child(8n+6){ border-bottom:solid 5px #67E8F9; } /* cyan 300 */
#agenda .grid .card:nth-child(8n+7){ border-bottom:solid 5px #FDBA74; } /* orange 300 */
#agenda .grid .card:nth-child(8n+8){ border-bottom:solid 5px #CBD5E1; } /* ardoise 300 */

#services .grid .card:nth-child(8n+1){ border-bottom:solid 5px #93C5FD; } /* bleu 300 */
#services .grid .card:nth-child(8n+2){ border-bottom:solid 5px #86EFAC; } /* vert 300 */
#services .grid .card:nth-child(8n+3){ border-bottom:solid 5px #FCD34D; } /* ambre 300 */
#services .grid .card:nth-child(8n+4){ border-bottom:solid 5px #FDA4AF; } /* rose 300 */
#services .grid .card:nth-child(8n+5){ border-bottom:solid 5px #C4B5FD; } /* violet 300 */
#services .grid .card:nth-child(8n+6){ border-bottom:solid 5px #67E8F9; } /* cyan 300 */
#services .grid .card:nth-child(8n+7){ border-bottom:solid 5px #FDBA74; } /* orange 300 */
#services .grid .card:nth-child(8n+8){ border-bottom:solid 5px #CBD5E1; } /* ardoise 300 */


/* --- Parallax "fixed" (desktop) --- */
.parallax--fixed{
  background-image: var(--bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;           /* couvre sans déformer */
  background-attachment: fixed;     /* effet "fixed" natif */
}

/* On ne garde pas le calque interne quand on est en mode fixed */
.parallax--fixed .parallax__bg{ display:none !important; }

/* Fallback : sur mobile / motion-reduce, on revient à scroll normal */
@media (prefers-reduced-motion: reduce), (hover:none) and (pointer:coarse){
  .parallax--fixed{ background-attachment: scroll; }
}

/* Harmonisation : ton calque parallax interne en "cover" */
.has-parallax .parallax__bg{
  background-size: cover; /* remplace 100% par cover */
}



/* === NAVBAR BOOTSTRAP 5 (thème Longwy) === */
.navbar-longwy{
  background:#FAFAFA !important;
  width:100%;
  border-bottom:solid 1px #EFBF04 ; 
}
.navbar-longwy .container-fluid{
  padding-left:0 !important;
  padding-right:0 !important;
}
.navbar-longwy a{ margin-left:0 !important; } /* neutralise ancienne règle nav a */

.navbar-logo{ max-height:46px; width:auto; }
.navbar-home{ color: rgba(0,0,200,.95); font-size: 1rem; line-height: 1; }

.navbar-longwy .nav-link{
  color: rgba(0,0,200,.95) !important;
  padding: .75rem 1rem;
  white-space: nowrap;
}
.navbar-longwy .nav-link:hover,
.navbar-longwy .nav-link:focus{
  color:#333 !important;
  opacity:.9;
  
}
.navbar-longwy .dropdown-menu{
  margin-top:0;
  min-width:16rem;
  padding:.35rem 0;
  border-radius:.25rem;
  z-index: 2200;
  background:#fafafa;
 
}

.dropdown-menu { border-left:solid 5px #EFBF04 }
 
.dropdown-item:hover {
	  background:#0000ff;
	  color:#FFFFFF  !important; 
}


@font-face {
font-family: 'CaviarDreams';
src: url('fonts/CaviarDreams.ttf'); 

font-weight: normal;
font-style: normal;
}

.titre_page { 
background: #CCFFCC;
  color: #000000;
  font-family: 'CaviarDreams';
  padding: 10px;
  font-size: 2em;
  text-shadow: 0.1em 0.1em 0.1em #666666;
  border-left: solid 7px #0000ff;
}

/**/
:root{
  --gold: #0000ff; /* jaune or */
}

/* Liens de rubriques (niveau 1), y compris ceux qui ouvrent un dropdown */
.navbar-nav > .nav-item > .nav-link{
  position: relative;
  padding-bottom: .45rem; /* espace pour le trait */
}

/* Trait animé : on utilise ::before pour ne pas casser la flèche Bootstrap (::after) */
.navbar-nav > .nav-item > .nav-link::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: .15rem;
  width: 100%;
  height: 3px;
  background: var(--gold);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

/* Animation au survol / focus */
.navbar-nav > .nav-item > .nav-link:hover::before,
.navbar-nav > .nav-item > .nav-link:focus::before,
.navbar-nav > .nav-item > .nav-link:focus-visible::before{
  transform: scaleX(1);
}

/* Optionnel : rubrique active soulignée */
.navbar-nav > .nav-item > .nav-link.active::before{
  transform: scaleX(1);
}

/* Ne pas appliquer aux sous-rubriques (dropdown-item) */
.dropdown-menu .dropdown-item::before{
  content: none !important;
}

/**/
/* Supprime le "cadre" (focus ring) sur les rubriques du menu */
.navbar-longwy .navbar-nav > .nav-item > .nav-link,
.navbar-longwy .navbar-nav > .nav-item > .nav-link:hover,
.navbar-longwy .navbar-nav > .nav-item > .nav-link:focus,
.navbar-longwy .navbar-nav > .nav-item > .nav-link:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
}