@charset "UTF-8";

/* ==========================================================================
   L'Opticien Avrillais — feuille de style principale
   Mobile-first. Aucun framework, aucune dépendance externe.
   ========================================================================== */

/* === ACCESSIBILITÉ (skip link, focus, reduced motion) =================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--sp-3);
    z-index: 999;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-navy);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: var(--sp-2);
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === VARIABLES (:root) — design tokens ================================== */

:root {
    /* Couleurs, relevées sur la maquette de l'ancien site. */
    --c-navy: #2d3c51;
    --c-navy-dark: #1e2937;
    --c-sage: #9dc4ad;          /* décoratif : filets, aplats, jamais du texte */
    --c-sage-text: #558b6e;     /* version lisible du sauge, pour les titres */
    --c-green: #81d742;         /* bouton principal */
    --c-green-dark: #6fbb35;
    --c-sky: #deedf4;           /* bandeau d'appel à l'action */
    --c-grey: #f8f7f7;          /* fond de la section formulaire */
    --c-grey-line: #e2e0e0;
    --c-dark: #333;             /* pied de page */
    --c-text: #55606e;
    --c-white: #fff;
    --c-star: #f0ad20;
    --c-error: #b3261e;
    --c-ok: #1c6b3f;
    --c-focus: #2d3c51;

    /* Typographie */
    --ff-title: "Playfair Display", Georgia, "Times New Roman", serif;
    --ff-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-body: 1rem;
    --fs-lead: 1.0625rem;
    --fs-over: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);   /* sur-titre serif */
    --fs-main: clamp(1.25rem, 0.95rem + 1.35vw, 2.125rem); /* titre vert */
    --lh-body: 1.75;

    /* Espacements */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 1rem;
    --sp-4: 1.5rem;
    --sp-5: 2rem;
    --sp-6: 3rem;
    --sp-7: 4.5rem;
    --sp-8: 6rem;

    /* Divers */
    --radius: 4px;
    --shell: 1200px;
    --t-fast: 0.2s ease;
    --t-slow: 0.4s ease;
    --shadow-card: 0 2px 18px rgb(45 60 81 / 8%);
    --header-h: 68px;
}

/* === RESET & BASE ======================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Décale les ancres pour qu'elles ne passent pas sous l'en-tête fixe. */
    scroll-padding-top: calc(var(--header-h) + var(--sp-3));
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--c-white);
    color: var(--c-text);
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    /* Compense la hauteur de l'en-tête fixe. */
    padding-top: var(--header-h);
}

img,
picture,
svg {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0 0 var(--sp-3);
}

/* === TYPOGRAPHIE ======================================================== */

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display-var.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/fira-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/fira-sans-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/fira-sans-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fira Sans";
    src: url("../fonts/fira-sans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Titre composé : un sur-titre serif, puis le titre vert en capitales. */
.title {
    margin: 0 0 var(--sp-4);
    font-weight: 400;
}

.title__over,
.title__main {
    display: block;
}

.title__over {
    color: var(--c-navy);
    font-family: var(--ff-title);
    font-size: var(--fs-over);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.01em;
}

.title__main {
    margin-top: var(--sp-2);
    color: var(--c-sage-text);
    font-family: var(--ff-body);
    font-size: var(--fs-main);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.title--center {
    text-align: center;
}

.lead {
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
}

.lead--left {
    margin-inline: 0;
    text-align: left;
}

/* === NAVIGATION ========================================================= */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    height: var(--header-h);
    background: var(--c-white);
    border-bottom: 1px solid var(--c-grey-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: 100%;
}

.site-header__logo {
    flex: 0 0 auto;
    line-height: 0;
}

.site-header__logo img {
    width: auto;
    height: 34px;
}

.burger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--c-navy);
    cursor: pointer;
}

.burger__bars,
.burger__bars::before,
.burger__bars::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentcolor;
    transition: transform var(--t-fast), opacity var(--t-fast);
}

.burger__bars::before,
.burger__bars::after {
    content: "";
    position: absolute;
}

.burger__bars::before {
    transform: translateY(-7px);
}

.burger__bars::after {
    transform: translateY(7px);
}

.burger[aria-expanded="true"] .burger__bars {
    background: transparent;
}

.burger[aria-expanded="true"] .burger__bars::before {
    transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bars::after {
    transform: rotate(-45deg);
}

.nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.nav__list a {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-navy);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--t-fast);
}

.nav__list a:hover,
.nav__list a[aria-current="true"] {
    color: var(--c-sage-text);
}

