/* =====================================================================
   HELP 38 - habillage « tech »
   ---------------------------------------------------------------------
   Ce fichier vient APRES style.css et ne fait qu'ajouter : icones au
   trait, apparition au defilement, reliefs de cartes, fond du bandeau.
   Le retirer de header.php suffit a revenir a l'aspect precedent, sans
   rien casser.

   Regle tenue partout : aucune animation ne dure plus de 0,5 s, rien ne
   bouge en boucle a l'ecran sauf le point de disponibilite, et tout est
   neutralise si le systeme demande « moins d'animations ».
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ICONES
   Un carre a coins arrondis, fond ambre tres pale, trait ardoise. Au
   survol de la carte, le carre s'incline legerement et le trait passe
   en ambre.
   --------------------------------------------------------------------- */
.icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px;
  background:rgba(201,120,15,.10);
  color:var(--ardoise);
  margin-bottom:16px;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), background .35s ease, color .35s ease;
}
.icone svg{ width:24px; height:24px; }
.icone-grande{ width:56px; height:56px; border-radius:16px; }
.icone-grande svg{ width:29px; height:29px; }

.carte:hover .icone,
.tarif:hover .icone{
  transform:translateY(-2px) rotate(-4deg);
  background:rgba(201,120,15,.18);
  color:var(--ambre);
}

/* Trace du trait a l'apparition : le dessin « s'ecrit ». */
.reveler .icone svg *{
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:tracer .9s ease forwards;
}
@keyframes tracer{ to{ stroke-dashoffset:0; } }

/* Sur fond sombre, l'icone s'inverse. */
.section-sombre .icone,
.cta .icone{ background:rgba(255,255,255,.10); color:#fff; }
.section-sombre .carte:hover .icone,
.cta .carte:hover .icone{ background:rgba(240,163,58,.22); color:var(--ambre-clair); }

/* ---------------------------------------------------------------------
   1 bis. LA MAISON DU MENU
   Dans la barre de navigation, l'icone n'a pas de cadre : elle doit se
   comporter comme un mot du menu, meme hauteur, meme couleur, meme
   soulignement quand la page est active.
   --------------------------------------------------------------------- */
.nav .icone,
.nav-mobile .icone{
  width:auto; height:auto; background:none; border-radius:0;
  margin:0; color:inherit; vertical-align:-4px;
}
.nav .icone svg{ width:21px; height:21px; }
.nav-mobile .icone{ margin-right:9px; }
.nav-mobile .icone svg{ width:19px; height:19px; }

.nav-accueil{ display:inline-flex; align-items:center; }
.nav-accueil:hover .icone{ transform:none; background:none; color:var(--ambre); }
.nav .icone{ transition:color .25s ease; }

/* ---------------------------------------------------------------------
   2. APPARITION AU DEFILEMENT
   Les blocs arrivent en fondu, decales de quelques dizaines de
   millisecondes les uns des autres. Sans JavaScript, tout reste
   visible : l'etat par defaut est « visible » (voir footer.php, qui
   pose la classe .avant-reveler seulement s'il peut l'animer).
   --------------------------------------------------------------------- */
.avant-reveler{ opacity:0; transform:translateY(14px); }
.reveler{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}

/* ---------------------------------------------------------------------
   3. CARTES
   Un filet ambre se deploie sur le bord haut au survol, la carte se
   souleve d'un cheveu. Rien de plus : ce sont des pages de depannage,
   pas une demonstration technique.
   --------------------------------------------------------------------- */
.carte{
  position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.carte::before{
  content:''; position:absolute; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--ambre), rgba(201,120,15,0));
  transition:width .45s cubic-bezier(.2,.8,.3,1);
}
.carte:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(36,52,71,.10);
  border-color:#c9d4e0;
}
.carte:hover::before{ width:100%; }

/* ---------------------------------------------------------------------
   4. BANDEAU DE TITRE
   Une trame de points tres discrete et un halo ambre dans l'angle : de
   quoi donner un aspect technique sans nuire a la lecture du titre.
   --------------------------------------------------------------------- */
