/* ==========================================================================
   DTM SÉCURITÉ - animations
   Toutes les animations sont désactivées si le visiteur a demandé
   « réduire les animations » dans son système (voir en bas du fichier).
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-doux: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Diaporama : image -> triangle -> bande -> ligne 1 -> ligne 2
   (classes posées par site.js : .joue = entrée, .sortie = départ)
   -------------------------------------------------------------------------- */
.js .slide-fond { opacity: 0; }
.js .slide.joue .slide-fond { opacity: 1; transition: opacity 1s var(--ease-doux); }
.js .slide.precedente .slide-fond { opacity: 1; }

.js .slide-triangle { opacity: 0; transform: translateY(6%) scale(.94); transform-origin: 50% 100%; }
.js .slide.joue .slide-triangle { opacity: 1; transform: none; transition: opacity .9s var(--ease-out) .55s, transform 1.1s var(--ease-out) .55s; }

.js .slide-bande.avec-fond::before { transform: scaleX(0); opacity: 0; }
.js .slide.joue .slide-bande.avec-fond::before { transform: scaleX(1); opacity: 1; transition: transform .8s var(--ease-out) 1.1s, opacity .4s linear 1.1s; }

.js .slide-titre .l1, .js .slide-titre .l2 { opacity: 0; transform: translateY(18px); letter-spacing: .2em; }
.js .slide.joue .slide-titre .l1 { opacity: 1; transform: none; letter-spacing: .12em; transition: opacity .7s var(--ease-out) 1.65s, transform .8s var(--ease-out) 1.65s, letter-spacing 1.2s var(--ease-out) 1.65s; }
.js .slide.joue .slide-titre .l2 { opacity: 1; transform: none; letter-spacing: .12em; transition: opacity .7s var(--ease-out) 1.95s, transform .8s var(--ease-out) 1.95s, letter-spacing 1.2s var(--ease-out) 1.95s; }

/* départ : le texte, la bande et le triangle s'effacent avant l'image suivante */
.js .slide.sortie .slide-titre .l1,
.js .slide.sortie .slide-titre .l2 { opacity: 0; transform: translateY(-10px); transition: opacity .35s ease, transform .4s ease; }
.js .slide.sortie .slide-bande.avec-fond::before { opacity: 0; transition: opacity .45s ease .05s; }
.js .slide.sortie .slide-triangle { opacity: 0; transition: opacity .45s ease .1s; }

/* l'image reste fixe : ni zoom, ni parallaxe, ni effet au survol */

/* --------------------------------------------------------------------------
   2. Bannières des pages intérieures
   -------------------------------------------------------------------------- */
.banniere-fond { transform: translate3d(0, var(--defil, 0px), 0); }
.js .banniere-fond { animation: banniere-zoom 1.6s var(--ease-out) both; }
.js .banniere h1 { animation: monte 1s var(--ease-out) .25s both; }
@keyframes banniere-zoom { from { opacity: .35; scale: 1.08; } to { opacity: 1; scale: 1; } }
@keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   3. Apparition au défilement (classe .reveal posée par animations.js)
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--delai, 0s); }
.js .reveal.reveal-gauche { transform: translateX(-26px); }
.js .reveal.reveal-droite { transform: translateX(26px); }
.js .reveal.reveal-zoom { transform: scale(.96); }
.js .reveal.visible { opacity: 1; transform: none; }

/* le trait rouge sous les titres se dessine depuis le centre */
.reveal.titre-section::after, .reveal .titre-section::after { transform: scaleX(0); transition: transform .9s var(--ease-out) calc(var(--delai, 0s) + .35s); }
.reveal.visible.titre-section::after, .reveal.visible .titre-section::after { transform: scaleX(1); }

/* bandeau rouge : l'espacement des lettres se resserre */
.bandeau-rouge h2.reveal { transform: none; letter-spacing: .5em; transition: opacity 1s ease, letter-spacing 1.4s var(--ease-out); }
.bandeau-rouge h2.reveal.visible { letter-spacing: .3em; }

/* liste à coches : les coches se cochent l'une après l'autre */
.liste-coches li.reveal::before { background-size: 0; transition: background-size .35s var(--ease-out) calc(var(--delai, 0s) + .45s); }
.liste-coches li.reveal.visible::before { background-size: 11px; }