.nav__cta {
    color: var(--c-navy) !important;
    border: 1px solid var(--c-navy);
    border-radius: var(--radius);
}

.nav__cta:hover {
    background: var(--c-navy);
    color: var(--c-white) !important;
}

/* État replié : appliqué par le JS uniquement (sans JS, le menu reste ouvert). */
.nav.is-collapsed {
    position: absolute;
    inset: var(--header-h) 0 auto;
    padding: var(--sp-3);
    background: var(--c-white);
    border-bottom: 1px solid var(--c-grey-line);
    box-shadow: var(--shadow-card);
}

.nav.is-collapsed[hidden] {
    display: none;
}

/* === HERO =============================================================== */

.hero img {
    width: 100%;
    /*
       Le format d'origine (16/10) donne une bande trop basse sur un
       téléphone : à 390 px de large, l'image ne ferait que 238 px de haut.
       On la recadre en 4/3 sur mobile et tablette pour lui rendre de la
       présence, et on rétablit ses proportions natives sur grand écran.
    */
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    object-fit: cover;
    object-position: center;
}

/* === SECTIONS & LAYOUT ================================================== */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--sp-3);
}

.shell--narrow {
    max-width: 860px;
}

.shell--form {
    max-width: 760px;
}

.section {
    padding-block: var(--sp-6);
}

.section--concept {
    padding-block: var(--sp-6) var(--sp-5);
}

.section--avis {
    position: relative;
    background: var(--c-sky) url("../img/fond-avis-1204.jpg") center / cover no-repeat;
}

.section--contact {
    background: var(--c-grey);
}

.duo {
    display: grid;
    gap: var(--sp-5);
}

.duo__media img {
    margin-inline: auto;
}

/* === COMPOSANT : bandeau d'appel à l'action ============================= */

.callout {
    position: relative;
    overflow: hidden;
    padding-block: var(--sp-6);
    background: var(--c-sky);
}

/* Mot en filigrane, repris de la maquette d'origine. Purement décoratif. */
.callout__ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 130%;
    margin: 0;
    color: rgb(45 60 81 / 4%);
    font-family: var(--ff-body);
    font-size: clamp(3rem, 11vw, 9rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    user-select: none;
}

.callout__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--sp-4);
    place-items: center;
    text-align: center;
}

.callout__title {
    margin: 0;
    color: var(--c-navy);
    font-family: var(--ff-body);
    font-size: clamp(1rem, 0.85rem + 0.75vw, 1.375rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.7;
    text-transform: uppercase;
}

.callout__action {
    margin: 0;
}

/* === COMPOSANT : avis clients =========================================== */

.avis {
    display: grid;
    gap: var(--sp-4);
    margin-block: var(--sp-5);
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: var(--sp-4);
    background: var(--c-white);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.card__img {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--sp-3);
    padding: var(--sp-2);
    background: var(--c-grey);
    border-radius: 50%;
    object-fit: contain;
}

.card__quote {
    flex: 1 1 auto;
    margin: 0 0 var(--sp-3);
    color: var(--c-navy);
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.7;
}

.card__quote p {
    margin: 0;
}

.card__foot {
    margin-top: auto;
}

.card__author {
    margin: 0;
    color: var(--c-navy);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stars {
    display: flex;
    gap: 2px;
    justify-content: center;
    margin: 0 0 var(--sp-2);
}

.stars__icon {
    width: 16px;
    height: 16px;
    fill: var(--c-star);
}

.stars__icon.is-empty {
    fill: var(--c-grey-line);
}

.badge-google {
    display: flex;
    justify-content: center;
    margin: 0;
}

.badge-google a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-white);
    box-shadow: var(--shadow-card);
    color: var(--c-navy);
    font-size: 0.8125rem;
    text-decoration: none;
    transition: box-shadow var(--t-fast);
}

.badge-google a:hover {
    box-shadow: 0 4px 22px rgb(45 60 81 / 18%);
}

