/* =====================================================================
   Page Offre — page claire, chargée uniquement par /offre/.
   Composition compacte : carte prestation étroite à gauche, calendrier
   dominant à droite, preuves puis témoignage sous le calendrier.
   Réutilise les tokens clairs de styles.css (--l-*, --blue*).
   ===================================================================== */

.page-offre { background: #fff; }

.ofr { background: #fff; padding: 104px 0 0; }
.ofr__wrap { width: 100%; max-width: 1520px; margin: 0 auto; padding: 0 26px; }

/* Carte fine à gauche, calendrier large à droite, alignés en haut.
   Largeurs calibrées sur le comportement du widget iClosed : en dessous de
   900 px il empile formulaire puis calendrier (1126 px de haut), au-dessus il
   passe en disposition large (860 px de haut, format quasi carré). Les paliers
   ci-dessous gardent donc toujours au moins ~930 px pour le calendrier. */
.ofr__grid { display: grid; grid-template-columns: 330px minmax(0, 920px); gap: 22px; align-items: start; justify-content: center; }

/* ---------------- carte prestation ---------------- */
.ocard {
  background: var(--l-card);
  border: 1px solid var(--l-brd);
  border-radius: 20px;
  padding: 16px 16px 20px;
}
.ocard__brand {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--l-brd);
  border-radius: 14px;
  padding: 11px 13px;
  margin-bottom: 22px;
}
.ocard__mark {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  display: grid; place-items: center;
}
.ocard__mark i {
  width: 56%; height: 56%; background: #fff;
  -webkit-mask: url(../images/e-mark.png?v=2) center / contain no-repeat;
  mask: url(../images/e-mark.png?v=2) center / contain no-repeat;
}
.ocard__brand b { font-family: "Sora", "Inter", sans-serif; font-size: 14.5px; font-weight: 700; color: var(--l-txt); letter-spacing: -.01em; }

.ocard__group + .ocard__group { margin-top: 22px; }
.ocard__cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: #8b95ad; margin-bottom: 11px;
}
.ocard__list { display: flex; flex-direction: column; gap: 9px; }
.ocard__list li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.45; color: var(--l-txt);
}
.ocard__list svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--blue-2); }

/* ---------------- calendrier ---------------- */
/* Le widget iClosed dessine déjà son propre cadre autour de son contenu :
   aucune bordure ni carte supplémentaire ici, sinon on obtient un cadre dans
   un cadre. Le calendrier est simplement posé sur le fond blanc de la page. */
.ocal { background: #fff; }
.ocal .iclosed-widget { display: block; width: 100%; line-height: 0; }
/* l'iframe iClosed est servie en height="100%" : sans hauteur résolue elle
   retombe à 150 px. Ce plancher la rend confortable sans l'empêcher de
   grandir quand le widget calcule lui-même sa hauteur. */
/* 920 px : juste au-dessus du seuil de bascule, la largeur où le contenu du
   widget remplit le mieux le cadre (au-delà, iClosed centre et laisse du blanc).
   Le plancher de hauteur sert seulement de garde-fou avant l'initialisation du
   widget : en disposition large il réclame ensuite ~688 px, sa hauteur réelle.
   Un plancher plus haut ajouterait du blanc sous le calendrier. */
.ocal iframe { display: block; width: 100%; max-width: 920px; border: 0; min-height: 640px; }
.ocal .iclosed-widget { min-height: 640px; }
.ocal__fallback { padding: 30px 22px; text-align: center; }

/* ---------------- références clients ---------------- */
/* Ligne de logos nue : ni cadre, ni fond, ni titre. Les hauteurs sont réglées
   logo par logo car un sigle carré et un logotype très allongé n'ont pas le
   même poids visuel à hauteur égale ; on ne contraint jamais la largeur, donc
   les proportions d'origine sont conservées. */
.oproof { margin-top: 18px; padding: 20px 0 18px; border-top: 1px solid var(--l-brd); }
.oproof__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 62px; }
.oproof__slot { display: inline-flex; align-items: center; justify-content: center; }
.oproof__slot img {
  width: auto; max-width: 160px; height: 34px; object-fit: contain; display: block;
  /* les logos sont fournis en noir sur fond blanc : un léger fondu suffit à les
     harmoniser sans les dénaturer */
  opacity: .86; transition: opacity .25s var(--ease);
  mix-blend-mode: multiply;
}
.oproof__slot:hover img { opacity: 1; }
/* équilibrage optique : sigle carré plus petit, logotype allongé plus bas */
/* hauteurs réglées pour une surface optique équivalente (~3600-3900 px²) :
   un logotype allongé et un sigle carré ne pèsent pas pareil à hauteur égale.
   AULUGA porte des mentions fines, il lui faut plus de hauteur pour rester net. */
