/* Page « Qui sommes-nous ? » (bin/qui-sommes-nous-page.php) — classes qs-* ; cohérent avec la page « À propos » (a-propos.css) */
/* police manuscrite Caveat (licence OFL), hébergée sur le site : bin/citation-manuscrite.php */
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/caveat-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/caveat-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.qs { padding-top: clamp(2rem, 5vw, 3.5rem); }
.qs > .container > * + * { margin-top: clamp(2.75rem, 5.5vw, 4rem); }
.qs h2, .qs h3 { text-wrap: balance; }
.qs .btn { gap: 0.45rem; }
.qs-h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--c-deep); }
.qs-text { font-size: 1.08rem; line-height: 1.7; }
.qs-text > :last-child { margin-bottom: 0; }
.qs-text + * , .qs-points + *, .qs-quote + *, .qs-contact + * { margin-top: 1.5rem; }

/* 1re partie : photo à gauche, texte à droite (ordinateur) ; photo au-dessus (téléphone) */
.qs-first { display: grid; gap: 2.25rem 2.75rem; align-items: start; }
@media (min-width: 48em) { .qs-first { grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); } }
.qs-photo { position: relative; margin: 0; isolation: isolate; }
.qs-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 14px; box-shadow: 0 18px 40px rgba(69, 9, 15, 0.16); }
.qs-photo::after { content: ""; position: absolute; left: 1.25rem; right: -0.75rem; bottom: -0.75rem; top: 1.25rem; z-index: -1; border: 3px solid var(--c-amber); border-radius: 14px; }
.qs-photo__mono { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; font-family: var(--font-display); font-size: clamp(5rem, 12vw, 8rem); font-weight: 800; color: #fff; border-radius: 14px;
    background: radial-gradient(120% 140% at 100% 0%, #9c1a2c 0%, var(--c-sign) 40%, var(--c-deep) 100%); }
@media (max-width: 47.999em) {
    .qs-photo { width: 100%; max-width: 18rem; margin-inline: auto; }
    .qs-photo img, .qs-photo__mono { aspect-ratio: 1 / 1; }
}

/* « Ma façon de voyager » : encadrés de même largeur */
.qs-points { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .qs-points { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
@media (min-width: 64em) { .qs-points:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qs-points:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qs-point { display: flex; flex-direction: column; padding: 1.5rem; background: var(--c-mist); border-top: 4px solid var(--c-amber); border-radius: var(--radius); }
.qs-point__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; border-radius: 50%; background: #fff; color: var(--c-sign); }
.qs-point h3 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--c-deep); }
.qs-point p { margin: 0; line-height: 1.55; }

/* citation */
.qs-quote { margin: 0; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem); background: #fff; border-left: 6px solid var(--c-amber); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: 0 10px 30px rgba(69, 9, 15, 0.07); }
.qs-quote blockquote { margin: 0; }
.qs-quote p { position: relative; margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 2.8vw, 1.9rem); font-weight: 600; line-height: 1.35; color: var(--c-deep); }
.qs-quote p::before { content: "“"; margin-right: 0.15em; color: var(--c-amber); }
.qs-quote p::after { content: "”"; margin-left: 0.1em; color: var(--c-amber); }
.qs-quote figcaption { margin-top: 0.75rem; font-weight: 700; color: var(--c-sign); }

/* coordonnées : 2 boutons de même taille */
.qs-contact { display: grid; gap: 0.75rem; max-width: 46rem; margin-bottom: 0; }
@media (min-width: 40em) { .qs-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qs-contact .btn { width: 100%; justify-content: center; text-align: center; overflow-wrap: anywhere; }
.qs-contact .btn svg { flex: none; width: 1.25rem; height: 1.25rem; }

/* signature */
.qs-sign { display: flex; flex-direction: column; gap: 0.1rem; margin: 2rem 0 0; font-size: 1.08rem; }
.qs-sign__name { font-family: "Segoe Script", "Brush Script MT", "Apple Chancery", cursive; font-size: clamp(2.6rem, 6vw, 3.4rem); font-weight: 600; line-height: 1; color: var(--c-sign); transform: rotate(-3deg); transform-origin: left center; }

/* boutons sans a-propos-page */
.qs-cta { display: grid; gap: 0.75rem; max-width: 40rem; margin-bottom: 0; }
@media (min-width: 40em) { .qs-cta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qs-cta .btn { width: 100%; justify-content: center; }
.qs .ap-cta--plain { margin-top: clamp(2.75rem, 5.5vw, 4rem); }

/* cartes « En savoir plus » (même style que la page « À propos ») */
.qs-cards { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .qs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .qs-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qs-cards li { display: flex; }
.qs-card { display: flex; flex-direction: column; width: 100%; padding: 1.5rem; color: var(--c-ink); text-decoration: none; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.qs-card:hover, .qs-card:focus-visible { border-color: var(--c-sign); box-shadow: 0 10px 26px rgba(69, 9, 15, 0.1); transform: translateY(-2px); }
.qs-card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.9rem; border-radius: 50%; color: #fff; background: var(--c-sign); }
.qs-card__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--c-deep); }
.qs-card__text { margin: 0.4rem 0 1rem; line-height: 1.5; color: var(--c-muted); }
.qs-card__go { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; font-weight: 700; color: var(--c-sign); }
.qs-card__go svg { width: 1.1rem; height: 1.1rem; }

.qs-sign__svg { display: block; width: clamp(9rem, 22vw, 12rem); height: auto; }

/* retouche : 2e partie à côté de la photo, photo moins haute, espace avant la citation */
.qs-h2--next { margin-top: 2.25rem; }
@media (min-width: 48em) { .qs-first { grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr); } }
.qs-points + .qs-quote, .qs-text + .qs-quote { margin-top: 2.5rem; }

/* citation manuscrite, un peu plus petite */
.qs-quote p { font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-size: clamp(1.6rem, 3vw, 2.05rem); font-weight: 600; line-height: 1.3; color: var(--c-sign); }
.qs-quote p::before, .qs-quote p::after { font-family: var(--font-display); }