/* Galbe — feuille de style commune, reprise de « Nous, en relief » (même mise en page, mêmes composants, Archivo seule).
   Teintes « argile » : fond lin, encre brun-noir pour le texte, les boutons, le bandeau et le pied de page ; terracotta
   foncé pour les accents lisibles ; sable pour les zones d'aperçu ; laiton pour les détails.
   Les noms des variables viennent du premier site (--vin = l'encre principale, --framboise = l'accent) : seules
   leurs valeurs changent, pour que les composants restent identiques d'un site à l'autre. */

/* Archivo (licence SIL OFL : assets/fonts/LICENCE-Archivo-OFL.txt), hébergée sur le site : aucune requête vers Google.
   Une seule police variable : largeur 62 à 125 %, graisse 400 à 700, caractères latins. */
/* mode contraste élevé : la taille choisie reste visible */
@media (forced-colors: active) {
  .option input:checked::before { forced-color-adjust: none; background: Highlight; }
  .option:has(input:checked) { outline: 3px solid Highlight; }
}

@font-face { font-family: Archivo; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 62% 125%; font-style: normal; font-display: swap; }

:root {
  /* interface */
  --fond: #F5F0E9;           /* fond des pages */
  --zone: #ECE3D6;           /* zones claires : bande de confiance, étapes, récapitulatif */
  --surface: #FAF6F0;        /* cartes, encadrés d'aide */
  --champ-fond: #FFFDF9;     /* fond des champs */
  --vin: #2F2A25;            /* encre brun-noir : texte, titres, boutons, bandeau, pied de page */
  --vin-survol: #48413A;
  --vin-appui: #1F1B18;
  --framboise: #9C4A2B;      /* terracotta foncé : surtitres, numéros d'étape, icônes, liens mineurs */
  --texte-2: #675C52;        /* texte secondaire */
  --texte-attenue: #4A423A;  /* texte courant atténué */
  --bord-champ: #8C7D70;     /* bordure des champs (contraste 3:1) */
  --bord-choix: #E0D4C4;     /* contour d'un choix non sélectionné */
  --filet: #E6DCCF;          /* filets et séparateurs */
  --filet-vin: rgba(47, 42, 37, 0.12);
  --or: #B8893F;             /* laiton : détails seulement ; en texte, uniquement sur l'encre */
  --sur-vin: #E9E0D4;        /* texte secondaire sur l'encre */
  --erreur: #8A2F22; --erreur-fond: #F8E4DF; --erreur-bord: #A33A2A;
  --valide: #2F5640; --valide-fond: #E6EEE7;
  --scene: radial-gradient(110% 90% at 30% 15%, #FBF8F3 0%, #EFE6DA 55%, #E4D7C6 100%);
  --ombre-objet: 0 10px 14px rgba(47, 42, 37, 0.25);
  --sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --marge: clamp(20px, 4.5vw, 64px);

  /* objets imprimés (aperçus) */
  --or-relief: #C9A24A;
  --ivoire-objet: #E9E1CF;
  --bleu-nuit: #1C2A47;

  /* anciens noms, encore lus par les pages et les configurateurs */
  --encre: var(--vin);
  --ivoire: var(--fond);
  --papier: var(--fond);
  --rose: var(--zone);
  --brume: var(--zone);
  --rose-clair: var(--champ-fond);
  --ivoire-clair: var(--surface);
  --ivoire-fonce: #E9DFD2;
  --rose-fonce: #E9DFD2;
  --vieux-rose: var(--framboise);
  --gris: var(--texte-2);
  --filet-fort: var(--bord-champ);
  --champ: var(--bord-champ);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--vin); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vin); text-underline-offset: 0.2em; }
a:hover { color: var(--framboise); }
:focus-visible { outline: 2px solid var(--vin); outline-offset: 2px; }
/* sur les fonds encre (pied de page, bandeau, section sombre) : contour clair */
.pied :focus-visible, .bandeau :focus-visible, .section-vin :focus-visible { outline-color: var(--fond); }
/* prix et supplément remplis par site.js (« 24 € » avec une espace simple) : jamais coupés en fin de ligne */
[data-prix], [data-supplement] { white-space: nowrap; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { margin: 0; font-weight: 630; text-wrap: balance; }
h1, h2 { font-stretch: 68%; line-height: 0.95; letter-spacing: -0.015em; }
h1 { font-size: clamp(40px, 1.2rem + 4.6vw, 84px); }
h2 { font-size: clamp(34px, 1rem + 3.4vw, 64px); }
h3 { font-size: 19px; font-stretch: 100%; font-weight: 610; line-height: 1.25; }
p { margin: 0; text-wrap: pretty; }
.surtitre { font-size: 12.5px; font-weight: 600; font-stretch: 115%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--framboise); }
.mono { font-size: 14px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.discret { color: var(--texte-2); }
.petit { font-size: 15px; }
.conteneur { max-width: 1440px; margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }
.saut { position: absolute; left: -9999px; }
.saut:focus { left: 12px; top: 12px; background: var(--fond); padding: 8px 12px; z-index: 50; }
.ic { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -0.14em; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--fond); color: var(--vin); font-size: 11px; font-weight: 600; font-stretch: 112%; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }

/* ------------------------------------------------------------------ bandeau et en-tête */
.bandeau { background: var(--vin); color: var(--fond); font-size: 13.5px; line-height: 1.4; }
.bandeau .conteneur { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 7px; padding-bottom: 7px; }
.bandeau span { display: inline-flex; align-items: center; gap: 8px; }
.bandeau .ic { font-size: 16px; color: var(--or); }
.bandeau a { color: var(--fond); }
.bandeau b { font-weight: 400; }
.bandeau .court { display: none; }
@media (max-width: 860px) {
  .bandeau { font-size: 12.5px; }
  .bandeau .conteneur { justify-content: center; text-align: center; padding-top: 9px; padding-bottom: 9px; }
  .bandeau .secondaire { display: none; }
  .bandeau .long { display: none; }
  .bandeau .court { display: inline; }
}

.entete { position: relative; background: var(--fond); border-bottom: 1px solid var(--filet-vin); }
.entete .conteneur { min-height: 80px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 24px; }
.entete a { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 0 clamp(20px, 2.2vw, 32px); font-size: 15px; white-space: nowrap; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover { text-decoration: underline; color: var(--vin); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--framboise); text-decoration-thickness: 2px; }
.marque { display: inline-flex; align-items: center; min-height: 44px; font-size: 19px; font-weight: 660; font-stretch: 125%; letter-spacing: 0.07em; white-space: nowrap; text-decoration: none; color: var(--vin); }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.lien-panier { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--vin); }
.lien-panier .ic { font-size: 24px; }
.lien-panier[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--framboise); }
.compteur { position: absolute; top: 3px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--framboise); color: var(--fond); font-size: 11px; font-weight: 650; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.compteur:empty { display: none; }
.menu-bouton { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 0; color: var(--vin); cursor: pointer; }
.menu-bouton .ic { font-size: 24px; }
/* en-tête des configurateurs : la marque à gauche, la navigation à droite */
.entete.compacte .conteneur { grid-template-columns: auto 1fr auto; min-height: 64px; }
.entete.compacte .marque { grid-column: 1; grid-row: 1; font-size: 17px; }
.entete.compacte .nav { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.entete.compacte .actions { grid-column: 3; grid-row: 1; }
@media (max-width: 1200px) {
  .entete .conteneur, .entete.compacte .conteneur { min-height: 60px; grid-template-columns: 1fr auto; padding-right: 6px; }
  .marque, .entete.compacte .marque { grid-column: 1; grid-row: 1; font-size: 14px; }
  .actions, .entete.compacte .actions { grid-column: 2; grid-row: 1; gap: 0; }
  .actions .btn { display: none; }
  .js .menu-bouton { display: inline-flex; }
  .js .entete .nav { display: none; }
  .js .entete.ouvert .nav { display: flex; position: absolute; z-index: 40; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px var(--marge) 16px; background: var(--fond); border-bottom: 1px solid var(--filet-vin); box-shadow: 0 14px 24px rgba(47, 42, 37, 0.12); }
  .js .entete .nav a { min-height: 52px; font-size: 17px; border-bottom: 1px solid var(--filet); }
  /* sans JS (pas de bouton menu) : la navigation prend une ligne entière sous la marque et passe à la ligne */
  html:not(.js) .entete .nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; white-space: normal; gap: 0 16px; }
}

/* ------------------------------------------------------------------ boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--vin); color: var(--fond);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--vin-survol); color: var(--fond); }
.btn:active { background: var(--vin-appui); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--vin); }
.btn .ic { font-size: 18px; }
.btn-grand { min-height: 56px; padding: 0 30px; }
.btn-ligne { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1.5px solid var(--vin); border-radius: 999px; background: transparent; color: var(--vin);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn-ligne:hover { background: var(--zone); color: var(--vin); }
.btn-ligne .ic { font-size: 17px; }
.lien-mineur { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--framboise); font: inherit; font-size: 15px; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.lien-mineur:hover { color: var(--vin); }
.lien-fort { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }

/* ------------------------------------------------------------------ sections */
.section { padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(56px, 7vw, 104px); }
.section-vin { background: var(--vin); color: var(--fond); }
.section-vin a { color: var(--fond); }
.intro { margin-top: 14px; max-width: 40rem; font-size: 17px; color: var(--texte-attenue); }
figure { margin: 0; }
figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--texte-2); }
.vignette { position: relative; display: block; }
.rendu { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--fond); color: var(--vin); font-size: 10.5px; font-weight: 600; font-stretch: 112%; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; }

/* pages de composition, panier */
.page { padding-top: clamp(24px, 4vw, 48px); padding-bottom: 80px; }

