/* Maeva Boujot — design system (refonte 2026). Source : maquette, porté tel quel. */

/* ============================= 5. COMPOSANTS =========================== */

/* --- Boutons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--step-0);
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    transition:
        background-color 0.2s var(--ease),
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        transform 0.2s var(--ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: var(--forest);
    color: var(--white);
}

.btn--primary:hover {
    background: var(--forest-dark);
    color: var(--white);
}

.btn--accent {
    background: var(--terracotta);
    color: var(--white);
}

.btn--accent:hover {
    background: #74512f;
    color: var(--white);
}

.btn--ghost {
    background: transparent;
    color: var(--forest);
    border-color: var(--forest);
}

.btn--ghost:hover {
    background: var(--forest);
    color: var(--white);
}

.btn--on-dark {
    background: var(--white);
    color: var(--forest-dark);
}

.btn--on-dark:hover {
    background: var(--cream);
    color: var(--forest-dark);
}

.btn--ghost-on-dark {
    background: transparent;
    color: var(--white);
    border-color: rgb(255 255 255 / 55%);
}

.btn--ghost-on-dark:hover {
    background: rgb(255 255 255 / 12%);
    color: var(--white);
}

.btn--block {
    width: 100%;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

.btn-row--center {
    justify-content: center;
}

/* --- Cartes --- */
.card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid rgb(196 181 157 / 45%);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: var(--shadow-s);
    transition:
        box-shadow 0.25s var(--ease),
        transform 0.25s var(--ease);
}

.card h3 {
    margin-bottom: var(--space-2xs);
}

.card p {
    color: var(--muted);
}

.card__foot {
    margin-top: auto;
    padding-top: var(--space-m);
}

.card--link:hover,
.card--link:focus-within {
    box-shadow: var(--shadow-m);
    transform: translateY(-3px);
}

/* Carte entièrement cliquable, sans emboîter les liens */
.card--link {
    position: relative;
}

.card--link .stretched::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* --- Les 3 modalités (cœur de la page d'accueil) --- */
.mode-card {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--space-l) + 0.5rem);
}

.mode-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 5px;
    background: var(--sage-soft);
}

.mode-card--cabinet::before {
    background: var(--terracotta-soft);
}

.mode-card--domicile::before {
    background: var(--sage-soft);
}

.mode-card--visio::before {
    background: var(--forest);
}

.mode-card__icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-m);
    background: var(--forest-soft);
    color: var(--forest);
    margin-bottom: var(--space-s);
}

/* <dl> : chaque paire est enveloppée dans un <div> — un <li> dans une <dl>
   serait invalide et mal restitué par les lecteurs d'écran. */
.mode-card__meta {
    margin: var(--space-s) 0 0;
    padding: 0;
    font-size: var(--step--1);
    color: var(--muted);
}

.mode-card__meta > div {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid rgb(196 181 157 / 40%);
}

.mode-card__meta dt {
    flex: none;
    min-width: 4.2rem;
    font-weight: 600;
    color: var(--ink);
}

.mode-card__meta dd {
    margin: 0;
}

/* --- Badge / étiquette --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 600;
    background: var(--terracotta);
    color: var(--white);
}

.badge--soft {
    background: var(--forest-soft);
    color: var(--forest-dark);
}

/* --- Tuiles thématiques (maillage interne) --- */
.tile {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s) var(--space-m);
    background: var(--white);
    border: 1px solid rgb(196 181 157 / 45%);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
    transition:
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.tile:hover {
    border-color: var(--forest);
    box-shadow: var(--shadow-s);
    transform: translateY(-2px);
    color: var(--forest-dark);
}

.tile svg {
    color: var(--sage);
}

/* --- Liste à puces cochées --- */

/* La puce est positionnée en absolu, pas en flex : un <li> en display:flex
   coupe son contenu en autant d'items que d'éléments et de nœuds texte, ce
   qui plaçait « <strong>Titre.</strong> suite du texte » sur deux colonnes. */
.checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checklist li {
    position: relative;
    padding: 0.3rem 0 0.3rem 1.75rem;
}

.checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--forest-soft)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d5a47' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
        center / 0.7rem no-repeat;
}

