/* Charte graphique du site vitrine Adypose */

:root {
    --creme: #F7F1E5;
    --encre: #221C2E;
    --encre-doux: #55495F;
    --accent: #E85D3A;
    --accent-fonce: #C4431F;
    --violet: #7A4FBF;
    --violet-fonce: #5A3694;
    --or: #D9A03C;
    --blanc: #FFFFFF;
    --degrade-punch: linear-gradient(100deg, var(--accent) 0%, var(--violet) 100%);
    --police-titres: "Fraunces", Georgia, serif;
    --police-texte: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--police-texte);
    background: var(--creme);
    color: var(--encre);
    line-height: 1.6;
}

.conteneur {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

h1, h2, h3 { font-family: var(--police-titres); font-weight: 600; line-height: 1.15; }

.surtitre {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 14px;
}

/* Boutons */
.bouton {
    display: inline-block;
    padding: 13px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid var(--encre);
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton-plein {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--blanc);
    box-shadow: 0 8px 22px rgba(232, 93, 58, 0.35);
}
.bouton-plein:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton-contour { background: transparent; color: var(--encre); }
.bouton-contour:hover { background: var(--violet); border-color: var(--violet); color: var(--blanc); }

/* Entete */
.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(247, 241, 229, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(34, 28, 46, 0.08);
}
.entete-int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
}
.logo {
    font-family: var(--police-titres);
    font-size: 1.4rem;
    letter-spacing: 0.28em;
    text-decoration: none;
    color: var(--encre);
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { text-decoration: none; color: var(--encre); font-weight: 500; }
.nav .bouton { padding: 9px 20px; }

/* Hero */
.hero {
    padding: 110px 0 90px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before, .hero::after {
    content: "";
    position: absolute;
    width: 760px;
    height: 760px;
    pointer-events: none;
}
.hero::before {
    background: radial-gradient(circle, rgba(232, 93, 58, 0.22), transparent 62%);
    top: -300px;
    left: -240px;
}
.hero::after {
    background: radial-gradient(circle, rgba(122, 79, 191, 0.26), transparent 62%);
    bottom: -340px;
    right: -260px;
}
.hero .conteneur { position: relative; z-index: 1; }
.mot-punch {
    background: var(--degrade-punch);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
    padding-right: 0.06em;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 22px; }
.hero-texte {
    max-width: 620px;
    margin: 0 auto 34px;
    color: var(--encre-doux);
    font-size: 1.08rem;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Savoir-faire */
.savoir-faire { padding: 30px 0 80px; }
.grille-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.carte-sf {
    background: var(--blanc);
    border-radius: 18px;
    padding: 30px 26px;
    border: 1px solid rgba(34, 28, 46, 0.06);
    border-top: 4px solid var(--carte-couleur, var(--accent));
    transition: transform .2s ease, box-shadow .2s ease;
}
.carte-sf:hover {
    transform: translateY(-5px) rotate(-0.5deg);
    box-shadow: 0 18px 40px rgba(34, 28, 46, 0.12);
}
.carte-sf:nth-child(1) { --carte-couleur: var(--or); }
.carte-sf:nth-child(2) { --carte-couleur: var(--accent); }
.carte-sf:nth-child(3) { --carte-couleur: var(--violet); }
.carte-sf h2 { font-size: 1.3rem; margin: 14px 0 10px; }
.carte-sf p { color: var(--encre-doux); font-size: 0.95rem; }
.pastille {
    display: inline-block;
    font-weight: 600;
    color: var(--carte-couleur, var(--accent));
    border: 1px solid var(--carte-couleur, var(--accent));
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 0.8rem;
}

/* Nos realisations */
.realisations { padding: 20px 0 80px; }
.realisations h2 { font-size: 2rem; margin-bottom: 12px; }
.realisations-intro { color: var(--encre-doux); max-width: 640px; margin-bottom: 30px; }
.galerie { columns: 3 260px; column-gap: 18px; }
.galerie figure {
    position: relative;
    margin: 0 0 18px;
    break-inside: avoid;
    border-radius: 14px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--encre);
}
.galerie img { display: block; width: 100%; height: auto; transition: transform .3s ease, opacity .3s ease; }
.galerie figure:hover img { transform: scale(1.04); opacity: .85; }
.galerie figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 34px 16px 12px;
    background: linear-gradient(transparent, rgba(20, 16, 12, 0.85));
    color: var(--creme);
    font-size: 0.92rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity .25s ease;
}
.galerie figure:hover figcaption { opacity: 1; }
.galerie figcaption span {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(245, 241, 232, 0.75);
}

/* Visionneuse plein ecran */
.visionneuse[hidden] { display: none; }
.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(15, 12, 9, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    cursor: zoom-out;
}
.visionneuse figure { margin: 0; max-width: 92vw; max-height: 90vh; text-align: center; }
.visionneuse img {
    max-width: 92vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.visionneuse figcaption { color: var(--creme); margin-top: 12px; font-size: 0.95rem; }
.visionneuse-fermer {
    position: fixed;
    top: 16px;
    right: 22px;
    background: none;
    border: none;
    color: var(--creme);
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
}
.visionneuse-fermer:hover { opacity: 1; }

/* Ils nous ont fait confiance */
.confiance { padding: 10px 0 80px; text-align: center; }
.logos-confiance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px 54px;
    margin-top: 30px;
}
.logos-confiance img {
    height: 62px;
    width: auto;
    filter: grayscale(1) opacity(0.65);
    transition: filter .25s ease, transform .25s ease;
}
.logos-confiance img:hover {
    filter: none;
    transform: scale(1.06);
}
@media (max-width: 820px) {
    .logos-confiance { gap: 20px 32px; }
    .logos-confiance img { height: 44px; }
}

/* Bandeau proposition */
.bandeau-proposition {
    background:
        radial-gradient(90% 160% at 12% 0%, rgba(232, 93, 58, 0.35), transparent 55%),
        radial-gradient(80% 150% at 95% 100%, rgba(122, 79, 191, 0.5), transparent 60%),
        var(--encre);
    color: var(--creme);
    padding: 60px 0;
}
.bandeau-int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.bandeau-int h2 { font-size: 1.7rem; margin-bottom: 8px; }
.bandeau-int p { color: rgba(245, 241, 232, 0.75); max-width: 520px; }
.bandeau-proposition .bouton-plein {
    background: var(--creme);
    color: var(--encre);
    border-color: var(--creme);
}
.bandeau-proposition .bouton-plein:hover { background: var(--accent); border-color: var(--accent); color: var(--blanc); }

/* Contact */
.contact { padding: 90px 0; }
.contact-int {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    align-items: start;
}
.contact-texte h2 { font-size: 2rem; margin-bottom: 14px; }
.contact-texte p { color: var(--encre-doux); }

.formulaire { display: flex; flex-direction: column; gap: 18px; }
.formulaire label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 500;
    font-size: 0.9rem;
    flex: 1;
}
.formulaire input, .formulaire textarea {
    font-family: var(--police-texte);
    font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid rgba(28, 26, 23, 0.2);
    border-radius: 10px;
    background: var(--blanc);
    color: var(--encre);
}
.formulaire input:focus, .formulaire textarea:focus {
    outline: 2px solid var(--accent);
    border-color: var(--accent);
}
.ligne-2 { display: flex; gap: 18px; }
.formulaire .bouton { align-self: flex-start; }
.champ-piege { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }

.message-merci {
    background: var(--blanc);
    border: 1px solid rgba(28, 26, 23, 0.08);
    border-left: 4px solid var(--accent);
    border-radius: 14px;
    padding: 30px;
}
.message-merci h3 { margin-bottom: 8px; }

/* Pied de page */
.pied {
    border-top: 1px solid rgba(28, 26, 23, 0.1);
    padding: 26px 0;
    font-size: 0.85rem;
    color: var(--encre-doux);
}
.pied-int { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pied-int span:first-child { letter-spacing: 0.25em; font-weight: 600; }

/* Portail propositions */
.portail {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.portail-carte {
    background: var(--blanc);
    border-radius: 22px;
    padding: 46px 42px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(28, 26, 23, 0.07);
    box-shadow: 0 24px 60px rgba(28, 26, 23, 0.08);
}
.portail-carte .logo { display: inline-block; margin-bottom: 26px; }
.portail-carte h1 { font-size: 1.6rem; margin-bottom: 10px; }
.portail-carte > p { color: var(--encre-doux); margin-bottom: 26px; font-size: 0.95rem; }
.portail-carte form { display: flex; flex-direction: column; gap: 14px; }
.portail-carte input[type="text"] {
    font-size: 1.15rem;
    text-align: center;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 14px;
    border: 1px solid rgba(28, 26, 23, 0.2);
    border-radius: 12px;
}
.portail-carte input[type="text"]:focus { outline: 2px solid var(--accent); }
.erreur {
    background: #FBEAE5;
    color: #8C2F1B;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
}
.portail-retour {
    display: block;
    margin-top: 22px;
    color: var(--encre-doux);
    font-size: 0.88rem;
}

/* Admin */
.admin { padding: 50px 0 80px; }
.admin h1 { margin-bottom: 30px; }
.admin h2 { margin: 40px 0 16px; font-size: 1.4rem; }
.fiche {
    background: var(--blanc);
    border: 1px solid rgba(28, 26, 23, 0.08);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 14px;
}
.fiche-date { color: var(--accent); font-weight: 600; font-size: 0.85rem; }
.fiche dl { display: grid; grid-template-columns: 160px 1fr; gap: 4px 14px; margin-top: 10px; }
.fiche dt { font-weight: 600; font-size: 0.88rem; color: var(--encre-doux); }
.fiche dd { font-size: 0.95rem; white-space: pre-wrap; }
.fiche ul { margin: 6px 0 0 18px; }

/* Responsive */
@media (max-width: 820px) {
    .grille-3 { grid-template-columns: 1fr; }
    .contact-int { grid-template-columns: 1fr; gap: 30px; }
    .ligne-2 { flex-direction: column; }
    .hero { padding: 70px 0 60px; }
    .fiche dl { grid-template-columns: 1fr; }
}