/* ============================================================
   YODLYNCI — Composants réutilisables
   Mesures : Figma DOf9KbCyWjES1vZXrFzvvI + live yodlynci.com
   ============================================================ */

/* ------------------------------------------------------------
   1. L'ENCOCHE — le motif signature du site
   Un bloc de couleur découpé par un masque SVG, posé en absolu
   sur un coin de la carte. La couleur suit celle du support,
   c'est pourquoi on masque un bloc plutôt que d'utiliser une image.
   ------------------------------------------------------------ */
.enc {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background-color: var(--enc-color, var(--c-white));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

/* Encoche « bulle » des cartes — haut droite et bas gauche */
.enc--haut {
  top: 0;
  right: 40px;
  width: 71px;
  height: 35px;
  transform: scaleY(-1);
  -webkit-mask-image: url('../assets/masks/arche.svg');
          mask-image: url('../assets/masks/arche.svg');
}
.enc--bas {
  bottom: 0;
  left: 40px;
  width: 63px;
  height: 42px;
  -webkit-mask-image: url('../assets/masks/arche.svg');
          mask-image: url('../assets/masks/arche.svg');
}

/* Coin arrondi inversé (cartes logos clients, pastille témoignages) */
.enc--coin {
  -webkit-mask-image: url('../assets/masks/coin-inverse.svg');
          mask-image: url('../assets/masks/coin-inverse.svg');
}

/* Encoche d'angle des grands panneaux */
.enc--angle {
  -webkit-mask-image: url('../assets/masks/encoche.svg');
          mask-image: url('../assets/masks/encoche.svg');
}

/* Arche de transition (bas du hero, bas des cartes témoignage) */
.enc--arche {
  -webkit-mask-image: url('../assets/masks/arche.svg');
          mask-image: url('../assets/masks/arche.svg');
}

/* ------------------------------------------------------------
   2. Boutons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 24px;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-navy);
  font-family: var(--f-sans);
  font-size: var(--fs-lead);
  font-weight: 900;
  line-height: var(--lh-lead);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(5, 26, 47, 0.18); }
.btn__ic { display: flex; width: 24px; height: 24px; flex-shrink: 0; }
.btn__ic svg { width: 100%; height: 100%; }

/* Bouton compact du header : 259 × 50, radius 25 */
.btn--sm {
  gap: var(--sp-8);
  padding: 9.7px 32px;
  border-radius: var(--r-btn);
  font-size: var(--fs-lead);
}
.btn--navy { background: var(--c-navy); color: var(--c-white); }

/* ------------------------------------------------------------
   3. Bouton rond à flèche — avec le survol diagonal du site
   Deux glyphes : le premier sort en haut à droite, le second
   entre par en bas à gauche. Relevé dans le Figma (2e glyphe à −30/30).
   ------------------------------------------------------------ */
.arrow-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--c-white);
  color: var(--c-orange);
  overflow: hidden;
}
.arrow-btn svg { width: 40px; height: 40px; }
.arrow-btn__a,
.arrow-btn__b {
  position: absolute;
  transition: transform 0.4s var(--ease-out);
}
.arrow-btn__b { transform: translate(-30px, 30px); }
.arrow-btn:hover .arrow-btn__a { transform: translate(30px, -30px); }
.arrow-btn:hover .arrow-btn__b { transform: translate(0, 0); }

/* Variante 40 px des cartes stats */
.arrow-btn--sm { width: 40px; height: 40px; background: none; color: inherit; }
.arrow-btn--sm svg { width: 24px; height: 24px; }
.arrow-btn--sm .arrow-btn__b { transform: translate(-24px, 24px); }
.arrow-btn--sm:hover .arrow-btn__a { transform: translate(24px, -24px); }

/* ------------------------------------------------------------
   4. Pilule-étiquette décorative (inclinée, flottante)
   ------------------------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 16px;
  border-radius: var(--r-pill);
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  white-space: nowrap;
}
.tag--orange { background: var(--c-orange); color: var(--c-navy); }
.tag--red    { background: var(--c-red);    color: var(--c-navy); }
.tag--lime   { background: var(--c-lime);   color: var(--c-navy); }
.tag--green  { background: var(--c-green);  color: var(--c-white); }
.tag--violet { background: var(--c-violet); color: var(--c-navy); }

/* ------------------------------------------------------------
   5. En-tête de section : eyebrow + H2 (+ paragraphe à droite)
   ------------------------------------------------------------ */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 51.2px;
  width: 100%;
}
.sec-head__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-15);
  max-width: 780.8px;
}
.sec-head__right { width: 448px; flex-shrink: 0; }

/* ------------------------------------------------------------
   6. Carte de service — 410,66 × 346, grille 3 × 2, gap 24
   ------------------------------------------------------------ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-24);
  width: 100%;
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 346px;
  padding: 40px;
  border-radius: var(--r-card);
  overflow: hidden;
  color: var(--c-white);
}
.svc-card__head { display: flex; flex-direction: column; gap: var(--sp-10); }
.svc-card__title { color: inherit; }
.svc-card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  opacity: 0.8;
}
.svc-card__foot { display: flex; justify-content: flex-end; }

.svc-card--orange { background: var(--c-orange); }
.svc-card--violet { background: var(--c-violet); }
.svc-card--red    { background: var(--c-red);     }
.svc-card--lime   { background: var(--c-lime);    color: var(--c-navy); }
.svc-card--green  { background: var(--c-green);   }
.svc-card--navy   { background: var(--c-navy);    }

/* La carte navy porte une encoche pivotée sur le flanc droit
   et son encoche basse est décalée (relevé Figma) */
