/* ==========================================================================
   LAYOUT.CSS — Structure des pages : header, navbar, hero, grilles, footer
   ========================================================================== */

/* --- Header / Navbar ---
   Refonte Tâche 2 : bascule vers un fond sombre en dégradé (au lieu du
   fond clair d'origine). Deux raisons : (1) le logo fourni est en version
   claire/transparente et devenait presque invisible sur le fond crème —
   il retrouve ici tout son contraste ; (2) une nav sombre en verre dépoli
   s'accorde avec le hero et le footer, déjà sombres, pour une identité de
   navigation plus cohérente de bout en bout du site. */
.site-header {
    background: var(--degrade-sombre);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--couleur-filet-clair);
    position: sticky;
    top: 0;
    /* Doit rester au-dessus du menu mobile plein écran (z-index 200) afin
       que le bouton burger, devenu une croix de fermeture une fois le menu
       ouvert, reste visible et cliquable (Tâche 2 — correction). */
    z-index: 300;
    transition: box-shadow var(--transition-douce), padding var(--transition-douce);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--espace-2);
    padding-top: 10px;
    padding-bottom: 10px;
    transition: padding var(--transition-douce);
}

/* Header légèrement plus compact une fois qu'on a commencé à scroller
   (classe ajoutée par js/script.js — comportement déjà existant, ici
   simplement rendu visible par un vrai changement de gabarit). */
.site-header.header-scrolled .site-header-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}

.site-header.header-scrolled {
    box-shadow: var(--ombre-md);
}

.logo-link {
    display: inline-flex;
    align-items: center;
}

.logo-img {
    height: 114px;
    width: auto;
    transition: height var(--transition-douce);
    /* Le logo (fourni, jamais recréé) est en version claire : il est conçu
       pour un fond sombre, exactement celui de la nouvelle navbar. */
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header.header-scrolled .logo-img {
    height: 82px;
}

.nav-desktop {
    margin-left: var(--espace-2);
}

.nav-desktop ul {
    display: flex;
    gap: var(--espace-4);
}

.nav-link {
    position: relative;
    font-family: var(--police-condensee);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--couleur-fond-alt);
    opacity: 0.82;
    padding-bottom: 8px;
    transition: opacity 0.2s ease;
}

/* Soulignement animé qui se déploie depuis le centre — remplace la simple
   bordure statique pour un survol plus élégant. */
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--degrade-accent);
    transform: translateX(-50%) scaleX(0);
    transition: transform var(--transition-douce);
}

.nav-link.active,
.nav-link:hover {
    opacity: 1;
}

.nav-link.active::after,
.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-cta {
    white-space: nowrap;
    margin-left: auto;
}

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.burger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--couleur-fond-alt);
    border-radius: 2px;
    transition: transform var(--transition-douce), opacity var(--transition-douce);
}

/* Animation hamburger → croix, pilotée par l'attribut aria-expanded déjà
   mis à jour par js/script.js (aucune modification JS nécessaire). */
.burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Menu mobile plein écran — toujours dans le flux (display: flex) mais
   estompé/masqué via opacité + échelle, ce qui permet une vraie transition
   d'ouverture au lieu du basculement sec display:none/flex d'origine. */
.menu-mobile {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--degrade-sombre);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espace-3);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    pointer-events: none;
    transition: opacity var(--transition-douce), transform var(--transition-douce), visibility var(--transition-douce);
}

.menu-mobile.ouvert {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

.menu-mobile ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espace-3);
    margin-bottom: var(--espace-3);
}

.menu-mobile a {
    font-family: var(--police-serif);
    font-size: 1.6rem;
    color: var(--couleur-fond);
}

.menu-mobile a.active {
    color: var(--couleur-moutarde);
}

/* --- Hero ---
   Images et textes inchangés. Seuls le dégradé de superposition, les
   espacements et la hiérarchie visuelle sont retravaillés (Tâche 2) pour
   une meilleure lisibilité et une transition plus douce avec la navbar
   sombre qui se trouve juste au-dessus. */
.hero {
    position: relative;
    background-color: var(--couleur-noir);
    background-size: cover;
    background-position: center;
    color: var(--couleur-fond);
    display: flex;
    align-items: flex-end;
    isolation: isolate;
}

.hero--complet {
    min-height: 82vh;
    padding-top: var(--espace-3);
}