.section--forest .checklist li::before {
    background-color: rgb(255 255 255 / 18%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* --- Étapes numérotées --- */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.steps > li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--space-s);
    padding-block: var(--space-s);
    border-top: 1px solid rgb(196 181 157 / 50%);
}

.steps > li:first-child {
    border-top: 0;
}

.steps > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--forest);
    color: var(--white);
    font-family: var(--font-title);
    font-size: var(--step-1);
    font-weight: 600;
}

.steps h3 {
    font-size: var(--step-1);
    font-family: var(--font-body);
    margin-bottom: 0.15rem;
}

.steps p {
    color: var(--muted);
    margin: 0;
}

/* --- Tarifs --- */
.price {
    font-family: var(--font-title);
    font-size: var(--step-3);
    font-weight: 700;
    color: var(--forest-dark);
    line-height: 1;
}

.price small {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--muted);
}

/* --- Accordéon (FAQ) --- */
.accordion {
    border-top: 1px solid var(--sand);
}

.accordion__item {
    border-bottom: 1px solid var(--sand);
}

.accordion__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: var(--space-s) 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--forest-dark);
}

.accordion__btn svg {
    transition: transform 0.25s var(--ease);
    color: var(--terracotta);
}

.accordion__btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.accordion__panel {
    padding: 0 0 var(--space-m);
    color: var(--muted);
    max-width: 68ch;
}

.accordion__panel[hidden] {
    display: none;
}

/* --- Témoignages --- */
.quote {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid rgb(196 181 157 / 45%);
    border-radius: var(--radius-l);
    padding: var(--space-l);
}

.quote__stars {
    color: var(--terracotta-soft);
    letter-spacing: 0.12em;
    margin-bottom: var(--space-xs);
}

.quote blockquote {
    margin: 0 0 var(--space-m);
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--ink);
    line-height: 1.7;
}

.quote figcaption {
    margin-top: auto;
    font-size: var(--step--1);
    color: var(--muted);
}

.quote figcaption strong {
    display: block;
    color: var(--ink);
    font-size: var(--step-0);
}

/* --- Contenu tiers sous consentement (calendrier Cal.com) ----------------
   Motif « click-to-load » : aucun script tiers, aucun cookie, aucune requête
   vers le service tant que la personne n'a pas cliqué. C'est la solution
   recommandée par la CNIL quand on veut éviter un bandeau bloquant.
   ---------------------------------------------------------------------- */
.consent-embed {
    border: 1px dashed var(--sand);
    border-radius: var(--radius-l);
    background: var(--white);
    padding: var(--space-l);
    text-align: center;
}

.consent-embed--loaded {
    border-style: solid;
    border-color: rgb(196 181 157 / 45%);
    padding: var(--space-m);
    text-align: left;
}

.consent-embed__ask {
    max-width: 34rem;
    margin-inline: auto;
}

.consent-embed__ask h3 {
    font-size: var(--step-1);
    font-family: var(--font-body);
}

.consent-embed__note {
    font-size: var(--step--1);
    color: var(--muted);
    margin-top: var(--space-s);
}

.consent-embed__slot[hidden] {
    display: none;
}

.consent-embed__slot {
    min-height: 12rem;
}

.reviews-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--step--1);
}

/* --- Formulaires --- */
.field {
    display: block;
    margin-bottom: var(--space-m);
}

.field > span {
    display: block;
    margin-bottom: 0.35rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--forest-dark);
}

.field > span em {
    font-style: normal;
    font-weight: 400;
    color: var(--muted);
}

.field input,
.field textarea,
.field select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius-m);
    background: var(--white);
    color: var(--ink);
    font-size: var(--step-0);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--forest);
    outline: 3px solid rgb(61 90 71 / 20%);
    outline-offset: 0;
}

.field textarea {
    min-height: 9rem;
    resize: vertical;
}

.field--row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-s);
}

@media (width <= 40rem) {
    .field--row {
        grid-template-columns: 1fr;
    }
}

.field--check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: var(--step--1);
}

.field--check input {
    width: auto;
    margin-top: 0.2rem;
}

