/* ==========================================================================
   ACCUEIL — visiteur : connexion, vidéo, appel aux distributeurs
   (la prod n'affiche plus que connexion + vidéo depuis le 2026-09-11)
   ========================================================================== */

/* ---------------------------------------------------------------- ouverture */
.ouverture { position: relative; overflow: hidden; isolation: isolate; }
/* halo de la couleur de marque derrière le formulaire */
.ouverture::before {
  content: ""; position: absolute; z-index: -1;
  top: -30%; right: -15%; width: 75%; height: 160%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--marque) 30%, transparent), transparent);
}
.ouverture__grille {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: var(--e-8); align-items: center;
}
.ouverture__texte { padding-top: var(--e-8); }

/* S.I.D.A.T. : ouverture claire, du gris perle vers le jaune de marque
   (le halo jaune sur graphite paraissait trop sombre, retour de Kévin du 22/10) */
[data-marque="sidat"] .ouverture.surface-nuit {
  --focus: #161616;
  background: linear-gradient(115deg, #F4F5F6 0%, #EDEFF1 30%, #FFF59A 62%, var(--jaune) 92%);
  color: #161616;
  border-bottom: var(--trait-1) solid #E3E1C8;
}
[data-marque="sidat"] .ouverture::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .7), transparent); }
[data-marque="sidat"] .ouverture :where(h1, h2, h3) { color: #161616; }
[data-marque="sidat"] .ouverture :is(.surtitre, .ouverture__chapo) { color: #3C3F44; }
[data-marque="sidat"] .ouverture__visuel img { filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .22)); }
[data-marque="sidat"] .ouverture .connexion { border-top-color: #161616; box-shadow: 0 24px 50px rgba(0, 0, 0, .16); }
.ouverture .surtitre { color: var(--clair-sur-nuit); }
.ouverture h1 { max-width: 20ch; margin-bottom: var(--e-4); font-size: clamp(2.125rem, 2.4vw + 1rem, 3.25rem); }
.ouverture__chapo { max-width: 50ch; color: var(--clair-sur-nuit); font-size: var(--t-3); }
/* les pièces détourées posées au pied du texte, fondues dans la nuit */
/* la voiture de course de la marque, détourée, au pied du texte */
.ouverture__visuel { margin: var(--e-5) 0 var(--e-6); width: min(100%, 500px); }
.ouverture__visuel img { width: 100%; height: auto; filter: drop-shadow(0 26px 28px rgba(0, 0, 0, .35)); }

/* ------------------------------------------------------ carte de connexion */
.connexion {
  --focus: var(--accent-texte);
  margin-block: var(--e-8);
  padding: var(--e-6);
  background: var(--md-papier); color: var(--md-encre);
  border-top: 4px solid var(--marque); border-radius: var(--rayon-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}
[data-marque="sidat"] .connexion { --bouton-fond-survol: #161616; --bouton-texte-survol: var(--jaune); }
.connexion h2 { margin-bottom: var(--e-2); font-size: var(--t-5); color: var(--md-encre); }
.connexion__intro { margin-bottom: var(--e-5); color: var(--md-encre-2); font-size: var(--t-1); }
.connexion form { display: grid; gap: var(--e-4); }
.connexion__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); font-size: var(--t-1); }
.connexion__ligne a { color: var(--md-encre-2); }
.connexion .bouton { width: 100%; margin-top: var(--e-2); }
.connexion__sans { margin: var(--e-5) 0 0; padding-top: var(--e-5); border-top: var(--trait-1) solid var(--md-trait); font-size: var(--t-1); }
.connexion__sans a { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--md-encre); font-weight: 700; text-decoration: none; }
.connexion__sans a .icone { transition: transform var(--duree-2) var(--courbe); }
.connexion__sans a:hover .icone { transform: translateX(4px); }

@media (max-width: 960px) {
  .ouverture__grille { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ouverture__texte { padding-top: var(--e-7); }
  /* la voiture reste sur mobile (retour de Jean du 01/11), un peu plus petite */
  .ouverture__visuel { width: min(100%, 420px); margin: var(--e-4) 0 var(--e-5); }
  .connexion { margin-block: var(--e-6) var(--e-7); }
}

/* ------------------------------------------------ vidéo + distributeurs */
.accueil-suite { padding-top: var(--e-8); }
.accueil-suite__grille { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--e-5); align-items: stretch; }
@media (max-width: 960px) { .accueil-suite__grille { grid-template-columns: 1fr; } }