.hero--court {
    min-height: 38vh;
    padding-top: var(--espace-4);
}

/* Dégradé multi-stops : plus sombre en pied (lisibilité du texte et
   transition avec la section suivante), presque transparent en tête
   (sous la navbar en verre dépoli) pour laisser respirer la photo. */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 8, 6, 0.88) 0%,
        rgba(10, 8, 6, 0.55) 42%,
        rgba(10, 8, 6, 0.18) 75%,
        rgba(10, 8, 6, 0.05) 100%);
}

.hero-contenu {
    position: relative;
    z-index: 1;
    padding-bottom: var(--espace-5);
}

.hero-numero {
    font-family: var(--police-serif);
    font-size: 1rem;
    color: var(--couleur-moutarde);
    display: block;
    margin-bottom: var(--espace-1);
}

/* Le repère éditorial devient une puce discrète en verre dépoli, plus
   visible sur des photos très claires ou très sombres. */
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--police-condensee);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    color: var(--couleur-fond);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid var(--couleur-filet-clair);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 7px 14px;
    border-radius: var(--radius);
    margin-bottom: var(--espace-2);
}

.hero-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--couleur-moutarde);
}

.hero-titre {
    color: var(--couleur-fond);
    margin-bottom: var(--espace-2);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    max-width: 22ch;
}

/* Les titres courts (pages secondaires) n'ont pas besoin de la même
   contrainte de largeur que le grand titre d'accueil. */
.hero--court .hero-titre {
    max-width: none;
}

.hero-soustitre {
    color: var(--couleur-fond);
    opacity: 0.92;
    max-width: 52ch;
    margin-bottom: var(--espace-4);
    font-size: 1.05rem;
}

.hero-cta {
    display: flex;
    gap: var(--espace-2);
    flex-wrap: wrap;
}

/* --- Sections générales ---
   Respiration verticale augmentée (Tâche 2) pour une lecture plus posée,
   plus proche d'un magazine imprimé que d'un site dense. */
.section {
    padding: var(--espace-6) 0;
}

.section-alt {
    background-color: var(--couleur-fond-alt);
    background-image: linear-gradient(rgba(250, 247, 242, 0.94), rgba(250, 247, 242, 0.94)), url('../images/autres/texture-sections.jpg');
    background-size: cover;
    background-position: center;
}

.section-instagram {
    position: relative;
    isolation: isolate;
    min-height: 390px;
    overflow: hidden;
    color: var(--couleur-fond);
    background: #17100b url('../images/autres/indtagramme_section.png') center / cover no-repeat;
}

.section-instagram::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(18, 13, 9, 0.86) 0%, rgba(18, 13, 9, 0.62) 46%, rgba(18, 13, 9, 0.08) 100%);
}

.section-instagram .container {
    position: relative;
    z-index: 1;
}

.section-instagram h2 {
    color: var(--couleur-fond-alt);
}

.section-instagram .rubrique-label {
    color: var(--couleur-moutarde);
}

.section-instagram .filet-accent {
    background: linear-gradient(90deg, var(--couleur-accent-clair), var(--couleur-moutarde));
}

.section-instagram p:not(.rubrique-label) {
    max-width: 48ch;
    color: rgba(250, 247, 240, 0.9);
}

.section-image-specialites {
    background-color: var(--couleur-noir-chaud);
    background-image:
        radial-gradient(circle at 15% 35%, rgba(217, 164, 65, 0.18), transparent 34%),
        radial-gradient(circle at 85% 70%, rgba(178, 59, 30, 0.2), transparent 38%);
    background-size: cover;
    padding-bottom: 0;
}

.section-image-specialites img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--ombre-md);
}

.section-titre-bloc {
    margin-bottom: var(--espace-4);
}

/* --- Grille de produits --- */
.categorie-menu {
    margin-bottom: var(--espace-5);
}

.categorie-titre {
    font-family: var(--police-condensee);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.2rem;
    padding-bottom: var(--espace-2);
    margin-bottom: var(--espace-3);
    border-bottom: 1px solid var(--couleur-filet);
}

.produits-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--espace-3);
}

/* --- Grille des valeurs (page À propos) ---
   Grille dédiée à ces 3 cartes fixes, indépendante de .produits-grille
   (réservée aux plats, colonnes en auto-fill) : même logique que
   .modes-livraison, avec des points de rupture fixes plutôt qu'un nombre
   de colonnes qui se recalcule tout seul. */
