/* Galbe — page d'accueil. Les composants communs (boutons, surtitres, bandeau, en-tête, pied) sont dans style.css ;
   la bande de confiance, les étapes, la FAQ et le bloc de Noël reprennent ceux de « Nous, en relief ». Téléphone d'abord. */

/* 1. promesse : la grande photo ; le texte dans la partie libre du mur, à gauche (sous la photo sur téléphone).
   Grille d'une seule cellule à partir de 960 px : la photo, le voile et le texte s'y superposent, et la cellule
   grandit avec le texte s'il est plus haut que la photo (rien ne déborde). */
.promesse { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.promesse-photo { display: block; }
.promesse-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 62% 50%; }
.promesse > .rendu { left: 16px; top: 16px; z-index: 2; }
.promesse-texte { width: 100%; max-width: 1440px; margin: 0 auto; padding: 24px var(--marge) 36px; display: flex; flex-direction: column; gap: 14px; }
.promesse h1 { font-size: clamp(36px, 8.5vw, 72px); font-weight: 640; font-stretch: 72%; line-height: 0.98; letter-spacing: -0.01em; }
.promesse .intro { font-size: 17px; line-height: 1.55; color: var(--texte-attenue); max-width: 34em; }
.promesse-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.promesse-prix { font-size: 14.5px; line-height: 1.5; color: var(--texte-attenue); }
.promesse-prix strong { color: var(--vin); font-weight: 640; }

/* 2 bis. chez vous : une grande photo, puis trois portraits */
.chez-vous { max-width: 1440px; margin: 0 auto; padding: 48px var(--marge) 8px; display: flex; flex-direction: column; gap: 24px; }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.galerie li { position: relative; border-radius: 16px; overflow: hidden; background: var(--zone); }
.galerie .g-large { grid-column: 1 / -1; }
.galerie a { display: block; color: inherit; text-decoration: none; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.galerie a:hover img { transform: scale(1.03); }
.galerie .legende { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(250, 246, 240, 0.9); font-size: 13.5px; color: var(--vin); }
.galerie .legende strong { font-weight: 640; }
.galerie a:focus-visible { outline: 3px solid var(--framboise); outline-offset: -3px; }
@media (max-width: 599px) {
  .galerie .details { display: none; }
  .galerie li:last-child { grid-column: 1 / -1; }
  .galerie li:last-child img { aspect-ratio: 4 / 3; }
}

/* photos dans le texte (gros plan, couleurs) */
.spirale-photo, .couleurs-photo { position: relative; margin: 0; border-radius: 16px; overflow: hidden; }
.spirale-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.couleurs-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* 2. confiance (quatre engagements) */
.confiance { border-top: 1px solid var(--filet-vin); border-bottom: 1px solid var(--filet-vin); }
.confiance ul { list-style: none; max-width: 1440px; margin: 0 auto; padding: 8px var(--marge) 16px; }
.confiance li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--filet-vin); font-size: 15px; line-height: 1.4; }
.confiance li:last-child { border-bottom: 0; }
.confiance li > .ic { flex: none; font-size: 22px; color: var(--framboise); }
.confiance strong { font-weight: 620; }

/* en-têtes de section */
.tete-section { display: flex; flex-direction: column; gap: 8px; max-width: 46em; }
.tete-section h2 { font-size: clamp(28px, 5vw, 44px); font-weight: 630; font-stretch: 76%; line-height: 1.02; letter-spacing: 0; }
.tete-section p:not(.surtitre) { font-size: 16px; line-height: 1.55; color: var(--texte-attenue); }

/* 3. modèles : une carte par modèle, le rendu au-dessus */
.modeles { max-width: 1440px; margin: 0 auto; padding: 44px var(--marge); display: flex; flex-direction: column; gap: 24px; }
.grille-modeles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.modele a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.modele .photo { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--scene); display: grid; place-items: center; }
.modele .photo img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.modele .photo svg { width: 46%; height: auto; opacity: 0.55; }
.modele a:hover .photo img { transform: scale(1.04); }
.modele h3 { font-size: 19px; font-weight: 630; font-stretch: 85%; line-height: 1.15; margin-top: 4px; }
.modele .texte { font-size: 14px; line-height: 1.45; color: var(--texte-2); }
.modele .bas { display: flex; flex-direction: column; align-items: flex-start; font-size: 14px; }
.modele .prix { line-height: 1.45; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.modele .prix strong { color: var(--vin); font-weight: 640; white-space: nowrap; }
.modele .lien-fort { font-size: 14px; min-height: 36px; }

/* 4. étapes */
.etapes { background: var(--zone); padding: 40px var(--marge); }
.etapes > * { max-width: 1312px; margin-left: auto; margin-right: auto; }
.etapes-intro { display: flex; flex-direction: column; gap: 12px; }
.etapes-intro h2 { font-size: clamp(26px, 4.4vw, 38px); font-weight: 630; font-stretch: 78%; line-height: 1.05; }
.etapes-intro p { font-size: 15px; line-height: 1.5; color: var(--texte-attenue); }
.etapes-liste { list-style: none; margin-top: 20px; margin-bottom: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.etapes-liste .etape { display: flex; gap: 16px; align-items: flex-start; }
.etape-num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--vin); color: var(--fond); display: grid; place-items: center; font-weight: 640; font-stretch: 112%; }
.etape-corps { display: flex; flex-direction: column; gap: 4px; }
.etape-corps h3 { font-size: 19px; font-weight: 630; font-stretch: 88%; }
.etape-corps p { font-size: 15px; line-height: 1.5; color: var(--texte-attenue); }
.etape-corps .quand { font-size: 14px; font-weight: 600; color: var(--framboise); }

