/* Racontine, page d'accueil d'un cadeau reçu. S'ajoute à styles.css. */

.page-cadeau .entete .btn{min-height:48px;font-size:18px;white-space:nowrap}

.cadeau-hero{padding:72px 0 96px;background:linear-gradient(180deg,var(--blanc) 0%,var(--corail-pale) 100%)}
.cadeau-hero .stack{gap:28px}

/* Étiquette cadeau */
.etiquette-zone{display:flex;justify-content:center;padding:24px 0}
.etiquette{position:relative;width:100%;max-width:440px;background:#fff;border:1px solid var(--trait);border-radius:20px 20px 20px 20px;padding:44px 40px 32px;box-shadow:0 30px 60px -36px rgba(122,31,53,.45);transform:rotate(-1.5deg);display:flex;flex-direction:column;gap:24px}
.etiquette::before{content:"";position:absolute;top:-1px;left:50%;width:120px;height:10px;margin-left:-60px;background:var(--corail);border-radius:0 0 8px 8px}
.etiquette-trou{position:absolute;top:22px;right:24px;width:18px;height:18px;border-radius:50%;border:3px solid var(--corail);background:var(--blanc)}
.etiquette img{width:130px;height:auto}
.etiquette-noms{display:flex;flex-direction:column;gap:10px}
.etiquette-noms p{font-size:24px;line-height:32px}
.etiquette-noms strong{font-family:var(--serif);font-weight:500;color:var(--bordeaux)}
.etiquette-label{display:block;font-size:14px;line-height:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.etiquette-mot{margin:0;padding:18px 20px;background:var(--corail-pale);border-radius:14px;font-family:var(--serif);font-style:italic;font-size:20px;line-height:30px;white-space:pre-line}
.etiquette-pied{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px dashed #D9CCC5;padding-top:16px}
.etiquette-pied p{font-size:19px;line-height:26px}
.code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.06em}

/* Ce qu'on vous offre */
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.tuile{background:var(--blanc);border:1px solid var(--trait);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.tuile-num{width:44px;height:44px;border-radius:50%;background:var(--bordeaux);color:#fff;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center}

/* Camille */
.camille-parole{margin:0;padding:20px 24px;border-left:0;background:var(--corail-pale);border-radius:16px;font-family:var(--serif);font-style:italic;font-size:21px;line-height:31px;color:var(--encre)}

/* Listes */
.bloc-liste{padding:36px 32px;display:flex;flex-direction:column;gap:20px;height:100%}
.bloc-liste h2{font-size:30px;line-height:38px}
.liste-simple{list-style:none;padding:0;display:flex;flex-direction:column;gap:14px}
.liste-simple li{position:relative;padding-left:36px}
.liste-simple li::before{content:"";position:absolute;left:4px;top:7px;width:12px;height:7px;border-left:3px solid var(--bordeaux);border-bottom:3px solid var(--bordeaux);transform:rotate(-45deg)}

/* Chevron des questions, dessiné en CSS */
.page-cadeau .faq .chevron{position:relative}
.page-cadeau .faq .chevron::after{content:"";width:8px;height:8px;border-right:2.5px solid var(--bordeaux);border-bottom:2.5px solid var(--bordeaux);transform:translateY(-2px) rotate(45deg)}

/* Pied de page court */
.page-cadeau .pied-page{padding:40px 0}

@media (max-width:1040px){
  .tuiles{grid-template-columns:1fr;max-width:620px}
}
@media (max-width:760px){
  .cadeau-hero{padding:32px 0 56px}
  .etiquette{padding:36px 24px 24px;transform:none}
  .etiquette-noms p{font-size:22px;line-height:30px}
  .page-cadeau .entete .btn{min-height:44px;font-size:16px;padding:0 14px}
  .bloc-liste{padding:28px 22px}
}