/* ============================================================================
   LA FACADE VIDEO -- feuille PARTAGEE (rendu par _commun/includes/videos.php)
   ----------------------------------------------------------------------------
   Les couleurs passent par les tokens du theme (var(--primary), var(--slate-*)),
   jamais par un hexadecimal en dur (CLAUDE.md 1).

   Le principe : on ne charge RIEN de YouTube avant le clic. Ce qu'on voit ici
   est donc une image hebergee chez nous, surmontee d'un bouton de lecture. Le
   <iframe> ne remplace le contenu du bouton qu'apres l'appui -- le CSS doit
   donc styler les deux etats dans le meme cadre.
   ========================================================================= */

/* ------------------------------------------------------------ LE CADRE --- */
/* aspect-ratio plutot qu'un padding-top en pourcentage : l'iframe injectee se
   cale seule, et la grille ne saute pas quand l'image arrive. */
.tvid-cadre{
  position:relative;display:block;width:100%;margin:0;padding:0;border:0;
  aspect-ratio:16/9;border-radius:var(--radius,22px);overflow:hidden;cursor:pointer;
  background:var(--slate-800);
  box-shadow:0 18px 48px -24px rgba(15,23,42,.45);
  transition:transform .4s var(--ease,cubic-bezier(.22,1,.36,1)),box-shadow .4s ease;
}
.tvid-cadre.est-vertical{aspect-ratio:9/16}
.tvid-cadre img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.92;transition:opacity .35s ease,transform .6s var(--ease,cubic-bezier(.22,1,.36,1));
}
.tvid-cadre:hover{transform:translateY(-6px);box-shadow:0 30px 70px -28px rgba(var(--primary-rgb),.5)}
.tvid-cadre:hover img{opacity:1;transform:scale(1.05)}

/* Le focus clavier doit se VOIR : c'est un bouton, on y arrive en tabulant. */
.tvid-cadre:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

/* ------------------------------------------------- LE BOUTON DE LECTURE --- */
.tvid-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.tvid-play i{
  width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary-dark)!important;font-size:1.5rem;padding-left:5px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.55);
  transition:transform .3s var(--ease,cubic-bezier(.22,1,.36,1)),background .3s ease;
}
.tvid-cadre:hover .tvid-play i{transform:scale(1.12);background:#fff}
@media(max-width:620px){.tvid-play i{width:58px;height:58px;font-size:1.2rem}}

/* L'iframe prend toute la place du cadre une fois le clic donne. */
.tvid-cadre iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Video lancee : plus de curseur main ni de soulevement, ce n'est plus un bouton. */
.tvid-cadre.est-lancee{cursor:default;transform:none;box-shadow:0 18px 48px -24px rgba(15,23,42,.45)}

/* ------------------------------------------------------- LES VIGNETTES --- */
.tvid-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:26px;max-width:1180px;margin:0 auto;
}
.tvid-item{display:flex;flex-direction:column;gap:12px}
.tvid-nom{
  font-weight:700;font-size:1.02rem;line-height:1.4;letter-spacing:-.01em;
  color:var(--slate-900);margin:0;
}
.tvid-lieu{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.86rem;color:var(--slate-500);margin:0;
}
.tvid-lieu i{color:var(--primary)!important;font-size:.95rem}

/* ------------------------------------------------ LE BLOC FORMAT COURT --- */
/* La video verticale ne s'etale pas : a 540 px de large elle ecraserait le
   texte qui l'accompagne. Elle reste a cote, et passe dessous sur telephone. */
.tvid-court{
  display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center;
  max-width:900px;margin:0 auto;
}
@media(max-width:760px){
  .tvid-court{grid-template-columns:1fr;gap:24px;max-width:340px}
}

/* --------------------------------------------------- LA NOTE DE RESPECT --- */
/* Elle DIT au visiteur que rien n'est parti chez YouTube tant qu'il n'a pas
   clique. C'est une promesse tenue par le code : autant qu'elle se lise. */
