@charset "utf-8";
/* Page Drop-in — ce qui lui est propre. Le commun est dans ../commun.css. Préfixe di-. */

/* ---- Haut : « De passage à Vallauris ? » en grand, la fin du H1 en petit dessous, puis les paragraphes d'accueil ---- */
.haut-titre-fin { display: block; margin-top: 10px; font-size: .42em; letter-spacing: .02em; color: var(--violet-fonce); }
/* ---- Accueil : les quatre paragraphes dans une carte crème suspendue à la pastille du loup, au-dessus de « Votre
        drop-in » (Virginie, 27/10). À son arrivée, elle se balance depuis le centre du loup puis s'immobilise. ---- */
[data-section="votre-drop-in"] { padding-top: clamp(40px, 4cqw, 60px); }  /* moins d'air au-dessus de la carte (Virginie, 27/10) */
.dc-carte {
  position: relative; max-width: 860px; margin: 28px auto 64px; padding: 46px 52px 38px;
  border-radius: 22px; background: var(--creme); transform-origin: 50% -28px;
}
.dc-carte .di-accueil { max-width: none; margin: 0; text-align: left; }
.dc-carte .di-accueil > p:first-child { font-size: 20px; }
.dc-loup {
  position: absolute; top: -28px; left: 50%; width: 56px; height: 56px; transform: translateX(-50%);
  display: grid; place-items: center; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 6px #FFFFFF;
}
.dc-loup img { width: 34px; height: auto; display: block; }
.dc-carte.apparait.visible { animation: dc-balance 1.8s cubic-bezier(.3,.1,.3,1) both; }
@keyframes dc-balance {
  0% { transform: rotate(-7deg); }
  28% { transform: rotate(4.5deg); }
  50% { transform: rotate(-2.5deg); }
  68% { transform: rotate(1.3deg); }
  84% { transform: rotate(-.5deg); }
  100% { transform: rotate(0); }
}

/* Icônes au trait, couleur de la marque (elles remplacent les ✓ et les émojis du document) */
.di-icone { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--lilas); color: var(--violet-fonce); }
.di-icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 1. Le billet de passage : le corps (ce qui est compris) et le talon détachable, tamponné du prix ---- */
.di-billet {
  position: relative; display: grid; grid-template-columns: 1fr 1.55fr; max-width: 940px; margin: 44px auto 0;
  filter: drop-shadow(0 16px 34px rgba(42,26,140,.14));
}
.di-billet-corps {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 44px 44px 44px 48px; border-radius: 0 24px 24px 0; background: var(--creme);
  /* Les deux échancrures de la ligne de découpe */
  -webkit-mask: radial-gradient(circle at 0 0, transparent 15px, #000 16px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent 15px, #000 16px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
}
.di-inclus { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.di-inclus li { display: flex; align-items: center; gap: 16px; }
.di-inclus p { margin: 0; font-size: 18px; }
.di-talon {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  padding: 40px 30px; border-radius: 24px 0 0 24px; background: var(--violet); color: #FFFFFF;
  border-right: 3px dashed rgba(255,255,255,.55); transform-origin: 100% 50%;
  transition: transform .4s cubic-bezier(.3,1.4,.5,1);
  -webkit-mask: radial-gradient(circle at 100% 0, transparent 15px, #000 16px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, transparent 15px, #000 16px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
}
.di-billet:hover .di-talon, .di-billet:focus-within .di-talon { transform: translateX(-10px) rotate(-2deg); }
.di-talon .bouton { white-space: nowrap; background: #FFFFFF; color: var(--violet-fonce); }
.di-talon .bouton:hover { background: var(--encre); color: #FFFFFF; }
/* Le tampon : il tombe sur le talon quand le billet arrive à l'écran */
.di-tampon {
  display: grid; place-items: center; width: 168px; height: 168px; border-radius: 50%; text-align: center;
  border: 3px solid #FFFFFF; box-shadow: inset 0 0 0 7px var(--violet), inset 0 0 0 9px rgba(255,255,255,.7);
  transform: rotate(-10deg);
}
.di-tampon p { margin: 0; max-width: 120px; }
.di-tampon strong { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
.di-prix { display: block; font-size: 52px; line-height: .95; }
.di-billet.visible .di-tampon { animation: di-tampon .5s cubic-bezier(.3,1.5,.5,1) .5s both; }
@keyframes di-tampon { from { opacity: 0; transform: rotate(-24deg) scale(1.7); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }

/* ---- Planning et téléphone : deux cartes de même largeur sous le billet ---- */
.di-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 940px; margin: 26px auto 0; }
.di-contact { display: flex; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 20px; background: var(--creme); }
.di-contact p { margin: 0; }
.di-contact a { color: var(--violet-fonce); text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.di-contact a:hover { color: var(--violet); }

/* ---- Tablette et téléphone ---- */
@media (max-width: 1023.98px) {
}
@media (min-width: 700px) and (max-width: 1023.98px) {
  /* Le talon garde la place de son bouton sur une ligne */
  .di-billet { grid-template-columns: minmax(320px, 1fr) 1.3fr; }
  .di-talon { padding: 36px 24px; }
  .di-billet-corps { padding: 36px 30px 36px 36px; }
}
@media (max-width: 699.98px) {
  /* Le billet se plie : le talon passe sous le corps, la découpe devient horizontale */
  .di-billet { grid-template-columns: 1fr; }
  .di-billet-corps {
    padding: 30px 24px 34px; border-radius: 0 0 24px 24px; align-items: flex-start;
    -webkit-mask: radial-gradient(circle at 0 0, transparent 15px, #000 16px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 15px, #000 16px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, transparent 15px, #000 16px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 15px, #000 16px) right / 51% 100% no-repeat;
  }
  .di-talon {
    padding: 34px 24px 36px; border-radius: 24px 24px 0 0; border-right: 0; border-bottom: 3px dashed rgba(255,255,255,.55); transform-origin: 50% 100%;
    -webkit-mask: radial-gradient(circle at 0 100%, transparent 15px, #000 16px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 15px, #000 16px) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 100%, transparent 15px, #000 16px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 15px, #000 16px) right / 51% 100% no-repeat;
  }
  .di-billet:hover .di-talon, .di-billet:focus-within .di-talon { transform: none; }
  .di-inclus p { font-size: 17px; }
  .di-tampon { width: 150px; height: 150px; }
  .di-tampon strong { font-size: 21px; }
  .di-prix { font-size: 46px; }
}
/* Deux cartes : côte à côte dès 600 px, l'une sous l'autre en dessous (règle du site) */
@media (max-width: 599.98px) {
  .dc-carte { padding: 40px 22px 28px; margin-bottom: 52px; }
  .dc-carte .di-accueil > p:first-child { font-size: 18.5px; }
  .di-contacts { grid-template-columns: 1fr; gap: 14px; }
  .di-contact { padding: 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-carte.apparait.visible { animation: none; }
  .di-talon { transition: none; }
  .di-billet.visible .di-tampon { animation: none; }
}