.oproof__slot[data-logo="axilab"] img    { height: 28px; }   /* 800x162, très allongé */
.oproof__slot[data-logo="auluga"] img    { height: 58px; }   /* 168x160, carré et dense */
.oproof__slot[data-logo="evas-hair"] img { height: 35px; }   /* 538x179, script */
/* repli tant qu'un fichier manque : le nom remplace le logo absent */
.oproof__slot b {
  font-family: "Sora", "Inter", sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .03em; color: #9aa3b7;
}
.oproof__slot img ~ b { display: none; }

/* ---------------- avis clients (fondu enchaîné) ---------------- */
/* Les trois avis sont superposés dans une même cellule de grille : ils se
   relaient en fondu, un seul visible à la fois. Cycle de 12 s, soit 4 s par
   avis, chacun décalé d'un tiers. La grille prend la hauteur du plus long,
   donc rien ne saute au changement. */
.otm { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--l-brd); }
.otm__stage { display: grid; max-width: 620px; margin: 0 auto; }
.otm__item {
  grid-area: 1 / 1; text-align: center;
  opacity: 0;
  animation: otmfade 12s ease-in-out infinite both;
}
.otm__item:nth-child(2) { animation-delay: 4s; }
.otm__item:nth-child(3) { animation-delay: 8s; }
.otm:hover .otm__item { animation-play-state: paused; }
/* Les paliers sont recalculés pour que les fondus gardent leur durée réelle :
   6 % de 12 s = 0,72 s, soit exactement le fondu précédent (4 % de 18 s).
   Seul le temps de lecture entre deux avis est raccourci. */
@keyframes otmfade {
  0%   { opacity: 0; transform: translateY(6px); }
  6%   { opacity: 1; transform: none; }
  27%  { opacity: 1; transform: none; }
  33%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

.otm__quote { font-size: 15.5px; line-height: 1.6; color: var(--l-txt); margin: 0 0 16px; text-wrap: balance; }
.otm__who { display: flex; align-items: center; justify-content: center; gap: 9px; }
.otm__ava { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; background: #e8ecf5; }
.otm__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otm__name { font-size: 13px; font-weight: 600; color: var(--l-txt); }
.otm__org { font-weight: 400; color: var(--l-soft); }
.otm__stars { margin-top: 9px; color: #f5a623; font-size: 16px; letter-spacing: .16em; line-height: 1; }

/* Le pied de page clair a été promu dans styles.css le 2026-08-23 : la page
   FAQ l'utilise aussi, ce n'est plus un composant propre à /offre/. */

/* ---------------- état actif dans la navigation ---------------- */
.nav__links a.is-active { position: relative; color: #000; }
.nav__links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  border-radius: 2px; background: var(--blue-2);
}

/* ---------------- responsive ---------------- */
/* on resserre la carte pour laisser au calendrier ses ~930 px minimum */
@media (max-width: 1340px) { .ofr__grid { grid-template-columns: 275px minmax(0, 920px); gap: 18px; } }

/* sous ce seuil, deux colonnes feraient repasser le calendrier en format haut :
   on empile, ce qui lui rend toute la largeur et conserve le format large */
@media (max-width: 1280px) {
  .ofr__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ocard { max-width: 560px; }
}
@media (max-width: 980px) {
  .ofr { padding-top: 92px; }
  .ocard { max-width: none; }
  .ocal iframe, .ocal .iclosed-widget { min-height: 640px; }
}
@media (max-width: 560px) {
  .ofr { padding-top: 84px; }
  .ofr__wrap { padding-left: 16px; padding-right: 16px; }
  .ocard { padding: 14px 14px 18px; border-radius: 18px; }
  .ocal { border-radius: 18px; }
  .ocal iframe { min-height: 620px; }
  .oproof__row { gap: 18px 34px; }
  .oproof__slot img { max-width: 120px; }
  .oproof__slot[data-logo="axilab"] img    { height: 24px; }
  .oproof__slot[data-logo="auluga"] img    { height: 50px; }
  .oproof__slot[data-logo="evas-hair"] img { height: 30px; }
  .otm__quote { font-size: 14.5px; }
  .otm__stars { font-size: 15px; }
}

/* défilement désactivé si l'utilisateur réduit les animations : les avis
   restent lisibles et parcourables à la main */
@media (prefers-reduced-motion: reduce) {
  .otm__item { animation: none; opacity: 0; }
  .otm__item:first-child { opacity: 1; }
}