/* accueil.css — page d'accueil canelle.fr */

/* Hero : fond nuit, titre à gauche, bouquet de pétales-images à droite */
.hero{background:var(--nuit);color:#fff;overflow:hidden;position:relative}
.hero .cadre{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding-block:clamp(3rem,7vw,5.5rem)}
.hero h1{max-width:20ch}
.hero .chapo{font-size:1.2rem;color:#d7d7e3;max-width:52ch;margin:1.4rem 0 2rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem}
.preuves{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;margin:2.4rem 0 0;padding:0;list-style:none;align-items:center;color:#d7d7e3;font-size:.95rem}
.preuves img{width:118px;height:auto;background:#fff;border-radius:8px;padding:.35rem .5rem}
.preuves strong{color:#fff;font:700 1.35rem/1 var(--f-titre);display:block}

.bouquet{position:relative;aspect-ratio:1/1.05;max-width:520px;width:100%;justify-self:center}
.petale{position:absolute;overflow:hidden;border-radius:var(--feuille);box-shadow:0 18px 40px rgba(0,0,0,.35);animation:poser 1s cubic-bezier(.2,.8,.2,1) both}
.petale img{width:100%;height:100%;object-fit:cover}
.petale-1{width:62%;height:56%;left:0;top:4%;--r:-4deg;transform:rotate(var(--r));outline:6px solid var(--p-teal);outline-offset:-6px}
.petale-2{width:52%;height:50%;right:0;top:0;--r:6deg;transform:rotate(var(--r));animation-delay:.12s;outline:6px solid var(--p-orange);outline-offset:-6px}
.petale-3{width:64%;height:50%;right:6%;bottom:0;--r:-2deg;transform:rotate(var(--r));animation-delay:.24s;outline:6px solid var(--p-rose);outline-offset:-6px}
.petale-1 img{object-position:60% 40%}
.etiquette{position:absolute;left:0;bottom:6%;background:var(--grenat);color:#fff;font:700 .95rem/1.2 var(--f-titre);padding:.6rem .9rem;border-radius:12px 12px 12px 0;max-width:15ch}
@keyframes poser{from{opacity:0;transform:translateY(24px) rotate(calc(var(--r) * 3))}to{opacity:1;transform:rotate(var(--r))}}

/* Sections */
.bloc{padding:clamp(3.5rem,7vw,6rem) 0}
.bloc-teinte{background:var(--rose-pale)}
.bloc-nuit{background:var(--nuit);color:#fff}
.bloc .entree{max-width:62ch;margin-bottom:2.5rem}
.bloc .entree p{color:var(--gris);margin:.9rem 0 0}
.bloc-nuit .entree p{color:#c9c9d6}

/* Quatre portes d'entrée */
.portes{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.porte{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem;background:var(--carte);border:1px solid var(--bord);border-radius:18px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s}
.porte:hover{border-color:var(--grenat);transform:translateY(-3px)}
.porte h3{font-size:1.15rem}
.porte p{margin:0;color:var(--gris);font-size:.97rem;flex:1}
.porte span{color:var(--grenat);font-weight:700}

/* Thèmes de formation */
.themes{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.theme{grid-column:span 2;padding:1.5rem;border-radius:18px;background:var(--carte);border:1px solid var(--bord);position:relative}
.theme:nth-child(4){grid-column:2 / span 2}
.theme:nth-child(5){grid-column:4 / span 2}
.theme h3{margin-bottom:.5rem}
.theme p{margin:0 0 1rem;color:var(--gris);font-size:.98rem}
.theme .nb{font-weight:700;color:var(--grenat)}
.theme::before{content:"";position:absolute;right:1.1rem;top:1.1rem;width:26px;height:26px;border-radius:var(--feuille);background:var(--c,var(--grenat))}
.theme:nth-child(1){--c:var(--grenat)}.theme:nth-child(2){--c:var(--p-teal)}.theme:nth-child(3){--c:var(--p-orange)}.theme:nth-child(4){--c:var(--p-vert)}.theme:nth-child(5){--c:var(--p-rose)}
.modalites{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:2rem 0 0;padding:0;list-style:none;color:var(--gris)}
.modalites li{padding-left:1.2rem;position:relative}
.modalites li::before{content:"";position:absolute;left:0;top:.5em;width:.6rem;height:.6rem;border-radius:var(--feuille);background:var(--grenat)}

/* Animations / offres nommées */
.offres{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.offre{display:grid;grid-template-columns:150px 1fr;gap:1.2rem;align-items:center;padding:1rem;background:var(--nuit-2);border-radius:20px}
.offre .vignette{aspect-ratio:1;border-radius:var(--feuille);overflow:hidden;background:#222}
.offre .vignette img{width:100%;height:100%;object-fit:cover}
.offre h3{margin-bottom:.4rem}
.offre p{margin:0 0 .6rem;color:#c9c9d6;font-size:.97rem}
.offre a{color:#fff;font-weight:700}
.offre.sans-image{grid-template-columns:1fr;padding:1.5rem}

/* Pôle digital */
.digital{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.digital article{padding:1.4rem;background:var(--carte);border-radius:18px;border:1px solid var(--bord)}
.digital h3{font-size:1.1rem;margin-bottom:.5rem}
.digital p{margin:0;color:var(--gris);font-size:.96rem}
.suite{margin-top:2rem}


/* Preuves */
.chiffres{display:flex;flex-wrap:wrap;gap:1rem 3rem;margin-bottom:2.25rem}
.chiffres div{font-size:.98rem;color:var(--gris)}
.chiffres strong{display:block;font:700 2.2rem/1 var(--f-titre);color:var(--nuit);letter-spacing:-.02em}
.avis{margin-bottom:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.avis figure{margin:0;padding:1.4rem;border:1px solid var(--bord);border-left:5px solid var(--grenat);border-radius:18px;background:#fff;font-size:.98rem}
.avis blockquote{margin:0 0 .8rem;color:var(--texte)}
.avis figcaption span{display:block;font-weight:500;color:var(--gris)}
.avis figcaption{font-weight:700;font-size:.92rem}
.clients{margin:2rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;font:700 1.05rem var(--f-titre);color:var(--grenat-fonce)}

/* À propos */
.propos{display:grid;grid-template-columns:320px 1fr;gap:3rem;align-items:center}
.portrait{aspect-ratio:1;border-radius:var(--feuille);overflow:hidden;border:6px solid var(--grenat)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.propos p{max-width:60ch}

/* FAQ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--bord);padding:1.1rem 0}
.faq summary{cursor:pointer;font:700 1.15rem var(--f-titre);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--grenat);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.8rem 0 0;color:var(--gris);max-width:62ch}

/* Contact */
.contact{background:var(--grenat);color:#fff}
.contact .cadre{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.contact p{max-width:48ch;color:#fbd5de}
.contact ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.contact a:not(.btn){color:#fff;font-weight:700}
.contact .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}

@media (max-width:980px){
  .hero .cadre,.propos,.contact .cadre{grid-template-columns:1fr}
  .bouquet{max-width:440px}
  .portes,.digital {grid-template-columns:repeat(2,1fr)}
  .themes{grid-template-columns:repeat(2,1fr)}
  .theme,.theme:nth-child(4),.theme:nth-child(5){grid-column:auto}
  .offres,.avis{grid-template-columns:1fr}
  .portrait{max-width:260px}
}
@media (max-width:600px){
  .portes,.digital,.themes{grid-template-columns:1fr}
  .offre{grid-template-columns:96px 1fr}
}