.valeurs-grille {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace-3);
}

/* --- Carte produit ---
   Bordure pleine remplacée par une ombre douce + coins arrondis modernes ;
   effet de zoom léger sur la photo et de soulèvement sur la carte au survol
   (structure et contenu du composant strictement inchangés). */
.carte-produit {
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background-color: var(--couleur-fond-alt);
    box-shadow: var(--ombre-sm);
    overflow: hidden;
    transition: transform var(--transition-douce), box-shadow var(--transition-douce);
}

.carte-produit-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.carte-produit-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte-produit-contenu {
    padding: var(--espace-3) var(--espace-3) var(--espace-3);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.carte-produit-nom {
    margin-bottom: 4px;
    font-size: 1.15rem;
}

.carte-produit-description {
    font-style: italic;
    color: var(--couleur-texte-discret);
    font-size: 0.9rem;
    margin-bottom: var(--espace-2);
    flex-grow: 1;
}

.carte-produit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-2);
    border-top: 1px solid var(--couleur-filet);
    padding-top: var(--espace-2);
}

/* --- Illustration de valeur : petit badge circulaire ---
   Remplace l'icône posée à plat directement sur la carte (mal détachée du
   filigrane photo en arrière-plan) par un badge rond, cohérent avec le
   traitement déjà utilisé pour .badge ailleurs sur le site. */
.valeur-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: var(--espace-2);
    border-radius: 50%;
    background-color: var(--couleur-fond-alt);
    border: 1px solid rgba(178, 59, 30, 0.16);
    box-shadow: var(--ombre-sm);
}

.valeur-illustration {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.prix {
    font-family: var(--police-serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--couleur-accent);
}

/* --- Barre de filtres menu --- */
.menu-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--espace-4);
}

.filtre {
    font-family: var(--police-condensee);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--couleur-filet);
    color: var(--couleur-noir);
    padding: 9px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--transition-douce), color var(--transition-douce),
                border-color var(--transition-douce), box-shadow var(--transition-douce);
}

.filtre.active,
.filtre:hover {
    background: var(--degrade-accent);
    border-color: transparent;
    color: var(--couleur-fond-alt);
    box-shadow: var(--ombre-accent);
}

/* Masquage géré uniquement en JS (classe ajoutée dynamiquement) */
.produit-cache {
    display: none;
}

/* --- Footer ---
   Refonte Tâche 2 : dégradé sombre chaud + légère texture pointillée en
   CSS pur (aucune image générée), meilleure hiérarchie typographique,
   logo agrandi. Contenu et liens strictement inchangés. */
.site-footer {
    position: relative;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.035) 1px, transparent 0) 0 0 / 26px 26px,
        var(--degrade-sombre),
        url('../images/autres/footer-braises.jpg');
    background-blend-mode: normal, multiply, normal;
    background-size: 26px 26px, cover, cover;
    background-position: 0 0, center, center;
    color: var(--couleur-fond);
    padding-top: var(--espace-5);
}

/* Fine ligne d'accent en dégradé en haut du footer, comme une signature
   éditoriale plutôt qu'un simple filet gris. */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--couleur-accent), var(--couleur-moutarde), transparent);
}

.footer-inner {
    display: grid;
    grid-template-columns: 2.5fr 0.833fr 0.833fr 0.833fr;
    column-gap: 4px;
    row-gap: var(--espace-3);
    padding-bottom: var(--espace-3);
}

.footer-inner > .footer-col:not(.footer-logo) {
    position: relative;
    top: -10px;
}

.footer-col.footer-logo {
    position: relative;
    top: -10px;
    display: grid;
    grid-template-columns: 197px 1fr;
    align-items: center;
    gap: var(--espace-2);
    text-align: left;
}

.footer-logo-img {
    height: 197px;
    width: auto;
    display: block;
    margin: 0;
}

.footer-baseline {
    font-family: var(--police-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--couleur-moutarde);
    text-align: center;
    margin-bottom: var(--espace-2);
}

.footer-col p {
    opacity: 0.75;
    font-size: 0.92rem;
    margin-bottom: 0;
}

.footer-heading {
    position: relative;
    font-family: var(--police-condensee);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    color: var(--couleur-fond);
    margin-bottom: var(--espace-2);
    padding-bottom: var(--espace-1);
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    background: var(--couleur-accent);
    border-radius: 2px;
}