.badge-google__label {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.badge-google__note {
    font-weight: 700;
}

.badge-google .stars {
    margin: 0;
}

.badge-google__count {
    color: var(--c-text);
}

/* === COMPOSANT : formulaire ============================================= */

.form {
    display: grid;
    gap: var(--sp-4);
}

.field {
    display: grid;
    gap: var(--sp-1);
}

.field label {
    color: var(--c-navy);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.field__hint {
    color: var(--c-text);
    font-weight: 400;
    text-transform: none;
}

.req {
    color: var(--c-error);
}

.field input,
.field textarea {
    width: 100%;
    /* 16px minimum : en dessous, Safari iOS zoome à la mise au point. */
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--c-white);
    border: 1px solid var(--c-grey-line);
    border-radius: var(--radius);
    color: var(--c-navy);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.field textarea {
    min-height: 140px;
    resize: vertical;
}

.field input:hover,
.field textarea:hover {
    border-color: var(--c-sage);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
    border-color: var(--c-error);
}

.field__error {
    margin: 0;
    color: var(--c-error);
    font-size: 0.875rem;
    font-weight: 500;
}

.form__legal {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.form__submit {
    margin: 0;
}

/* Champ leurre anti-robot : retiré de l'affichage sans display:none,
   que certains robots savent détecter. */
/* Leurre des formulaires publics : hors écran, ni display:none ni style inline */
.form-extra {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert {
    margin: 0 0 var(--sp-4);
    padding: var(--sp-3);
    border-left: 4px solid;
    border-radius: var(--radius);
    font-size: 0.9375rem;
}

.alert--ok {
    background: #eef7f1;
    border-color: var(--c-ok);
    color: var(--c-ok);
}

.alert--error {
    background: #fdeeed;
    border-color: var(--c-error);
    color: var(--c-error);
}

/* === COMPOSANT : bande d'informations =================================== */

.infos {
    padding-block: var(--sp-6);
    background: var(--c-white);
}

.infos__list {
    display: grid;
    gap: var(--sp-4);
}

.infos__item {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
}

.infos__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 1px solid var(--c-grey-line);
    fill: none;
    stroke: var(--c-navy);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.infos__title {
    margin: 0 0 var(--sp-1);
    color: var(--c-navy);
    font-family: var(--ff-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.infos__text {
    margin: 0;
    font-size: 0.9375rem;
}

.infos__text a {
    color: var(--c-text);
    text-decoration-color: var(--c-sage);
    text-underline-offset: 3px;
}

.infos__text a:hover {
    color: var(--c-navy);
}

/* === COMPOSANT : pages d'erreur ========================================= */

.section--error {
    padding-block: var(--sp-7);
    text-align: center;
}

.error__code {
    margin: 0;
    color: var(--c-sage);
    font-family: var(--ff-title);
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 700;
    line-height: 1;
}

.error__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    margin-block: var(--sp-5);
}

.error__actions .btn--green {
    width: auto;
}

.error__contact {
    font-size: 0.9375rem;
}

/* === COMPOSANT : pages légales ========================================== */

.section--legal .title {
    margin-bottom: var(--sp-6);
}

.prose {
    max-width: 70ch;
    margin-inline: auto;
}

.prose h2 {
    margin: var(--sp-5) 0 var(--sp-2);
    color: var(--c-navy);
    font-family: var(--ff-title);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
}

.prose h2:first-child {
    margin-top: 0;
}

.prose a {
    color: var(--c-navy);
    text-decoration-color: var(--c-sage);
    text-underline-offset: 3px;
}

.prose__list {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-4);
    list-style: disc;
}

.prose__list li {
    margin-bottom: var(--sp-1);
}

.prose__back {
    margin-top: var(--sp-6);
    text-align: center;
}

/*
   Marqueur temporaire : signale une information légale que le client doit
   encore fournir. Volontairement voyant, pour qu'aucun oubli ne passe en
   production. À supprimer de la feuille de style une fois les mentions
   légales complétées.
*/
.todo {
    padding: 0 var(--sp-1);
    background: #fdeeed;
    color: var(--c-error);
    font-weight: 700;
}

/* === FOOTER ============================================================= */

.site-footer {
    padding-block: var(--sp-4);
    background: var(--c-dark);
    color: #d8d8d8;
    font-size: 0.8125rem;
}

.site-footer__inner {
    display: grid;
    gap: var(--sp-3);
    justify-items: center;
    text-align: center;
}

.site-footer a {
    color: inherit;
    text-decoration-color: rgb(255 255 255 / 40%);
    text-underline-offset: 3px;
}

.site-footer a:hover {
    color: var(--c-white);
}

.site-footer__legal {
    margin: 0;
}

.site-footer__links {
    display: flex;
    gap: var(--sp-3);
}

.socials {
    display: flex;
    gap: var(--sp-2);
}

.socials a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

.socials svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--t-fast);
}

.to-top {
    position: fixed;
    right: var(--sp-3);
    bottom: var(--sp-3);
    z-index: 90;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--c-navy);
    border-radius: 50%;
    color: var(--c-white);
    opacity: 0;
    transition: opacity var(--t-fast);
}

.to-top.is-visible {
    opacity: 1;
}

.to-top svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* === COMPOSANT : bandeau de consentement ================================ */

/*
   Volontairement non bloquant : le bandeau se pose au-dessus du contenu sans
   en interdire la lecture. Un mur qui empêche d'accéder au site tant qu'on
   n'a pas cliqué n'est ni exigé par la loi, ni acceptable pour un visiteur
   venu chercher un numéro de téléphone.
*/
.consent {
    position: fixed;
    inset: auto 0 0;
    z-index: 200;
    padding: var(--sp-4) var(--sp-3);
    background: var(--c-white);
    border-top: 3px solid var(--c-sage);
    box-shadow: 0 -4px 24px rgb(45 60 81 / 14%);
}

.consent[hidden] {
    display: none;
}

.consent__inner {
    display: grid;
    gap: var(--sp-4);
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
}

.consent__title {
    margin: 0 0 var(--sp-1);
    color: var(--c-navy);
    font-family: var(--ff-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.consent__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.consent__text a {
    color: var(--c-navy);
    text-decoration-color: var(--c-sage);
    text-underline-offset: 3px;
}

/* Les deux boutons partagent la même taille : refuser doit être aussi
   immédiat qu'accepter. */
.consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Largeur identique pour les deux : aucun des deux choix ne doit paraître
   plus naturel que l'autre. */
.consent__actions .btn {
    flex: 1 1 0;
    width: auto;
    min-width: 150px;
}

/* === BOUTONS ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn--outline {
    background: transparent;
    border-color: var(--c-navy);
    color: var(--c-navy);
}

.btn--outline:hover {
    background: var(--c-navy);
    color: var(--c-white);
}

/*
   Bouton principal. Le fond vert de la maquette d'origine portait un texte
   blanc, dont le contraste tombait à 1,8:1, très en dessous du minimum
   exigé. Le fond est conservé à l'identique, le texte passe en bleu nuit :
   6,3:1, conforme, et l'identité visuelle reste reconnaissable.
*/
.btn--green {
    width: 100%;
    background: var(--c-green);
    border-color: var(--c-green);
    color: var(--c-navy-dark);
}

.btn--green:hover {
    background: var(--c-green-dark);
    border-color: var(--c-green-dark);
}

/* === UTILITAIRES ======================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* === RESPONSIVE ========================================================= */

@media (min-width: 600px) {
    .avis {
        grid-template-columns: repeat(2, 1fr);
    }

    .infos__list {
        grid-template-columns: repeat(3, 1fr);
    }

    .btn--green {
        width: auto;
        min-width: 280px;
    }

    .form__submit {
        text-align: center;
    }
}

@media (min-width: 768px) {
    :root {
        --header-h: 84px;
    }

    .section {
        padding-block: var(--sp-7);
    }

    .callout {
        padding-block: var(--sp-7);
    }

    .callout__inner {
        grid-template-columns: 1fr auto;
        gap: var(--sp-5);
        place-items: center start;
        text-align: left;
    }

    .site-header__logo img {
        height: 44px;
    }

    .site-footer__inner {
        grid-template-columns: auto auto auto;
        justify-items: start;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .site-footer .socials {
        justify-self: end;
    }

    .consent__inner {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .consent__actions .btn {
        flex: 0 0 auto;
    }
}

@media (min-width: 1024px) {
    .burger {
        display: none;
    }

    /* Au-delà du seuil mobile, le menu est toujours déployé en ligne. */
    .nav,
    .nav.is-collapsed {
        position: static;
        display: block !important;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .nav__list {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-1);
    }

    .avis {
        grid-template-columns: repeat(4, 1fr);
    }

    .duo {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-7);
        align-items: center;
    }

    .section--presentation {
        padding-block: var(--sp-8);
    }

    .hero img {
        aspect-ratio: auto;
        max-height: none;
    }
}

@media (min-width: 1280px) {
    .section--avis,
    .section--contact {
        padding-block: var(--sp-8);
    }
}

/* === PRINT ============================================================== */

@media print {
    .site-header,
    .burger,
    .to-top,
    .hero,
    .form,
    .socials {
        display: none !important;
    }

    body {
        padding-top: 0;
        color: #000;
        font-size: 12pt;
    }

    .section,
    .callout,
    .infos {
        padding-block: 1rem;
        background: none !important;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}