.svc-card--navy .enc--haut {
  top: 91.5px;
  right: -1.5px;
  transform: none;
  width: 40px;
  height: 61px;
  -webkit-mask-image: url('../assets/masks/forme-40x61.png');
          mask-image: url('../assets/masks/forme-40x61.png');
}
.svc-card--navy .enc--bas { left: 120px; }

/* ------------------------------------------------------------
   7. Carte témoignage — 550 × ~370
   ------------------------------------------------------------ */
.quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 60px 40px;
  border-radius: var(--r-card);
  background: var(--c-testimonial-bg);
  --enc-color: var(--c-white);
}
/* Le bloc citation : titre puis texte, écart de 16 (relevé live) */
.quote-card blockquote { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.quote-card__title { color: var(--c-navy); }
/* Le paragraphe est plus étroit que le titre : 441,8 relevés sur le live */
.quote-card__text {
  max-width: 441.8px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-navy);
}
.quote-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-24);
  margin-top: auto;
}
.quote-card__who { display: flex; flex-direction: column; width: 225.6px; }
.quote-card__name { font-size: var(--fs-body); font-weight: 600; line-height: var(--lh-body); }
.quote-card__role { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.quote-card__mark { width: 60px; height: 39px; flex-shrink: 0; }

/* ------------------------------------------------------------
   8. Carte statistique à encoche (hero, Why Choose)
   ------------------------------------------------------------ */
.stat-card {
  position: relative;
  width: 232px;
  padding: 4px 60px 40px 20px;
  border-radius: var(--r-card);
  overflow: hidden;
}
/* La flèche sort du flux : le texte dispose des 150 px du live et ne se coupe pas. */
.stat-card__row { display: block; padding-top: 14px; }
.stat-card .arrow-btn--sm { position: absolute; top: 4px; right: 13px; z-index: 3; }
.stat-card__value {
  font-family: var(--f-sans);
  font-size: var(--fs-stat);
  font-weight: 900;
  line-height: var(--lh-stat);
  text-transform: uppercase;
}
.stat-card__lines { display: flex; flex-direction: column; }
.stat-card__lines span { font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-sm); }

.stat-card--green  { background: var(--c-green); color: var(--c-navy); }
.stat-card--lime   { background: var(--c-lime); color: var(--c-navy); }
.stat-card--violet { background: var(--c-violet); color: var(--c-white); }
.stat-card--red    { background: var(--c-red); color: var(--c-white); }

.stat-card .enc--haut { right: 55px; width: 40px; height: 26.7px; }
.stat-card .enc--bas  { left: 53px;  bottom: -1px; width: 40px; height: 26.7px; }

/* ------------------------------------------------------------
   9. Marquee — piste dupliquée, vitesse en px/s
   ------------------------------------------------------------ */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-left var(--mq-duration, 30s) linear infinite;
}
@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   10. Accordéon (méthode et FAQ)
   ------------------------------------------------------------ */
.acc__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-24);
  width: 100%;
  text-align: left;
}
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.acc__item.is-open > .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }

/* Bouton rond +/− de la FAQ */
.acc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-navy);
  transition: transform 0.3s var(--ease-out);
}
.acc__toggle img { width: 14px; height: 14px; }
.acc__item.is-open .acc__toggle { transform: rotate(180deg); }

/* ------------------------------------------------------------
   11. Bouton flottant Calendly — même code que sur overse/
   ------------------------------------------------------------ */
.float-cta {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 30px;
  border-radius: 50px;
  background: linear-gradient(135deg, #f28a6b 0%, #ff6b4a 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  box-shadow: 0 4px 20px rgba(242, 138, 107, 0.4);
  transition: all 0.3s ease;
  animation: slideInUp 0.5s ease-out;
}
.float-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 30px rgba(242, 138, 107, 0.6);
}
.float-cta__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
  0%   { opacity: 1;   transform: scale(1); }
  50%  { opacity: 0.6; transform: scale(1.2); }
  100% { opacity: 1;   transform: scale(1); }
}
@keyframes slideInUp {
  from { transform: translateY(100px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ------------------------------------------------------------
   12. Apparition au scroll
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Responsive des composants
   ------------------------------------------------------------ */
@media (max-width: 1199px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-24); }
  .sec-head__right { width: 100%; max-width: 620px; }
}

@media (max-width: 767px) {
  .svc-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-card { height: auto; min-height: 300px; padding: 28px 24px; }
  .svc-card .enc--haut { right: 24px; }
  .svc-card .enc--bas  { left: 24px; }
  .quote-card { padding: 32px 24px; }
  .btn { padding: 16px 24px; gap: 12px; font-size: 15px; }
  .arrow-btn { width: 48px; height: 48px; }
  .arrow-btn svg { width: 30px; height: 30px; }
  .float-cta { bottom: 16px; right: 16px; padding: 14px 20px; font-size: 14px; }
}