/* --- Lecteur audio (extrait offert) --- */
.audiobox {
    background: var(--cream);
    border: 1px solid var(--sand);
    border-radius: var(--radius-l);
    padding: var(--space-m);
}

.audiobox__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 var(--space-s);
    font-weight: 600;
    color: var(--forest-dark);
}

.audiobox__label svg {
    color: var(--sage);
}

.audiobox audio {
    width: 100%;
    display: block;
    accent-color: var(--forest);
}

.audiobox__meta {
    margin: var(--space-s) 0 0;
    font-size: var(--step--1);
    color: var(--muted);
}

/* --- Bandeau de mise en avant (cabinet de Pérols) --- */
.banner {
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) 1fr;
    gap: 0;
    background: var(--green);
    color: var(--white);
    border-radius: var(--radius-l);
    overflow: hidden;
}

.banner__media {
    background: var(--beige);
    min-height: 100%;
}

.banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner__body {
    padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
    align-self: center;
}

.banner__body h2 {
    color: var(--white);
    margin-bottom: 0.5rem;
    font-size: var(--step-3);
}

.banner__body p {
    color: rgb(255 255 255 / 92%);
    max-width: 46ch;
}

.banner__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: var(--space-s) 0 var(--space-m);
    font-size: var(--step--1);
    color: rgb(255 255 255 / 92%);
}

.banner__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.banner__meta svg {
    color: var(--cream);
}

@media (width <= 52rem) {
    .banner {
        grid-template-columns: 1fr;
    }

    .banner__media {
        aspect-ratio: 16 / 9;
    }
}

/* --- Onglets (réservation par lieu) --- */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--space-l);
}

.tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--ink);
    transition:
        background-color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        color 0.2s var(--ease);
}

.tabs__btn:hover {
    border-color: var(--forest);
    background: var(--forest-soft);
}

.tabs__btn[aria-selected="true"] {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--white);
}

.tabs__btn[aria-selected="true"] svg {
    color: var(--white);
}

.tabpanel[hidden] {
    display: none;
}

/* --- Blog : grille de vignettes ---------------------------------------
   Même principe que les références citées (cabinet-infirmier-lunel.fr) :
   image 1200×630, catégorie, titre cliquable, lien « lire l'article ».
   ---------------------------------------------------------------------- */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--space-l);
}

.chip {
    padding: 0.45rem 1rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink);
    transition:
        background-color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        color 0.2s var(--ease);
}

.chip:hover {
    border-color: var(--forest);
    background: var(--forest-soft);
}

.chip[aria-pressed="true"] {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--white);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-m);
}

@media (width <= 62rem) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width <= 40rem) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

.post {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--white);
    border: 1px solid rgb(196 181 157 / 45%);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-s);
    transition:
        box-shadow 0.25s var(--ease),
        transform 0.25s var(--ease);
}

.post:hover,
.post:focus-within {
    box-shadow: var(--shadow-m);
    transform: translateY(-3px);
}

.post[hidden] {
    display: none;
}

.post__media {
    display: block;
    aspect-ratio: 1200 / 630;
    background: var(--beige);
    overflow: hidden;
}

.post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.post:hover .post__media img {
    transform: scale(1.04);
}

.post__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-m);
}

.post__tag {
    align-self: flex-start;
    margin-bottom: var(--space-2xs);
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--forest-soft);
    color: var(--forest-dark);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.post__title {
    font-size: var(--step-1);
    line-height: 1.3;
    margin-bottom: var(--space-2xs);
}

.post__title a {
    color: var(--forest-dark);
    text-decoration: none;
}

.post__title a:hover {
    text-decoration: underline;
}

.post__excerpt {
    font-size: var(--step--1);
    color: var(--muted);
}

.post__more {
    margin-top: auto;
    padding-top: var(--space-s);
    font-size: var(--step--1);
    font-weight: 600;
}

.post__meta {
    font-size: 0.75rem;
    color: var(--muted);
    margin-top: var(--space-2xs);
}

/* --- Fil d'Ariane --- */
.breadcrumb {
    padding-block: var(--space-s);
    font-size: var(--step--1);
}

.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}