/* --------------------------------------------------------------------------
   4. Micro-interactions au survol
   -------------------------------------------------------------------------- */
/* menu : soulignement qui s'étire depuis le centre */
.menu a { position: relative; border-bottom: 0; transition: color .25s; }
.menu a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--rouge); transform: scaleX(0); transition: transform .3s var(--ease-out); }
.menu a:hover::after, .menu a.actif::after { transform: scaleX(1); }
@media (max-width: 860px) { .menu a::after { display: none; } .menu a { border-bottom: 1px solid #eee; } }

.logo img { transition: transform .4s var(--ease-out); }
.logo:hover img { transform: scale(1.02); }

/* les 4 points de l'accueil : le carré rouge "se décolle" de son ombre bleue */
.numero::before, .numero span { transition: transform .45s var(--ease-out); }
.point:hover .numero span { transform: translate(-4px, -4px); }
.point:hover .numero::before { transform: translate(3px, 3px); }
.point h3 { transition: color .3s; }
.point:hover h3 { color: var(--rouge); }

/* cartes prestations : légère élévation, photo qui s'approche, liseré rouge */
.carte { position: relative; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; transform-style: preserve-3d; }
.carte::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--rouge); transform: scaleX(0); transition: transform .45s var(--ease-out); }
.carte:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(8, 43, 67, .14); border-color: #cfd5da; }
.carte:hover::before { transform: scaleX(1); }
.carte img { transition: transform .8s var(--ease-out); }
.carte:hover img { transform: scale(1.06); }
.carte.inclinee { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); transition: transform .12s linear, box-shadow .45s var(--ease-out); }
/* reflet qui suit le curseur */
.carte::after, .photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 60%); }
.carte:hover::after, .photo:hover::after { opacity: 1; }

/* galerie : effet "photo posée" */
.photo { position: relative; overflow: hidden; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.photo:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 14px 28px rgba(0, 0, 0, .28); }
.photo:nth-child(even):hover { transform: translateY(-5px) rotate(.6deg); }
.photo img { transition: filter .45s; }
.photo:hover img { filter: saturate(1.08) contrast(1.03); }

/* partenaires */
.logo-partenaire img { transition: transform .4s var(--ease-out), filter .4s; }
.logo-partenaire:hover img { transform: scale(1.06); }

/* bouton d'envoi : reflet qui traverse + enveloppe qui s'envole légèrement */
.bouton-rouge { position: relative; overflow: hidden; transition: background .25s, transform .15s; }
.bouton-rouge::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg) translateX(0); }
.bouton-rouge:hover::after { transform: skewX(-20deg) translateX(520%); transition: transform .8s var(--ease-doux); }
.bouton-rouge .ico { transition: transform .35s var(--ease-out); }
.bouton-rouge:hover .ico { transform: translate(3px, -2px) rotate(-10deg); }
.bouton-rouge:active { transform: translateY(1px); }

/* champs du formulaire */
.formulaire input, .formulaire textarea { transition: border-color .25s, box-shadow .25s; }
.formulaire input:hover, .formulaire textarea:hover { border-color: #9aa6b2; }

/* téléphones du pied de page : petite sonnerie */
.tel-grand .ico { transform-origin: 50% 60%; }
.tel-grand:hover .ico { animation: sonne .6s ease-in-out; }
@keyframes sonne { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }

.site-footer a, .footer-menu a, .region a, .contact-agences a { transition: color .25s; }
.footer-menu a:hover { color: #fff; }
.region a:hover, .contact-agences a:hover { color: var(--rouge); }
.regions .region a:hover { color: #ffb3b5; }

.haut { transition: opacity .3s, transform .3s var(--ease-out), background .25s; }
.haut:hover { background: var(--rouge); transform: translateY(-3px); }

/* parallaxe douce (variables posées par animations.js) */
.cest-photo { transform: translate3d(0, var(--defil, 0px), 0); will-change: transform; }
.confiance { background-position: center calc(50% + var(--defil, 0px)); }

/* --------------------------------------------------------------------------
   5. Accessibilité : animations désactivées sur demande du système
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .js .slide-triangle, .js .slide-titre .l1, .js .slide-titre .l2 { transform: none !important; }
  .banniere-fond, .cest-photo { transform: none !important; }
  .carte.inclinee { transform: none !important; }
}