/* Retouches du 04/11/2026, après l'audit complet d'Antoine sur les maquettes.
   Chargée en dernier (planche.py, LIENS[0]) : elle corrige, elle ne redessine pas.
   Chaque bloc renvoie à la remarque d'Antoine qui l'a fait naître. */

/* ── 1. « Mettre couleur rouge orange et vert comme sur Mac sur les boutons » ── */
.captures__barre b:nth-of-type(1), .vign__barre b:nth-of-type(1), .i3d-fen__barre b:nth-of-type(1) { background: #FF5F57 !important; }
.captures__barre b:nth-of-type(2), .vign__barre b:nth-of-type(2), .i3d-fen__barre b:nth-of-type(2) { background: #FEBC2E !important; }
.captures__barre b:nth-of-type(3), .vign__barre b:nth-of-type(3), .i3d-fen__barre b:nth-of-type(3) { background: #28C840 !important; }
html.v-alterne main .vign--img {
  background-image: radial-gradient(circle at 12px 11px, #FF5F57 3px, transparent 3.5px),
                    radial-gradient(circle at 24px 11px, #FEBC2E 3px, transparent 3.5px),
                    radial-gradient(circle at 36px 11px, #28C840 3px, transparent 3.5px); }

/* ── 2. L'image du référencement local : une recherche, votre site en tête ──── */
.i3d-pn:not(.i3d-pn--clair) .i3d-recherche { color: #0E1714; margin-bottom: 10px; }
.i3d-pn:not(.i3d-pn--clair) .i3d-res--moi { margin: 0; color: #0E1714; }
.vign--recherche { padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; }
.vign--recherche .vr__barre { display: flex !important; align-items: center; gap: 7px; background: #FFFFFF;
  border: 1px solid rgba(14, 23, 20, .18); border-radius: 999px; padding: 5px 12px; font: 600 11px var(--f); color: #0E1714; }
.vign--recherche .vr__barre svg { width: 12px; height: 12px; flex: none; fill: none; stroke: #0E1714; stroke-width: 2; stroke-linecap: round; }
.vign--recherche .vr__res--moi { background: #FFF6E6; border: 1px solid #EBD3A6; border-radius: 7px; padding: 5px 10px; }
.vign--recherche .vr__res--moi small { display: block; font-size: 9.5px; color: #3D6B3A; }
.vign--recherche .vr__res--moi b { display: block; font: 600 12px var(--f); color: #1F4E8C; margin-top: 1px; }
.vign--recherche .vr__res:not(.vr__res--moi) { padding: 0 10px; }
.vign--recherche .vr__res i { height: 5px; width: 55%; border-radius: 3px; background: rgba(14, 23, 20, .35); margin-bottom: 5px; }
.vign--recherche .vr__res i.c { width: 80%; background: rgba(14, 23, 20, .18); }

/* ── 3. « On centre au mieux les textes, on laisse pas des espaces inutiles » ── */
.sec { padding-top: 104px; padding-bottom: 104px; }
.sec__corps > :last-child, .sec__corps > :last-child > :last-child { margin-bottom: 0; }
.sec--large .sec__corps > p:not(.chapo) { text-align: center; }
@media (max-width: 900px) { .sec { padding-top: 68px; padding-bottom: 68px; } }
@media (max-width: 700px) { .sec--large .sec__corps > p:not(.chapo) { text-align: left; } }

/* ── 4. Délais du Suivi : « une icône aux 5 encarts », la frise retirée ──────── */
.liste--ico > li { position: relative; }
.liste--ico > li > .etape__ico + span {
  display: block; font-family: var(--t); font-size: 1.18rem; letter-spacing: -.01em; font-weight: 600;
  color: var(--texte); margin-bottom: 10px; padding: 0 64px 0 20px; position: relative; }
.liste--ico > li > .etape__ico + span::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; background: var(--ocre-a); }
.liste--ico > li:nth-child(4n+1) .etape__ico { background: #D3E2EF; }
.liste--ico > li:nth-child(4n+2) .etape__ico { background: #F4E1BE; }
.liste--ico > li:nth-child(4n+3) .etape__ico { background: #F1D6CB; }
.liste--ico > li:nth-child(4n+4) .etape__ico { background: #D9E5D2; }
.liste--ico > li .etape__ico { top: 16px; right: 16px; width: 48px; height: 44px; padding: 7px 8px; }
.liste--ico .etape__ico .pl { fill: #9A5A0C; stroke: none; }

/* ── 5. Démonstrations : « on met en cliquable chaque encart » ─────────────── */
/* Le titre de la carte est positionné (accueil.css) : il ne doit plus l'être, sinon le lien étendu ne couvre que lui.
   Son petit carré ocre passe donc dans le flux. */
.liste--liens > li { position: relative; transition: transform .18s ease, box-shadow .18s ease; }
.liste--liens > li > .vign + span { position: static; padding-left: 0; }
.liste--liens > li > .vign + span::before { position: static; display: inline-block; margin: 0 11px 0 0; vertical-align: .08em; }
/* Château Fontclaire : le haut de la capture est un bandeau sombre presque vide, on descend sur le titre. */
.vign--img img[src*="premium-vignoble"] { object-position: center 42%; }
.liste--liens > li a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.liste--liens > li > .vign + span::after { content: "→" / ""; display: inline-block; margin-left: 8px; color: var(--ocre-a); transition: transform .18s ease; }
.liste--liens > li:hover { transform: translateY(-3px); }
.liste--liens > li:hover > .vign + span::after { transform: translateX(4px); }
.liste--liens > li:has(a:focus-visible) { outline: 2px solid var(--ocre-a); outline-offset: 3px; }
.liste--liens > li a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .liste--liens > li, .liste--liens > li > .vign + span::after { transition: none; } }

/* ── 6. Tarifs : « d'autres solutions au carrousel », un tableau comparatif ──── */
.hors-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.comparatif { display: grid; gap: 44px; margin-top: 12px; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: #FFFFFF; color: #24302B;
  border: 1px solid rgba(14, 23, 20, .12); border-radius: 12px; overflow: hidden; font-size: .95rem; line-height: 1.45;
  box-shadow: 4px 6px 0 -2px rgba(14, 23, 20, .18), 0 10px 18px -8px rgba(14, 23, 20, .28); }
.compare caption { caption-side: top; text-align: left; font: 600 1.35rem 'Clash Grotesk', var(--t); color: inherit; padding: 0 0 14px; }
.compare th, .compare td { padding: 12px 18px; border-bottom: 1px solid rgba(14, 23, 20, .08); vertical-align: middle; text-align: center; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare tbody th { text-align: left; font-weight: 500; }
.compare thead tr:first-child > * { background: #0E1714; color: #EDE8DD; padding: 20px 18px; border-bottom: 0; }
.compare thead th { width: 29%; vertical-align: bottom; }
.compare--3 thead th { width: 22%; }
.compare .offre__lien { margin: 6px 0 0; font-size: .85rem; }
.compare__nom { display: block; font: 600 1.05rem 'Clash Grotesk', var(--t); }
.compare__prix { display: block; font: 600 1.6rem 'Clash Grotesk', var(--t); color: #E9A54B; margin-top: 4px; }
.compare__prix em { display: block; font: 400 .78rem var(--f); font-style: normal; color: #B7BEB9; }
.compare__desc td { font-size: .88rem; color: #46534D; text-align: left; background: #F6F7F4; vertical-align: top; }
.compare__desc p, .compare tfoot p { margin: 0 !important; max-width: none; color: inherit; line-height: 1.5; }
.compare td.oui span[aria-hidden] { color: #2E7D4F; font-weight: 700; font-size: 1.1rem; }
.compare td.non span[aria-hidden] { color: #A9B2AD; }
.compare tfoot td { background: #F6F7F4; text-align: left; font-size: .85rem; color: #46534D; vertical-align: top; border-top: 1px solid rgba(14, 23, 20, .08); }
.compare tbody tr:hover > * { background: #FBF8F1; }
.compare__suite { text-align: center; margin: 0 !important; }
@media (max-width: 640px) {
  /* Sur téléphone, chaque libellé passe sur sa ligne, au-dessus de ses coches : plus de colonne de libellés à loger. */
  .compare, .compare thead, .compare tbody, .compare tfoot { display: block; }
  .compare caption { display: block; padding: 14px 12px 10px; }
  .compare tr { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .compare tr > td:first-child:empty { display: none; }
  .compare thead th { width: auto; }
  .compare tbody th { grid-column: 1 / -1; padding-bottom: 0; border-bottom: 0; font-weight: 600; }
  .compare { font-size: .86rem; }
  .compare th, .compare td { padding: 10px 9px; }
  .compare thead tr:first-child > * { padding: 14px 9px; }
  .compare__prix { font-size: 1.2rem; }
  .compare__nom { font-size: .92rem; }
}

/* ── 7. Point ouvert du 02/11 : à 320 px, la page débordait de 6 à 10 px ─────
   Mesuré le 04/11 : les quatre entrées du menu demandent 304 px pour 276 disponibles (écart 18 px),
   et l'arche décorative du haut de l'accueil sort de 10 px. */
@media (max-width: 360px) {
  .barre__nav--menus { gap: 10px !important; font-size: .9em; }
  .hero { overflow-x: clip; }
}
/* 04/11 : à 320 px, « Pack Stratégique » et « Pack Performance » sortaient de leur colonne (tableau à trois packs). */
@media (max-width: 400px) {
  .compare--3 .compare__nom { font-size: .78rem; }
  .compare--3 .compare__prix { font-size: 1rem; }
  .compare--3 thead tr:first-child > * { padding: 12px 6px; }
}

/* ── 8. « L'espacement est pas bon, c'est trop collé » (Antoine, 04/11) ────────
   Une rangée de cartes de chiffre clé posée seule dans le texte touchait le paragraphe suivant :
   0 px mesurés (Suivi, « Pourquoi douze mois » ; Chez Tonton, « Ce que ça a changé »). */
html.v-alterne main .sec__corps > .cartouche-t { margin-top: 20px; margin-bottom: 32px; }