/* Feuille de style du site public — Céline DELATTRE, Psychologue */

/* Police Dosis hébergée localement (identité visuelle de l'ancien site) */
@font-face { font-family: "Dosis"; font-weight: 400; font-display: swap; src: url("../fonts/dosis-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Dosis"; font-weight: 500; font-display: swap; src: url("../fonts/dosis-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Dosis"; font-weight: 600; font-display: swap; src: url("../fonts/dosis-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Dosis"; font-weight: 700; font-display: swap; src: url("../fonts/dosis-latin-700-normal.woff2") format("woff2"); }

:root {
    /* Palette orchidée / lilas pastel commune avec patgest */
    --pg-rose: #a0388f;
    --pg-rose-fonce: #7f2a72;
    --pg-prune: #4a2346;
    --pg-prune-fonce: #3c1838;
    --pg-orchidee: #f4b4e6;
    --pg-lilas: #d4bdf0;
    --pg-rose-pale: #f8e8f5;
    --pg-rose-clair: #eec3e6;
    --pg-lilas-pale: #efe4f6;

    --encre: #1f1a1d;
    --fond: #f6f3fa;
    --surface: #ffffff;
    --accent: var(--pg-rose);
    --accent-fonce: var(--pg-rose-fonce);
    --accent-clair: var(--pg-rose-pale);
    --texte-doux: #5f555a;
    --bordure: #ebe3f0;
    --bs-body-color: var(--encre);
    --bs-body-bg: var(--fond);
    --bs-primary: var(--pg-rose);
    --bs-primary-rgb: 160, 56, 143;
    --bs-link-color: var(--pg-rose);
    --bs-link-color-rgb: 160, 56, 143;
    --bs-link-hover-color: var(--pg-rose-fonce);
    --bs-link-hover-color-rgb: 127, 42, 114;
    --bs-focus-ring-color: rgba(160, 56, 143, .25);
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { font-size: 1.0625rem; line-height: 1.7; }

h1, h2, h3, h4, .h5, .h6, .marque, .navbar, .btn, .pied-titre {
    font-family: "Dosis", var(--bs-body-font-family);
}
h1, h2, h3 { font-weight: 600; letter-spacing: .01em; }
h2 { font-size: 1.6rem; margin-top: 2.2rem; margin-bottom: 1rem; color: var(--accent-fonce); }
h2:first-child { margin-top: 0; }

.lien-evitement { position: absolute; top: .5rem; left: .5rem; z-index: 2000; padding: .5rem 1rem; background: var(--surface); }

/* Boutons */
.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-fonce);
    --bs-btn-hover-border-color: var(--accent-fonce);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-fonce);
    --bs-btn-active-border-color: var(--accent-fonce);
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: 2rem;
    padding-inline: 1.25rem;
}
.btn-primary {
    --bs-btn-bg: var(--pg-rose); --bs-btn-border-color: var(--pg-rose);
    --bs-btn-hover-bg: var(--pg-rose-fonce); --bs-btn-hover-border-color: var(--pg-rose-fonce);
    --bs-btn-active-bg: var(--pg-rose-fonce); --bs-btn-active-border-color: var(--pg-rose-fonce);
}
.btn-outline-primary {
    --bs-btn-color: var(--pg-rose); --bs-btn-border-color: var(--pg-rose);
    --bs-btn-hover-bg: var(--pg-rose); --bs-btn-hover-border-color: var(--pg-rose);
    --bs-btn-active-bg: var(--pg-rose-fonce); --bs-btn-active-border-color: var(--pg-rose-fonce);
}
.btn-contour {
    --bs-btn-color: var(--pg-rose-fonce);
    --bs-btn-border-color: var(--pg-rose-fonce);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--pg-rose-fonce);
    --bs-btn-hover-border-color: var(--pg-rose-fonce);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pg-rose-fonce);
    border-radius: 2rem;
    padding-inline: 1.25rem;
    font-weight: 600;
}

/* Barre de contact et navigation */
.barre-contact { background: linear-gradient(180deg, var(--pg-rose-pale), #ece2f6); border-bottom: 1px solid var(--bordure); font-size: .9rem; }
.barre-contact a { color: var(--pg-rose-fonce); text-decoration: none; }
.barre-contact a:hover { color: var(--pg-prune-fonce); text-decoration: underline; }

.entete-site { background: var(--surface); border-top: 3px solid var(--pg-orchidee); border-bottom: 1px solid var(--bordure); position: sticky; top: 0; z-index: 1020; }
.marque { display: flex; align-items: center; gap: .75rem; color: var(--encre); }
.marque:hover { color: var(--encre); }
.marque-psi { font-size: 2.2rem; line-height: 1; color: var(--accent); font-family: Georgia, "Times New Roman", serif; }
.marque-nom { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; line-height: 1.1; }
.marque-metier { display: block; font-size: .85rem; color: var(--texte-doux); white-space: normal; }
.navbar .nav-link { font-size: 1.05rem; font-weight: 500; color: var(--encre); padding-inline: .75rem !important; white-space: nowrap; }
.navbar .btn-accent { white-space: nowrap; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--accent); }
.navbar .nav-link.active { text-decoration: underline; text-underline-offset: .4rem; text-decoration-thickness: 2px; }

/* Accueil : bandeau d'introduction */
.accueil-hero { background: linear-gradient(160deg, #f7c6ec 0%, #e3c9f2 45%, #c8b8ea 100%); color: var(--pg-prune-fonce); overflow: hidden; }
.accueil-hero .hero-texte { padding-block: 3.5rem; }
.accueil-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .5rem; color: var(--pg-prune-fonce); }
.accueil-hero .hero-sous-titre { font-family: "Dosis", sans-serif; font-size: 1.35rem; color: var(--pg-prune); margin-bottom: 1.75rem; }
.accueil-hero .hero-lieu { color: var(--pg-prune); }
/* Portrait détouré posé directement sur le dégradé, coupe du buste au ras du bas du bandeau */
.hero-portrait { align-self: flex-end; display: flex; justify-content: center; padding-top: 2rem; }
.hero-portrait picture { display: block; }
.hero-portrait img { display: block; width: auto; height: min(33rem, 72vh); max-width: 100%; object-fit: contain; object-position: bottom; }
/* Portrait fondu dans le bandeau : légère transparence, blancs teintés par le fond (multiply) */
.hero-portrait img {
    opacity: .9;
    mix-blend-mode: multiply;
}

/* Bandeau de titre des pages intérieures */
.bandeau-titre { background: linear-gradient(180deg, var(--pg-rose-pale), var(--pg-lilas-pale)); border-bottom: 1px solid var(--bordure); padding-block: 2.25rem; }
.bandeau-titre h1 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.4rem); color: var(--pg-rose-fonce); }