/* façade : rien n'est demandé à YouTube avant le clic */
.video { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: var(--nuit); border-radius: var(--rayon-2); }
.video__facade { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: var(--nuit); color: var(--md-papier); cursor: pointer; }
/* la miniature de la vidéo, hébergée sur le site (rien n'est demandé à YouTube avant le clic) */
.video__facade img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--duree-3) var(--courbe), transform var(--duree-3) var(--courbe); }
.video__facade:hover img { filter: brightness(.88); transform: scale(1.02); }
.video__lecture {
  position: absolute; left: var(--e-5); bottom: var(--e-5); width: 72px; height: 72px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--marque); color: var(--sur-marque); box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  transition: transform var(--duree-2) var(--courbe);
}
.video__facade:hover .video__lecture { transform: scale(1.08); }
.video__lecture svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; }
.video__note { position: absolute; top: var(--e-3); left: var(--e-4); padding: 2px var(--e-2); border-radius: var(--rayon-1); background: rgba(0, 0, 0, .55); font-size: var(--t-0); color: rgba(255, 255, 255, .9); pointer-events: none; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.appel {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-6);
  padding: var(--e-6); background: var(--md-papier);
  border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2);
}
.appel h2 { font-size: var(--t-5); }
.appel__liste { display: grid; gap: var(--e-3); margin-top: var(--e-5); list-style: none; color: var(--md-encre-2); }
.appel__liste li { display: flex; align-items: flex-start; gap: var(--e-3); }
.appel__coche { flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--marque); color: var(--sur-marque); }
.appel__coche .icone { width: 14px; height: 14px; stroke-width: 2.6; }
.appel .bouton { align-self: flex-start; }

/* site réel : client connecté, récapitulatif du compte */
.connexion__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.connexion__actions .bouton { flex: 1; }
.connexion form .bouton { width: 100%; margin-top: var(--e-2); }
.accueil .ouverture { margin-top: 0; }
.bandeaux + .site .accueil .ouverture { margin-top: var(--e-4); }

/* accès rapides du client connecté */
.acces { display: grid; gap: var(--e-2); margin-top: var(--e-5); list-style: none; }
.acces__lien { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--e-4); border: var(--trait-1) solid var(--md-trait); border-radius: var(--rayon-2); color: var(--md-encre); font-weight: 700; text-decoration: none; }
.acces__lien:hover { border-color: var(--md-encre); background: var(--marque-voile); color: var(--md-encre); }
.acces__lien .icone { transition: transform var(--duree-2) var(--courbe); }
.acces__lien:hover .icone { transform: translateX(4px); }

/* signature du groupe : « Expertise by your side », sur la couleur de marque */
.signature { margin-top: var(--e-8); padding-block: var(--e-7); background: linear-gradient(120deg, var(--marque-sombre), var(--marque)); }
[data-marque="sidat"] .signature { background: var(--jaune); }
.signature__image { display: block; width: min(100%, 860px); height: auto; margin-inline: auto; }
@media (max-width: 760px) { .signature { margin-top: var(--e-7); padding-block: var(--e-5); } }

/* accueil : la signature touche le pied de page */
.site:has(.accueil) { padding-bottom: 0; }
.site:has(.accueil) + .pied { margin-top: 0; }

/* client connecté : son compte en un coup d'œil dans la carte, à la place du formulaire
   (tableau de myaccount/customer-summary.html.twig, restylé) */
.recap-compte { margin-bottom: var(--e-5); }
.recap-compte table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--t-1); }
.recap-compte tr, .recap-compte td { background: none; }
.recap-compte td { padding: var(--e-3) 0; border: 0; border-bottom: var(--trait-1) solid var(--md-trait); color: var(--md-encre-2); vertical-align: middle; }
.recap-compte td strong { color: var(--md-encre); font-weight: 600; }
.recap-compte td.text-right { padding-left: var(--e-3); text-align: right; font-family: var(--f-mono); color: var(--md-encre); white-space: nowrap; }
.recap-compte tr[class*="table-"] td { padding: var(--e-2) var(--e-3); border: 0; border-radius: var(--rayon-1); font-weight: 700; }
.recap-compte tr.table-success td { background: #E7F6EC; color: #146C2E; }
.recap-compte tr.table-danger td { background: #FDECEC; color: #B42318; }
.recap-compte tr.table-warning td { background: #FFF6DB; color: #7A5300; }
.recap-compte tr[class*="table-"] + tr td { padding-top: var(--e-3); }
.connexion--compte .connexion__sans { display: flex; justify-content: flex-end; }
/* la carte est blanche dans une ouverture sombre : le bouton contour reprend l'encre */
.ouverture .connexion .bouton--contour { border-color: var(--md-encre); color: var(--md-encre); }
.ouverture .connexion .bouton--contour:hover { background: var(--md-encre); border-color: var(--md-encre); color: var(--md-papier); }