.tvid-note{
  display:flex;align-items:flex-start;gap:10px;justify-content:center;
  max-width:760px;margin:30px auto 0;padding:13px 20px;
  background:#fff;border:1px solid var(--slate-200);border-radius:16px;
  font-size:.85rem;line-height:1.6;color:var(--slate-500);text-align:left;
}
.tvid-note i{color:var(--primary)!important;font-size:1rem;margin-top:2px;flex:0 0 auto}

/* Mouvement reduit : on respecte le reglage systeme (CLAUDE.md 17). */
@media(prefers-reduced-motion:reduce){
  .tvid-cadre,.tvid-cadre img,.tvid-play i{transition:none}
  .tvid-cadre:hover{transform:none}
  .tvid-cadre:hover img{transform:none}
}

/* ============================================================================
   LE BADGE DE DUREE ET LE NOM INCRUSTE (option 'duree' / 'incruste')
   ----------------------------------------------------------------------------
   Employes sur la page d'accueil, ou la carte est SEULE a porter l'information.
   Sur la page temoignages le nom vit dans un <h3> sous la carte : un moteur de
   reponse y lit un titre, pas un texte pose sur une image.
   ========================================================================= */
.tvid-duree{
  position:absolute;top:12px;right:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:rgba(15,23,42,.72);color:#fff;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;line-height:1;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.tvid-duree i{font-size:.9rem;color:#fff!important}

/* Le nom se lit sur une image quelconque : il lui faut un fond. Un degrade
   plutot qu'une pastille -- il assombrit le bas de la photo sans decouper un
   rectangle au milieu du sujet. */
.tvid-nom-incruste{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:44px 20px 18px;text-align:left;
  color:#fff;font-weight:700;font-size:1.02rem;line-height:1.35;letter-spacing:-.01em;
  background:linear-gradient(to top,rgba(15,23,42,.82) 0%,rgba(15,23,42,.55) 45%,transparent 100%);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
@media(max-width:620px){
  .tvid-nom-incruste{font-size:.92rem;padding:36px 15px 14px}
  .tvid-duree{top:9px;right:9px;font-size:.72rem;padding:4px 9px}
}

/* ============================================================================
   LES AVIS COURTS (page d'accueil)
   ----------------------------------------------------------------------------
   Trois cartes sous les videos : l'etoile, la phrase, la personne. Ce sont de
   VRAIS clients, nommes avec leur accord -- pas des exemples d'usage.
   ========================================================================= */
.tvid-avis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;max-width:1180px;margin:26px auto 0;
}
.tvid-avis-carte{
  background:#fff;border:1.5px solid var(--slate-200);border-radius:20px;
  padding:24px 24px 20px;display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--shadow-soft);
  transition:transform .4s var(--ease-spring),box-shadow .4s var(--ease-spring),border-color .3s ease;
}
.tvid-avis-carte:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(var(--primary-rgb),.35)}
.tvid-etoiles{color:var(--amber-500);font-size:1rem;letter-spacing:3px;line-height:1}
.tvid-avis-txt{
  margin:0;font-style:italic;font-size:1rem;line-height:1.7;color:var(--slate-700);flex:1 1 auto;
}
.tvid-avis-qui{display:flex;align-items:center;gap:12px;margin:0}
/* Pas de photo : nous n'en avons pas de ces trois personnes, et poser un
   portrait d'illustration sous un nom reel serait un faux. L'initiale suffit. */
.tvid-avis-ini{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.01em;
}
.tvid-avis-qui strong{display:block;font-size:.96rem;font-weight:700;color:var(--slate-900);line-height:1.3}
.tvid-avis-qui small{display:block;font-size:.85rem;color:var(--primary-dark);margin-top:2px}

/* Les deux videos de l'accueil : cote a cote, puis l'une sous l'autre. */
.tvid-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1180px;margin:0 auto}
@media(max-width:760px){.tvid-duo{grid-template-columns:1fr}}