.footer-list li {
    margin-bottom: 6px;
    opacity: 0.78;
    font-size: 0.92rem;
}

.footer-list a {
    transition: opacity 0.2s ease, padding-left 0.2s ease;
}

.footer-list a:hover {
    opacity: 1;
    padding-left: 4px;
    text-decoration: underline;
    text-decoration-color: var(--couleur-accent);
    text-underline-offset: 3px;
}

/* --- Cartes "Nos valeurs" (page À propos) ---
   La photo associée à chaque valeur sert désormais de vrai fond de carte
   (plein cadre, avec un léger voile clair superposé pour que le titre et
   le texte restent lisibles par-dessus). Au survol, ce voile + la photo
   s'estompent ensemble (opacité qui diminue) pour laisser respirer la
   carte sur sa couleur de fond unie. */
.valeur-carte {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgba(250, 247, 240, 0.9);
}

.valeur-carte > * {
    position: relative;
    z-index: 1;
}

.valeur-carte::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* Largeur/hauteur explicites plutôt que le raccourci "inset" : .encadre
       (même élément) fixe déjà top/left/right + une hauteur de 3px pour
       son liseré ; sans ces deux lignes, ce 3px restait prioritaire et
       écrasait la photo sur une simple bande au lieu de couvrir la carte. */
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Voile clair + photo combinés dans un même calque : les deux
       s'estompent ensemble via la même transition d'opacité. */
    background-image: linear-gradient(rgba(250, 247, 240, 0.7), rgba(250, 247, 240, 0.7)), var(--valeur-photo);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    transition: opacity var(--transition-douce);
}

.valeur-carte:hover::before {
    opacity: 0.32;
}

.valeur-qualite {
    --valeur-photo: url('../images/autres/quelité.png');
}

.valeur-fraicheur {
    --valeur-photo: url('../images/autres/fraicheur.png');
}

.valeur-accessibilite {
    --valeur-photo: url('../images/autres/accebilité.png');
}

.footer-bottom {
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: var(--espace-2) 0;
}

.footer-bottom > .container:first-child p {
    margin-bottom: 0;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--espace-1);
    font-size: 0.8rem;
    opacity: 0.65;
}

.footer-bottom-inner a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Témoignages clients : cartes sobres pour laisser respirer les citations. */
.temoignages-grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-2);
}

.temoignage {
    display: flex;
    flex-direction: column;
    min-height: 220px;
    padding: var(--espace-3);
    border: 1px solid var(--couleur-filet);
    border-top: 3px solid var(--couleur-accent);
    border-radius: var(--radius);
    background: rgba(250, 247, 240, 0.72);
    box-shadow: var(--ombre-sm);
}

.temoignage-note {
    margin-bottom: var(--espace-2);
    color: var(--couleur-moutarde);
    font-size: 1rem;
    letter-spacing: 0.12em;
}

.temoignage blockquote {
    flex: 1;
    margin: 0 0 var(--espace-2);
    color: var(--couleur-texte);
    font-family: var(--police-serif);
    font-size: 1.08rem;
    line-height: 1.45;
}

.temoignage footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--couleur-noir);
    font-size: 0.88rem;
}

.temoignage footer span {
    color: var(--couleur-texte-discret);
    font-size: 0.78rem;
}

/* Lecteur audio discret : aucun son avant une action explicite. */
.lecteur-musique {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 250;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    padding: 6px;
    border: 1px solid rgba(26, 26, 26, 0.14);
    border-radius: 10px;
    background: rgba(250, 247, 240, 0.94);
    box-shadow: 0 8px 24px rgba(32, 24, 17, 0.16);
    backdrop-filter: blur(6px);
}

.lecteur-musique-bouton {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 42px;
    height: 30px;
    padding: 6px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--couleur-accent);
    box-shadow: 0 4px 10px rgba(178, 59, 30, 0.22);
    cursor: pointer;
    transition: transform var(--transition-douce), background-color 0.2s ease;
}

.lecteur-musique-bouton:hover {
    background: var(--couleur-accent-hover);
    transform: translateY(-2px);
}

.lecteur-musique-barre {
    display: block;
    width: 3px;
    height: 9px;
    border-radius: 2px;
    background: var(--couleur-fond-alt);
}

.barre-2 {
    height: 15px;
}

.barre-3 {
    height: 7px;
}