.bandeau{ position:relative; overflow:hidden; }
.bandeau::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(120deg, #000 10%, transparent 62%);
  -webkit-mask-image:linear-gradient(120deg, #000 10%, transparent 62%);
}
.bandeau::after{
  content:''; position:absolute; right:-90px; top:-120px;
  width:420px; height:420px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(240,163,58,.20), transparent 68%);
}
.bandeau .wrap{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------
   5. POINT DE DISPONIBILITE
   Le seul element qui bouge en permanence. Il indique les horaires
   d'ouverture, c'est une information, pas une decoration.
   --------------------------------------------------------------------- */
.dispo{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.86rem; color:#b8c5d4; font-weight:500;
  margin-bottom:16px;
}
.dispo .point{
  width:9px; height:9px; border-radius:50%; background:#1f9d55;
  box-shadow:0 0 0 0 rgba(31,157,85,.55);
  animation:battement 2.4s ease-out infinite;
}
/* Sur fond clair, le libelle reprend la couleur du texte courant. */
.dispo-clair{ color:var(--encre-2); }

/* Hors des horaires, le point passe au rouge et cesse de battre :
   un voyant qui clignote en permanence ne dit plus rien. */
.dispo .point.ferme{ background:#c0392b; animation:none; }
.dispo .point.inconnu{ background:#93a4b8; animation:none; }

@keyframes battement{
  0%  { box-shadow:0 0 0 0 rgba(31,157,85,.55); }
  70% { box-shadow:0 0 0 9px rgba(31,157,85,0); }
  100%{ box-shadow:0 0 0 0 rgba(31,157,85,0); }
}

/* ---------------------------------------------------------------------
   6. SURTITRES
   Le trait ambre qui precede le surtitre se deploie quand le bloc
   apparait, au lieu d'etre la d'emblee. Le trait lui-meme vient de
   style.css : on ne fait que l'animer.
   --------------------------------------------------------------------- */
.titre-section.avant-reveler .surtitre::before{ width:0; }
.titre-section .surtitre::before{ transition:width .5s cubic-bezier(.2,.8,.3,1) .1s; }

/* ---------------------------------------------------------------------
   7. CARTES DE TARIF
   Le prix compte de zero jusqu'a sa valeur quand il entre a l'ecran
   (voir footer.php). Le chiffre est en chasse fixe pour que la largeur
   ne saute pas pendant le comptage.
   --------------------------------------------------------------------- */
.tarifs-grille{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }

.tarif{
  position:relative; background:#fff; border:1px solid var(--trait);
  border-radius:16px; padding:30px 28px; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.tarif:hover{ transform:translateY(-4px); box-shadow:0 16px 36px rgba(36,52,71,.12); border-color:#c9d4e0; }
.tarif h3{ font-size:1.18rem; margin:0 0 4px; }
.tarif .tarif-sous{ color:var(--encre-2); font-size:.92rem; margin:0 0 18px; }
.tarif .prix{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:2.5rem;
  color:var(--ardoise); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tarif .prix .unite{ font-size:1rem; font-weight:700; color:var(--encre-2); margin-left:5px; }
.tarif .prix-note{ color:var(--encre-2); font-size:.86rem; margin:8px 0 0; }
.tarif ul{ list-style:none; padding:0; margin:20px 0 24px; }
.tarif li{ position:relative; padding:7px 0 7px 27px; border-bottom:1px solid var(--trait); font-size:.95rem; }
.tarif li:last-child{ border-bottom:none; }
.tarif li::before{
  content:''; position:absolute; left:2px; top:14px;
  width:11px; height:6px; border-left:2px solid var(--ambre); border-bottom:2px solid var(--ambre);
  transform:rotate(-45deg);
}
.tarif .btn{ margin-top:auto; align-self:flex-start; }

/* Mise en avant d'une formule. */
.tarif-phare{ border-color:var(--ardoise); box-shadow:0 10px 26px rgba(36,52,71,.10); }
.tarif-phare .etiquette{
  position:absolute; top:-12px; left:28px;
  background:var(--ardoise); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px;
}

/* ---------------------------------------------------------------------
   8. BOUTONS
   Un leger deplacement de la fleche, rien de plus.
   --------------------------------------------------------------------- */
.btn{ transition:transform .2s ease, box-shadow .25s ease, background .25s ease; }
.btn:hover{ transform:translateY(-1px); }
.lien-fleche .f{ transition:transform .25s ease; display:inline-block; }
.lien-fleche:hover .f{ transform:translateX(4px); }

/* ---------------------------------------------------------------------
   9. RESPECT DU REGLAGE SYSTEME
   Si le systeme demande moins d'animations, tout s'arrete : plus de
   trace, plus de battement, plus de deplacement. Les contenus restent
   evidemment tous visibles.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .avant-reveler{ opacity:1; transform:none; }
  .reveler .icone svg *{ animation:none; stroke-dashoffset:0; }
  .dispo .point{ animation:none; }
  .carte:hover, .tarif:hover, .btn:hover{ transform:none; }
  .icone, .carte, .tarif, .btn, .lien-fleche .f{ transition:none; }
}

/* ---------------------------------------------------------------------
   10. BOUTONS PAR SYSTEME (page telechargements)
   Trois petits boutons cote a cote, qui passent a la ligne sur mobile.
   --------------------------------------------------------------------- */
.liens-os{ display:flex; flex-wrap:wrap; gap:9px; margin-top:auto; }
.liens-os .btn{ padding:9px 15px; font-size:.9rem; display:inline-flex; align-items:center; gap:7px; }
.liens-os .icone{
  width:auto; height:auto; background:none; border-radius:0; margin:0; color:inherit;
}
.liens-os .icone svg{ width:16px; height:16px; }
.tarif:hover .liens-os .icone{ transform:none; background:none; color:inherit; }

/* ---------------------------------------------------------------------
   11. PARTENAIRES
   Une grille qui s'adapte au nombre d'entrees : un partenaire seul dans
   son groupe occupe une carte de largeur raisonnable plutot que toute
   la page.
   --------------------------------------------------------------------- */
.partenaires{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px; max-width:920px;
}
/* Un partenaire seul dans son groupe : une carte de largeur lisible plutot
   qu une carte etiree sur toute la page. */
.partenaires:has(> :only-child){ max-width:620px;
}
.partenaire{ display:flex; flex-direction:column; }
.partenaire-logo{
  display:flex; align-items:center; min-height:54px; margin-bottom:16px;
}
.partenaire-logo img{ max-width:320px; max-height:52px; width:auto; height:auto; }
.partenaire-nom{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.25rem;
  color:var(--ardoise); letter-spacing:-.01em;
}
.partenaire h3{ margin-bottom:2px; }
.partenaire-sous{ color:var(--encre-2); font-size:.9rem; margin:0 0 14px; }
.partenaire .lien-fleche{ margin-top:auto; padding-top:14px; }

/* ---------------------------------------------------------------------
   12. BANDEAU DE CHIFFRES
   Sur fond ardoise, quatre chiffres qui defilent a l'arrivee a l'ecran.
   --------------------------------------------------------------------- */
.stats-grille{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:26px; text-align:center;
}
.stat .icone{ margin:0 auto 14px; }
.stat-nombre{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:2.6rem;
  color:#fff; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat-libelle{ color:#b8c5d4; font-size:.94rem; margin-top:9px; }
@media (max-width:640px){
  .stats-grille{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .stat-nombre{ font-size:2.1rem; }
}

/* ---------------------------------------------------------------------
   13. STATISTIQUES
   Les compteurs sur fond clair, et l'histogramme des 14 derniers jours.
   --------------------------------------------------------------------- */
.stat-clair .stat-nombre{ color:var(--ardoise); }
.stat-clair .stat-libelle{ color:var(--encre-2); }
.stat-clair .icone{ background:rgba(201,120,15,.10); color:var(--ardoise); }

.histo{
  display:flex; align-items:flex-end; gap:10px;
  height:210px; max-width:820px; margin:0 auto;
}
.histo-col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.histo-valeur{
  text-align:center; font-size:.78rem; color:var(--encre-2);
  font-variant-numeric:tabular-nums; margin-bottom:5px;
}
.histo-barre{
  background:linear-gradient(180deg, var(--ambre), rgba(201,120,15,.55));
  border-radius:5px 5px 0 0; min-height:3px;
  transition:height .5s cubic-bezier(.2,.8,.3,1);
}
.histo-jour{
  text-align:center; font-size:.72rem; color:var(--encre-2);
  margin-top:7px; white-space:nowrap;
}
@media (max-width:640px){
  .histo{ gap:5px; height:170px; }
  .histo-valeur{ display:none; }
  .histo-jour{ font-size:.6rem; transform:rotate(-45deg); }
}

.pied-compteur{ margin-left:10px; opacity:.75; font-size:.85rem; }
.pied-compteur a{ color:inherit; }