/* Contenu */
.zone-contenu { padding-block: 3rem; }
.texte-page { max-width: 46rem; }
.texte-page p { margin-bottom: 1.1rem; }
.carte-douce { background: var(--surface); border: 1px solid var(--bordure); border-radius: 1rem; padding: 1.75rem; }
.citation-deonto { border-left: 4px solid var(--accent); background: var(--surface); padding: 1rem 1.25rem; margin: 0 0 1rem; border-radius: 0 .75rem .75rem 0; font-style: italic; }
.citation-deonto footer { font-style: normal; font-size: .9rem; color: var(--texte-doux); margin-top: .35rem; }
.liste-motifs { columns: 2 18rem; column-gap: 2rem; padding-left: 1.2rem; }
.liste-motifs li { break-inside: avoid; margin-bottom: .6rem; }
.etapes { counter-reset: etape; list-style: none; padding-left: 0; }
.etapes li { counter-increment: etape; position: relative; padding-left: 3rem; margin-bottom: 1rem; }
.etapes li::before { content: counter(etape); position: absolute; left: 0; top: .1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: "Dosis", sans-serif; font-weight: 700; }
.prix { font-family: "Dosis", sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--accent-fonce); line-height: 1; }
.psy-carte h2 { margin-top: 0; }
.symbole-psi { font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1; color: var(--accent); opacity: .85; }

/* Encart latéral « Le cabinet » */
.encart-cabinet { background: var(--surface); border: 1px solid var(--bordure); border-radius: 1rem; padding: 1.5rem; position: sticky; top: 6.5rem; }
.encart-cabinet h2 { margin-top: 0; color: var(--encre); font-weight: 700; }
.encart-psy { border-bottom: 1px solid var(--bordure); padding-bottom: .9rem; margin-bottom: .9rem; font-size: .95rem; }
.encart-psy h3 { font-weight: 700; margin-bottom: .35rem; }
.encart-psy a { text-decoration: none; word-break: break-word; }
.horaires { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; margin: .5rem 0 0; }
.horaires dt { font-weight: 600; }
.horaires dd { margin: 0; color: var(--texte-doux); }
.encart-cabinet address { font-size: .95rem; }

/* Livre d'or */
.temoignage { background: var(--surface); border: 1px solid var(--bordure); border-radius: 1rem; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; position: relative; }
.temoignage::before { content: "\201C"; position: absolute; top: -.35rem; left: 1rem; font-family: Georgia, serif; font-size: 3.5rem; color: var(--accent); opacity: .3; }
.temoignage blockquote { margin: 0 0 .75rem; font-style: italic; }
.temoignage figcaption { font-weight: 600; color: var(--accent-fonce); }
.temoignage figcaption time { font-weight: 400; color: var(--texte-doux); }
.pagination { --bs-pagination-color: var(--accent); --bs-pagination-active-bg: var(--accent); --bs-pagination-active-border-color: var(--accent); }

/* Formulaires */
.form-label { font-weight: 600; }
.form-control { background-color: var(--surface); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--pg-rose); box-shadow: 0 0 0 .2rem rgba(160, 56, 143, .2); }
.form-check-input:checked { background-color: var(--pg-rose); border-color: var(--pg-rose); }
.pot-de-miel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Pied de page */
.pied-site { background: linear-gradient(180deg, var(--pg-rose-pale), #ece2f6); color: var(--pg-prune-fonce); border-top: 1px solid var(--bordure); padding-block: 3rem 1.5rem; font-size: .95rem; margin-top: 2rem; }
.pied-site a { color: var(--pg-rose-fonce); text-decoration: none; }
.pied-site a:hover { color: var(--pg-prune-fonce); text-decoration: underline; }
.pied-titre { color: var(--pg-prune-fonce); font-weight: 600; font-size: 1.15rem; margin-bottom: .6rem; }
.pied-copyright { border-top: 1px solid rgba(74, 35, 70, .15); margin-top: 2rem; color: var(--pg-prune); padding-top: 1.25rem; font-size: .85rem; text-align: center; margin-bottom: 0; }

/* Écrans 1200-1399 px : menu horizontal resserré pour tenir sur une ligne */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar .nav-link { font-size: .95rem; padding-inline: .45rem !important; }
    .marque-metier { display: none; }
}

@media (max-width: 991.98px) {
    .encart-cabinet { position: static; }
    .accueil-hero .hero-texte { padding-bottom: 1rem; }
    .hero-portrait { padding-top: 0; }
    .hero-portrait img { height: 22rem; }
}