.breadcrumb li + li::before {
    content: "›";
    margin-right: 0.4rem;
    color: var(--sand);
}

.breadcrumb a {
    color: var(--muted);
}

.breadcrumb [aria-current] {
    color: var(--ink);
    font-weight: 500;
}

/* --- Encart d'information --- */
.callout {
    display: flex;
    gap: var(--space-s);
    padding: var(--space-m);
    background: var(--forest-soft);
    border-radius: var(--radius-m);
    border-left: 4px solid var(--forest);
    color: var(--ink);
}

.callout svg {
    color: var(--forest);
}

.callout--warm {
    background: #f6ece0;
    border-left-color: var(--terracotta);
}

.callout--warm svg {
    color: var(--terracotta);
}

/* --- Liste de communes (maillage local) --- */
.town-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.town-list a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--sand);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--ink);
    transition:
        border-color 0.2s var(--ease),
        background-color 0.2s var(--ease);
}

.town-list a:hover {
    border-color: var(--forest);
    background: var(--forest-soft);
    color: var(--forest-dark);
}

.town-list span {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 55%);
    font-size: var(--step--1);
    color: var(--muted);
}

/* --- Hero -------------------------------------------------------------
   Fond vert de marque avec la forme organique du site actuel, reprise en
   dégradé conique doux plutôt qu'en image : rien à charger, net à toutes
   les tailles. ------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;

    /* La couleur de fond est déclarée à part : si les dégradés ne rendent pas,
     le texte blanc reste sur du vert et non sur le crème du body. */
    background-color: var(--green);
    background-image: linear-gradient(
        158deg,
        var(--green-deep) 0%,
        var(--green) 52%,
        var(--green-deep) 100%
    );
    color: var(--white);
}

.hero > * {
    position: relative;
}

.hero h1,
.hero h2 {
    color: var(--white);
}

.hero .eyebrow {
    color: var(--cream);
} /* le sable échoue AA sur le vert */
.hero .lede {
    color: rgb(255 255 255 / 92%);
    margin-bottom: var(--space-l);
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-xl);
    align-items: center;
    padding-block: var(--space-2xl);
}

/* En-tête sans photo : une seule colonne, texte contenu en largeur de lecture */
.hero__inner--solo {
    grid-template-columns: 1fr;
}

.hero__inner--solo > div {
    max-width: 44rem;
}

.hero__media {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--cream);
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-l);
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero h1 {
    margin-bottom: var(--space-m);
}

.hero .lede strong {
    color: var(--white);
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    margin-top: var(--space-l);
    padding-top: var(--space-m);
    border-top: 1px solid rgb(255 255 255 / 25%);
    font-size: var(--step--1);
    color: rgb(255 255 255 / 92%); /* 82 % tombait à 4,33:1, sous le seuil AA */
}

.hero__trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.hero__trust svg {
    color: var(--cream);
}

/* Variante claire, si une page doit démarrer sur fond crème */
.hero--light {
    background: var(--white);
    color: var(--ink);
}

.hero--light::before {
    display: none;
}

.hero--light h1 {
    color: var(--forest-dark);
}

.hero--light .eyebrow {
    color: var(--terracotta);
}

.hero--light .lede {
    color: var(--muted);
}

.hero--light .lede strong {
    color: var(--forest-dark);
}

.hero--light .hero__trust {
    border-top-color: var(--sand);
    color: var(--muted);
}

.hero--light .hero__trust svg {
    color: var(--sage);
}

.hero--light .hero__media {
    background: var(--beige);
}

@media (width <= 56rem) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: var(--space-l);
    }

    .hero__media {
        aspect-ratio: 3 / 2;
        order: -1;
    }
}

/* Placeholder visuel tant que les photos ne sont pas fournies */
.placeholder {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    min-height: 12rem;
    padding: var(--space-m);
    background:
        repeating-linear-gradient(
            45deg,
            rgb(196 181 157 / 18%) 0 12px,
            transparent 12px 24px
        ),
        var(--beige);
    color: var(--muted);
    font-size: var(--step--1);
    text-align: center;
}

.placeholder strong {
    color: var(--forest-dark);
    font-size: var(--step-0);
}