.lecteur-musique.joue .barre-1 {
    animation: barre-musique 0.9s ease-in-out infinite;
}

.lecteur-musique.joue .barre-2 {
    animation: barre-musique 0.9s ease-in-out infinite 0.15s;
}

.lecteur-musique.joue .barre-3 {
    animation: barre-musique 0.9s ease-in-out infinite 0.3s;
}

@keyframes barre-musique {
    0%, 100% { transform: scaleY(0.45); }
    50% { transform: scaleY(1); }
}

.lecteur-musique-volume {
    width: 0;
    height: 20px;
    display: flex;
    align-items: center;
    line-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: width var(--transition-douce), opacity var(--transition-douce);
}

.lecteur-musique:hover .lecteur-musique-volume,
.lecteur-musique:focus-within .lecteur-musique-volume {
    width: 90px;
    opacity: 1;
}

.lecteur-musique-volume input {
    width: 90px;
    height: 4px;
    display: block;
    margin: 0;
    appearance: none;
    border-radius: 999px;
    background: rgba(26, 26, 26, 0.2);
    accent-color: var(--couleur-accent);
    cursor: pointer;
}

.lecteur-musique-volume input::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    appearance: none;
    border: 2px solid var(--couleur-fond-alt);
    border-radius: 50%;
    background: var(--couleur-accent);
    box-shadow: 0 1px 4px rgba(32, 24, 17, 0.28);
}

.lecteur-musique-volume input::-moz-range-thumb {
    width: 10px;
    height: 10px;
    border: 2px solid var(--couleur-fond-alt);
    border-radius: 50%;
    background: var(--couleur-accent);
    box-shadow: 0 1px 4px rgba(32, 24, 17, 0.28);
}

/* --- Modes de commande (Livraison / À emporter / Sur place) ---
   Grille dédiée à la page commande.php : indépendante de .produits-grille
   pour ne jamais impacter l'affichage des produits ailleurs sur le site.
   Volontairement prête pour 3 colonnes (voir Tâche 2 — préparation des
   emplacements d'illustration à venir). */
.modes-livraison {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace-3);
}

.mode-carte h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Illustration par mode de commande (Fusion : emplacement préparé en
   Tâche 2, visuels réels intégrés à la fusion finale). */
.mode-illustration {
    margin-bottom: var(--espace-2);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(178, 59, 30, 0.05), rgba(217, 164, 65, 0.08));
}

.mode-illustration img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Formulaire de contact ---
   Ne modifie que l'apparence des champs (contact.php conserve strictement
   sa logique de validation/envoi) : styles déplacés depuis les attributs
   inline vers des classes, pour une cohérence visuelle avec le reste du
   site (rayons, focus, respiration). */
.formulaire-contact .champ {
    margin-bottom: var(--espace-3);
}

.formulaire-contact label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--police-condensee);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--couleur-texte-discret);
}

.champ-saisie {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--police-texte);
    font-size: 1rem;
    color: var(--couleur-texte);
    background-color: var(--couleur-fond-alt);
    border: 1px solid var(--couleur-filet);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.champ-saisie:focus {
    outline: none;
    border-color: var(--couleur-accent);
    box-shadow: 0 0 0 3px rgba(178, 59, 30, 0.14);
}

textarea.champ-saisie {
    resize: vertical;
    min-height: 120px;
}

/* --- Carte Google Maps (page Contact) --- */
.carte-maps {
    aspect-ratio: 4 / 3;
    min-height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--couleur-filet);
    box-shadow: var(--ombre-md);
}

.carte-maps iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Mise en valeur du bloc "Une question ?" ---
   Carte surélevée sur fond clair, distincte de la texture de la section,
   pour attirer davantage l'œil vers le formulaire de contact. */
.bloc-question {
    background-color: var(--couleur-fond);
    border-radius: var(--radius-lg);
    padding: var(--espace-5) var(--espace-4);
    box-shadow: var(--ombre-lg);
}

.bloc-question .rubrique-label {
    margin-bottom: 4px;
}

/* --- Animation d'apparition légère au scroll (JS ajoute .visible) ---
   IMPORTANT : l'état "invisible" ne s'applique QUE si la classe .js est
   présente sur <html> (ajoutée par un script inline dans header.php).
   Sans JavaScript, .reveal n'a aucun effet et le contenu reste visible
   normalement — aucune section ne peut rester bloquée en opacité 0. */
.js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}