/* =====================================================================
   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; }

/* ---------------- pied de page clair ----------------
   Mêmes colonnes, mêmes proportions et mêmes espacements que le footer sombre
   du site (2fr 1fr 1fr 1fr, gouttière de 40 px, 64 px de respiration en haut),
   mais posé sur le blanc de la page : aucune carte, aucune ombre, une seule
   fine séparation gris très clair avant les mentions.
   Règles réservées à /offre/ : offre.css n'est chargé que par cette page. */
.ofoot { margin-top: 72px; border-top: 1px solid var(--l-brd); background: #fff; }
/* même largeur utile que la grille de la page, pour que le footer reste dans
   son axe : 1272 px de contenu (330 + 22 + 920) + les 26 px de marge latérale */
.ofoot__in, .ofoot__bottom { max-width: 1324px; margin: 0 auto; padding: 0 26px; }
.ofoot__in {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-top: 64px; padding-bottom: 44px;
}
.ofoot__logo { display: inline-block; }
.ofoot__logo img { height: 30px; width: auto; display: block; }
.ofoot__brand p { margin: 14px 0 0; max-width: 280px; font-size: 14.5px; line-height: 1.6; color: var(--l-soft); }
.ofoot__col h4 { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--l-txt); }
.ofoot__col a { display: block; margin-bottom: 10px; font-size: 14.5px; color: var(--l-soft); transition: color .2s var(--ease); }
.ofoot__col a:last-child { margin-bottom: 0; }
.ofoot__col a:hover { color: var(--blue-2); }
/* le bleu de marque ne sert qu'à signaler la page courante et le survol */
.ofoot__col a[aria-current="page"] { color: var(--blue-2); }
.ofoot__bottom { padding-bottom: 30px; }
.ofoot__bottom > span {
  display: block; padding-top: 26px; border-top: 1px solid var(--l-brd);
  font-size: 13.5px; color: var(--l-soft);
}
.ofoot__bottom a { transition: color .2s var(--ease); }
.ofoot__bottom a:hover { color: var(--blue-2); }

/* ---------------- é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; }
  /* la marque prend toute la largeur, les trois listes restent alignées
     côte à côte dessous : aucune colonne ne se retrouve seule sur une ligne */
  .ofoot { margin-top: 56px; }
  .ofoot__in { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; padding-top: 52px; padding-bottom: 36px; }
  .ofoot__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .ofr { padding-top: 84px; }
  .ofr__wrap, .ofoot__in, .ofoot__bottom { 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; }
  /* une colonne par bloc : la lecture reste verticale et aérée */
  .ofoot__in { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; padding-bottom: 30px; }
  .ofoot__brand p { max-width: none; }
  .ofoot__bottom > span { padding-top: 22px; line-height: 1.6; }
}

/* 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; }
}