/* ------------------------------------------------------------------ formulaires */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
legend { padding: 0; margin-bottom: 14px; font-size: clamp(22px, 1rem + 0.6vw, 28px); font-weight: 620; font-stretch: 84%; line-height: 1.15; }
.champ { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; min-width: 0; }
.champ input, .champ select, .champ textarea { font: inherit; font-weight: 400; font-size: 16px; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--bord-champ); border-radius: 10px; background: var(--champ-fond); color: var(--vin); width: 100%; }
.champ select { padding-right: 36px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--vin) 50%), linear-gradient(135deg, var(--vin) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.champ textarea { resize: vertical; min-height: 104px; line-height: 1.5; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--vin); outline-offset: 2px; border-color: var(--vin); }
.champ input:disabled { background: var(--zone); color: var(--texte-2); border-color: var(--filet); }
.champ input::placeholder, .champ textarea::placeholder { color: #7A6B5E; }   /* 5:1 sur le fond des champs */
.aide { font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--texte-2); }
.compte { font-size: 13px; font-weight: 400; color: var(--texte-2); text-align: right; font-variant-numeric: tabular-nums; }

/* choix : format, livraison, paiement (une grande ligne cliquable, rond de 22 px, prix à droite) */
.option { position: relative; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 18px; border: 1.5px solid var(--bord-choix); border-radius: 12px; background: var(--surface); cursor: pointer; }
.option:hover { border-color: var(--bord-champ); }
.option:has(input:checked) { border-color: var(--vin); }
.option input { appearance: none; margin: 0; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--bord-champ); background: var(--champ-fond); display: grid; place-content: center; cursor: pointer; }
.option input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--vin); transform: scale(0); transition: transform 0.12s; }
.option input:checked { border-color: var(--vin); }
.option input:checked::before { transform: scale(1); }
.option input:focus-visible { outline: 2px solid var(--vin); outline-offset: 2px; }
.option .nom { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.option .nom small { font-size: 13.5px; font-weight: 400; color: var(--texte-2); }
.option .prix { font-size: 15px; font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; cursor: pointer; }
.case input { margin: 1px 0 0; width: 22px; height: 22px; flex: none; accent-color: var(--vin); cursor: pointer; }

/* encadrés */
.encadre { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.encadre > .ic { font-size: 20px; margin-top: 1px; color: var(--framboise); }
.encadre-aide, .alerte { background: var(--surface); border: 1px solid var(--filet); }
.encadre-delai { background: var(--zone); }
.erreur { display: block; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--erreur-bord); background: var(--erreur-fond); color: var(--erreur); font-size: 14.5px; }
.erreur-champ { color: var(--erreur); font-size: 13.5px; font-weight: 400; }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--erreur-bord); }
.valide { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--valide-fond); color: var(--valide); font-size: 14.5px; font-weight: 600; }
.alerte { display: block; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; }
.securite { font-size: 13.5px; line-height: 1.5; color: var(--texte-2); }

/* dates promises (configurateur) */
.delais { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; line-height: 1.5; }
.delais:empty { display: none; }
.delais strong { font-weight: 640; }

/* ------------------------------------------------------------------ pied de page */
.pied { background: var(--vin); color: var(--fond); }
/* Badge « Powered by Netlify » de l'hébergeur (offre gratuite), fixé en bas à droite : place réservée sous le pied de
   page et dans la barre du configurateur, pour qu'il ne recouvre aucun lien ni bouton (classe posée par site.js) */
.avec-badge { --place-badge: 52px; }
.avec-badge .pied { padding-bottom: var(--place-badge); }
.pied a { color: var(--fond); text-decoration: none; }
.pied a:hover { color: var(--fond); text-decoration: underline; }
.pied .haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 32px 48px; padding-top: 56px; padding-bottom: 40px; }
.pied .pied-marque { flex: 1 1 22rem; max-width: 30rem; display: flex; flex-direction: column; gap: 14px; }
.pied .marque { min-height: 0; color: var(--fond); }
.pied .muet { color: var(--sur-vin); font-size: 15px; line-height: 1.55; }
.pied .liens { display: grid; grid-template-columns: repeat(2, auto); gap: 0 48px; font-size: 15px; }
.pied .liens a { display: flex; align-items: center; min-height: 44px; }
.pied .bas { padding-top: 16px; padding-bottom: 32px; border-top: 1px solid rgba(245, 240, 233, 0.16); font-size: 13.5px; line-height: 1.6; color: var(--sur-vin); }
@media (max-width: 560px) { .pied .liens { grid-template-columns: 1fr; } .pied .haut { padding-top: 40px; } }

/* textes légaux */
.texte-legal { max-width: 780px; display: flex; flex-direction: column; gap: 16px; }
.texte-legal h1 { font-size: clamp(36px, 1rem + 3vw, 56px); }
.texte-legal h2 { font-size: clamp(26px, 1rem + 1.2vw, 34px); margin-top: 16px; }

/* ------------------------------------------------------------------ téléphone */
@media (max-width: 560px) {
  body { font-size: 16px; }
}