/* 5. le mode vase */
.spirale { padding: 48px var(--marge); }
.spirale-grille { max-width: 1312px; margin: 0 auto; display: grid; gap: 18px; }
.spirale h2 { font-size: clamp(28px, 5vw, 46px); font-weight: 630; font-stretch: 74%; line-height: 1.02; color: var(--fond); }
.spirale .surtitre { color: var(--or); }
.spirale-texte { display: flex; flex-direction: column; gap: 12px; }
.spirale-texte p { font-size: 16px; line-height: 1.6; color: var(--sur-vin); max-width: 38em; }

/* 6. couleurs */
.couleurs { max-width: 1440px; margin: 0 auto; padding: 44px var(--marge); display: flex; flex-direction: column; gap: 24px; }
/* pastille au-dessus du nom : les noms longs (Terracotta, Anthracite) tiennent dans la carte. Sept couleurs : une
   ligne de sept sur grand écran, sinon quatre puis trois (jamais une couleur seule sur sa ligne) */
.nuancier { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .nuancier { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; } }
.nuancier li { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 14px 10px 12px; border: 1px solid var(--filet); border-radius: 14px; background: var(--surface); text-align: center; }
.nuancier li > :last-child { min-width: 0; max-width: 100%; }
.nuancier .rond { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--f); box-shadow: inset 0 -6px 9px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(47, 42, 37, 0.15); }
.nuancier .rond.soie { background: radial-gradient(circle at 34% 28%, #F6E7B5 0%, var(--f) 45%, #8A6823 100%); }
.nuancier strong { display: block; font-size: 15px; font-weight: 620; }
.nuancier small { font-size: 12.5px; color: var(--texte-2); }
/* téléphone : deux colonnes, la pastille à gauche du nom (les noms ne se coupent jamais) */
@media (max-width: 520px) {
  .nuancier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nuancier li { flex-direction: row; gap: 10px; padding: 10px 12px; text-align: left; }
  .nuancier .rond { width: 34px; height: 34px; }
}

/* 7. Noël */
.noel-place { max-width: 1440px; margin: 0 auto; padding: 28px var(--marge) 0; }
.noel { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border: 1.5px solid var(--or); border-radius: 14px; background: var(--surface); }
.noel-tete { display: flex; flex-direction: column; gap: 10px; }
.noel .surtitre { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.noel .surtitre .ic { font-size: 18px; }
.noel h2 { font-size: 24px; font-weight: 630; font-stretch: 76%; line-height: 1.05; letter-spacing: 0; }
.noel-texte { font-size: 14px; line-height: 1.55; }

/* 8. questions */
.questions { max-width: 1440px; margin: 0 auto; padding: 40px var(--marge) 36px; }
.questions h2 { margin-bottom: 8px; font-size: 22px; font-weight: 620; font-stretch: 85%; line-height: 1.2; letter-spacing: 0; }
.faq details { border-bottom: 1px solid rgba(47, 42, 37, 0.14); }
.faq summary { list-style: none; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0;
  font-size: 16px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: none; font-size: 18px; transition: transform 0.2s; }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; color: var(--texte-attenue); max-width: 46em; }

/* 9. départ */
.depart-final { background: var(--zone); padding: 44px var(--marge); }
.depart-final-grille { max-width: 1312px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.depart-final h2 { font-size: clamp(28px, 5vw, 44px); font-weight: 630; font-stretch: 76%; line-height: 1.02; }
.depart-final p { font-size: 16px; color: var(--texte-attenue); }

@media (prefers-reduced-motion: reduce) {
  .modele .photo img, .faq summary .ic, .galerie img { transition: none; }
}
@media (min-width: 600px) {
  .confiance ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .confiance li:nth-last-child(2) { border-bottom: 0; }
  .grille-modeles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 18px; }
  .etapes-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 960px) {
  .promesse > *, .promesse::before { grid-area: 1 / 1; }
  .promesse-photo { position: relative; z-index: 0; min-height: max(560px, min(88vh, 860px)); }
  .promesse-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 70% 50%; }
  /* un voile clair sous le texte, qui se fond dans le mur : le titre se lit même dans l'ombre de la fenêtre */
  .promesse::before { content: ""; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(245, 240, 233, 0.9) 0%, rgba(245, 240, 233, 0.78) 38%, rgba(245, 240, 233, 0) 58%); }
  .promesse-texte { position: relative; z-index: 2; align-self: center; padding-top: 48px; padding-bottom: 48px; }
  .galerie .g-large img { aspect-ratio: 2 / 1; }
  .promesse-texte > * { max-width: min(520px, 40vw); }
  .promesse h1 { font-size: clamp(44px, 4.6vw, 72px); }
  .promesse .surtitre { color: var(--vin); }
  .promesse .intro { color: var(--vin); }
  .promesse > .rendu { left: auto; right: 20px; top: auto; bottom: 20px; }
  .galerie .g-large { grid-column: 1 / -1; }
  .spirale-grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: 56px; }
  .spirale-photo { grid-column: 1; grid-row: 1 / span 2; }
  .spirale-grille > div:first-child { grid-column: 2; grid-row: 1; }
  .spirale-texte { grid-column: 2; grid-row: 2; }
  .confiance ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .confiance li { border-bottom: 0; }
  .grille-modeles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .noel { flex-direction: row; justify-content: space-between; align-items: center; gap: 32px; padding: 26px 32px; }
  .questions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
  .depart-final-grille { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .depart-final-grille h2 { flex-basis: 100%; }
}