/* ==========================================================================
   VOS RETOUCHES PERSONNELLES (chargé en dernier : il l'emporte sur le reste)
   ========================================================================== */

/* ---- Logo de l'en-tête (agrandi) ----------------------------------------
   Pour le changer : modifiez les tailles ci-dessous.                       */
header .logo-img{width:64px;height:64px;border-radius:16px;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s,width .3s,height .3s}
header .brand-name{font-size:1.5rem;line-height:1;transition:font-size .3s}
header .brand-tag{font-size:11px;margin-top:7px;letter-spacing:.14em}
/* Quand on fait défiler la page, l'en-tête se resserre */
header.sc .logo-img{width:48px;height:48px;border-radius:12px}
header.sc .brand-name{font-size:1.125rem}
header.sc .brand-tag{font-size:9px;margin-top:5px}
/* Téléphone : un peu plus compact pour laisser la place au bouton */
@media(max-width:639px){
  header .logo-img{width:48px;height:48px;border-radius:12px}
  header .brand-name{font-size:1.125rem}
  header .brand-tag{font-size:8px;letter-spacing:.1em;margin-top:5px}
}

/* ---- Titre principal sur 3 lignes (ancien design) -----------------------
   Ligne 1 et 3 : italique avec reflets qui changent de couleur (animation).
   Pour des couleurs FIXES, ajoutez : .hero-title .t-serif{animation:none}   */
.hero-title{font-weight:300;letter-spacing:-.025em;line-height:1.1}
.hero-title span{display:block}
.hero-title .t-serif{font-family:Newsreader,serif;font-style:italic;font-weight:300;
  padding:0 .14em .16em 0;margin-bottom:-.12em;                       /* évite que l'italique soit rogné */
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .t-lav{font-size:clamp(2.25rem,9.5vw,3.75rem);
  background-image:linear-gradient(90deg,#e1bdff 0%,#f7f9fa 28%,#e1bdff 52%,#8ab4ff 78%,#e1bdff 100%);
  animation:sh 8s linear infinite}
.hero-title .t-cya{font-size:clamp(1.75rem,7vw,2.8rem);
  background-image:linear-gradient(90deg,#00d2ff 0%,#f7f9fa 30%,#00d2ff 54%,#2575fc 80%,#00d2ff 100%);
  animation:sh 6s linear infinite}
.hero-title .t-bold{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;text-transform:uppercase;
  color:#f7f9fa;font-size:clamp(2.1rem,9vw,3.6rem);margin:.04em 0 .1em}

/* Téléphone : le bouton du haut est déjà repris par la barre fixe du bas */
@media(max-width:639px){
  header > div > a[data-cta]{display:none}
}

/* Le bouton ne passe jamais sur 2 lignes ; sur tablette le menu est masqué
   (il ne tenait pas à côté du logo agrandi), le bouton reste visible */
header > div > a[data-cta]{white-space:nowrap}
@media(min-width:768px) and (max-width:1023px){
  header nav{display:none!important}
}

/* ---- Coordonnées en bas de page (téléphone + e-mail) --------------------
   Bloc centré, deux boutons faciles à toucher. Pour changer le numéro ou
   l'e-mail : modifiez-les directement dans index.html (bloc "contact-pied"). */
.contact-pied{max-width:1200px;margin:0 auto 2rem;padding:0 0 2rem;
  border-bottom:1px solid rgba(255,255,255,.08);text-align:center}
.contact-pied .cp-titre{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;
  font-size:1.05rem;color:#f7f9fa;margin:0}
.contact-pied .cp-sous{font-size:12px;color:#8a97a8;margin:.35rem 0 1.1rem}
.contact-pied .cp-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.contact-pied .cp-lien{display:inline-flex;align-items:center;gap:.6rem;
  padding:.8rem 1.25rem;border-radius:12px;border:1px solid rgba(0,210,255,.35);
  background:rgba(0,210,255,.06);color:#f7f9fa;font-size:14px;font-weight:600;
  text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.contact-pied .cp-lien i{color:#00d2ff;font-size:14px}
.contact-pied .cp-lien:hover{background:rgba(0,210,255,.14);border-color:#00d2ff;transform:translateY(-1px)}
@media(max-width:639px){
  .contact-pied .cp-lien{width:100%;justify-content:center}
}

/* Téléphone : laisse la place sous le pied de page pour la barre fixe du bas */
@media(max-width:639px){
  footer{padding-bottom:5.5rem}
}