/* Pages intérieures refaites, direction « Encre alternée » validée le 30/10/2026.
   Chargé après variantes.css et accueil.css (vignettes, cartouche, captures, coupes, étapes).
   Les illustrations suivent les variables de couleur de leur section. */

.maq--note { background: #FFF9E8; font-weight: 500; padding-top: 4px; }

/* ── Haut de page : l'illustration à droite du titre ─────────────────── */
.hero--page:has(.fig-hero) { grid-template-columns: minmax(0, 1fr) 460px; column-gap: 64px; }
.fig-hero { width: 100%; max-width: 460px; margin: 30px 0 10px; position: relative; }
@media (max-width: 1180px) { .hero--page:has(.fig-hero) { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; } }
@media (max-width: 860px) {
  .hero--page:has(.fig-hero) { grid-template-columns: 1fr; }
  .fig-hero { order: 2; max-width: 360px; margin: 44px 0 0; }
}

/* Icône au trait, même épaisseur que le logo */
.ico { width: 44px; height: 40px; fill: none; stroke: var(--texte); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico .p { stroke: var(--ocre-a); }
.ico .pl { fill: var(--ocre-a); stroke: none; }

/* Vignette à icône */
.vign--ico { display: flex; align-items: center; justify-content: center; gap: 14px; }
.vign--ico .ico { width: 54px; height: 49px; }
.vign__leg { font-size: .78rem; font-weight: 600; color: var(--gris); max-width: 16ch; }
.vign--img { padding: 0; }
.vign--img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vign--seul { max-width: 360px; margin: 6px 0 30px; height: auto; min-height: 96px; }

/* ── Carnet d'entretien (Suivi, Création) ────────────────────────────── */
.carnet__feuille { border: 1.5px solid var(--texte); border-radius: 6px; background: var(--carte); padding: 18px 20px 14px;
  box-shadow: 10px 10px 0 -1px var(--fond-2), 10px 10px 0 0 var(--trait); }
.carnet__titre { font-family: var(--t); font-size: 1.15rem; display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1.5px solid var(--texte); padding-bottom: 10px; margin-bottom: 6px !important; color: var(--texte) !important; }
.carnet__titre span { font-family: var(--f); font-size: .72rem; color: var(--gris); }
.carnet ul { list-style: none; }
.carnet li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 8px 0;
  border-bottom: 1px dashed var(--trait); font-size: .82rem; }
.carnet li:last-child { border-bottom: none; }
.carnet li b { width: 18px; height: 18px; border-radius: 3px; background: var(--ocre-a); color: #0E1714; display: grid; place-items: center; font-size: 11px; }
.carnet li span { font-weight: 600; color: var(--texte); }
.carnet li em { font-style: normal; color: var(--gris); font-size: .76rem; text-align: right; }
.carnet--petit { max-width: 440px; margin: 8px 0 34px; }

/* ── Les trois pannes d'un site laissé seul ──────────────────────────── */
.pannes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 34px; }
.pannes > div { border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.pannes > div > span { height: 58px; margin-bottom: 8px; border-radius: 4px; background: var(--fond); border: 1px solid var(--trait);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; }
.pannes__alerte { background: #8E1F1F !important; color: #fff; border-color: #8E1F1F !important; }
.pannes__vide i { font-style: normal; color: var(--gris); font-weight: 500; }
.pannes__form { gap: 4px; }
.pannes__form i { display: block; width: 70%; height: 8px; border-radius: 2px; border: 1px solid var(--trait); background: var(--carte); }
.pannes__form s { color: var(--gris); padding: 1px 8px; border: 1px dashed var(--gris); border-radius: 3px; }
.pannes b { font-size: .86rem; color: var(--texte); line-height: 1.3; }
.pannes small { font-size: .76rem; color: var(--gris); line-height: 1.35; }

/* ── Frise des délais ────────────────────────────────────────────────── */
.frise { margin: 6px 0 34px; }
.frise ol { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; padding-top: 22px; }
.frise ol::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ocre-a); }
.frise li { position: relative; padding-right: 10px; }
.frise li::before { content: ""; position: absolute; left: 0; top: -21px; width: 12px; height: 12px; border-radius: 50%; background: var(--carte); border: 2.5px solid var(--ocre-a); }
.frise b { display: block; font-family: var(--t); font-size: 1rem; color: var(--texte); }
.frise span { display: block; font-size: .76rem; color: var(--gris); line-height: 1.35; margin-top: 3px; }

/* ── Compris, pas compris ────────────────────────────────────────────── */
.compris { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 0; max-width: 560px; }
.compris > div { border: 1.5px solid var(--texte); border-radius: 6px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--carte); }
.compris b { font-family: var(--t); margin-bottom: 4px; }
.compris span { font-size: .84rem; }
.compris__non { border-style: dashed !important; }
.compris__non span { text-decoration: line-through; text-decoration-color: var(--ocre-a); text-decoration-thickness: 2px; color: var(--gris); }
.compris + .cartouche-t { margin-bottom: 34px; }

/* ── Douze mois ──────────────────────────────────────────────────────── */
.mois { margin: 8px 0 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mois__grille { display: grid; grid-template-columns: repeat(6, 38px); gap: 5px; }
.mois__grille i { height: 32px; border-radius: 4px; background: var(--ocre-a); color: #0E1714; font: 700 .72rem var(--f); display: grid; place-items: center; font-style: normal; }
.mois__suite { font-size: .84rem; font-weight: 600; color: var(--gris); padding-left: 22px; position: relative; }
.mois__suite::before { content: "→"; position: absolute; left: 0; color: var(--ocre); }
.mois + .cartouche-t { margin-bottom: 34px; }

/* ── Devis (Tarifs) ──────────────────────────────────────────────────── */
.devis__feuille { border: 1.5px solid var(--texte); border-radius: 6px; background: var(--carte); padding: 20px 22px 16px;
  box-shadow: 10px 10px 0 -1px var(--fond-2), 10px 10px 0 0 var(--trait); }
.devis__titre { font-family: var(--t); font-size: 1.4rem; color: var(--texte) !important; display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1.5px solid var(--texte); padding-bottom: 10px; margin-bottom: 4px !important; }
.devis__titre span { font-family: var(--f); font-size: .72rem; color: var(--gris); }
.devis ul { list-style: none; }
.devis li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--trait); font-size: .9rem; color: var(--texte); }
.devis li b { font-family: var(--t); color: var(--ocre); }
.devis__paiement { display: flex; margin-top: 16px; gap: 3px; font-size: .72rem; font-weight: 700; }
.devis__paiement i { font-style: normal; padding: 7px 8px; background: var(--ocre-a); color: #0E1714; border-radius: 3px; }
.devis__paiement i + i { background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait); }
.devis__tva { font-size: .7rem !important; color: var(--gris) !important; margin: 10px 0 0 !important; }

/* ── Ticket : ce qui est compris ─────────────────────────────────────── */
.ticket { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 34px; }
.ticket > div { border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); padding: 14px; display: flex; flex-direction: column; gap: 5px; font-size: .8rem; }
.ticket b { font-family: var(--t); font-size: .95rem; margin-bottom: 4px; padding-left: 16px; position: relative; }
.ticket b::before { content: ""; position: absolute; left: 0; top: .38em; width: 8px; height: 8px; background: var(--ocre-a); }
.ticket span::before { content: "✓ "; color: var(--ocre); font-weight: 700; }
.ticket__zero span::before { content: "0 · "; }

/* ── Curseurs : ce qui fait le prix ──────────────────────────────────── */
.curseurs { margin: 8px 0 36px; display: grid; gap: 18px; max-width: 560px; }
.curseurs > div b { font-size: .88rem; color: var(--texte); }
.curseurs__axe { display: block; position: relative; height: 4px; background: var(--trait); border-radius: 2px; margin: 12px 0 7px; }
.curseurs__axe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--ocre-a); border-radius: 2px; }
.curseurs__axe i { position: absolute; left: var(--v); top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: var(--carte); border: 3px solid var(--ocre-a); }
.curseurs small { display: flex; justify-content: space-between; font-size: .74rem; color: var(--gris); }
.curseurs__zero { font-size: .82rem !important; margin: 4px 0 0 !important; }
.curseurs__zero s { text-decoration-color: var(--ocre-a); text-decoration-thickness: 2px; margin-right: 8px; }

/* ── Trio : autres besoins ; pièces : contact ; publics : Chez Tonton ── */
.trio, .pieces, .publics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 8px 0 34px; position: relative; }
.trio > div, .pieces > div, .publics > div { border: 1px solid var(--trait); border-radius: 6px; background: var(--carte); padding: 16px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .82rem; font-weight: 600; }
.trio em, .pieces em, .publics em { grid-column: 1 / -1; font-style: normal; text-align: center; font-size: .82rem; font-weight: 600; color: var(--ocre);
  border-top: 1.5px solid var(--ocre-a); padding-top: 8px; }

/* ── Fiche d'établissement (Référencement) ───────────────────────────── */
.fiche > div:first-child { border-radius: 8px 8px 0 0; }
.fiche__carte { height: 150px; border: 1.5px solid var(--texte); border-bottom: none; position: relative;
  background-color: var(--fond-2);
  background-image: linear-gradient(var(--trait) 1px, transparent 1px), linear-gradient(90deg, var(--trait) 1px, transparent 1px); background-size: 26px 26px; }
.fiche__carte .vign__pin { top: 50px; width: 34px; height: 34px; margin-left: -17px; }
.fiche__carte .vign__pin::after { left: 11px; top: 11px; width: 12px; height: 12px; }
.fiche__corps { border: 1.5px solid var(--texte); border-radius: 0 0 8px 8px; background: var(--carte); padding: 16px 18px; }
.fiche__corps i { display: block; border-radius: 3px; margin-bottom: 8px; }
.fiche__nom { height: 14px; width: 60%; background: var(--texte); }
.fiche__l { height: 7px; width: 85%; background: var(--trait); }
.fiche__l--c { width: 55%; }
.fiche__bts { display: flex; gap: 8px; margin-top: 12px; }
.fiche__bts s { text-decoration: none; font-size: .72rem; font-weight: 600; padding: 5px 10px; border: 1.5px solid var(--texte); border-radius: 14px; color: var(--texte); }
.fiche__bts s:first-child { background: var(--ocre-a); border-color: var(--ocre-a); color: #0E1714; }

/* ── Page de résultats ───────────────────────────────────────────────── */
.serp { margin: 8px 0 34px; max-width: 520px; position: relative; padding-right: 44px; }
.serp__recherche { display: block; padding: 9px 14px; border: 1.5px solid var(--texte); border-radius: 20px; background: var(--carte); font-size: .82rem; font-weight: 600; margin-bottom: 10px; }
.serp__recherche::before { content: "⌕ "; color: var(--ocre); }
.serp__pack { border: 1.5px solid var(--ocre-a); border-radius: 6px; background: var(--carte); overflow: hidden; }
.serp__carte { height: 86px; position: relative; background-color: var(--fond-2);
  background-image: linear-gradient(var(--trait) 1px, transparent 1px), linear-gradient(90deg, var(--trait) 1px, transparent 1px); background-size: 20px 20px; }
.serp__carte .vign__pin { width: 18px; height: 18px; top: 26px; }
.serp__carte .vign__pin::after { left: 5px; top: 5px; width: 7px; height: 7px; }
.serp__carte .vign__pin:nth-child(1) { left: 26%; } .serp__carte .vign__pin:nth-child(2) { left: 52%; top: 42px; } .serp__carte .vign__pin:nth-child(3) { left: 74%; top: 20px; }
.serp__pack ul { list-style: none; padding: 6px 12px; }
.serp__pack li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--trait); font-size: .78rem; font-weight: 700; }
.serp__pack li:last-child { border-bottom: none; }
.serp__pack li i { width: 26px; height: 20px; border-radius: 3px; background: var(--fond-2); border: 1px solid var(--trait); }
.serp__pack li span:empty { width: 50%; height: 7px; border-radius: 3px; background: var(--trait); }
.serp__pack li.moi i { background: var(--ocre-a); border-color: var(--ocre-a); }
.serp__res { margin-top: 10px; display: grid; gap: 7px; opacity: .65; }
.serp__res i { height: 22px; border-radius: 3px; border: 1px dashed var(--trait); }
.serp .cotation--v { left: auto; right: 0; top: 44px; bottom: 98px; }

.guide-vign { max-width: 360px; margin: 6px 0 30px; }
.guide-vign .vign { margin: 0 0 8px; }
.guide-vign > span { font-size: .84rem; font-weight: 600; color: var(--gris); }

/* ── Messages (Contact) ──────────────────────────────────────────────── */
.messages { display: flex; flex-direction: column; gap: 14px; padding-right: 50px; }
.messages__bulle { width: 78%; border: 1.5px solid var(--texte); border-radius: 14px 14px 14px 3px; background: var(--carte); padding: 16px 18px; }
.messages__bulle i { display: block; height: 8px; border-radius: 3px; background: var(--trait); margin-bottom: 8px; }
.messages__bulle i.c { width: 55%; margin-bottom: 0; }
.messages__bulle--moi { align-self: flex-end; border-radius: 14px 14px 3px 14px; border-color: var(--ocre-a); }
.messages__bulle--moi i { background: var(--texte); opacity: .7; }
.messages .cotation--v { left: auto; right: 0; top: 30px; bottom: 30px; }

/* ── Planche des réalisations ────────────────────────────────────────── */
.cadre { border: 1.5px solid var(--trait); border-radius: 7px; overflow: hidden; background: var(--carte); }
.cadre img { display: block; width: 100%; height: auto; }
.cadre .captures__barre { padding: 5px 8px; gap: 3px; }
.cadre .captures__barre b { width: 5px; height: 5px; }
.cadre .captures__barre span { font-size: .6rem; margin-left: 6px; }
.planche__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.planche__reel { grid-column: 1 / -1; position: relative; }
.planche__reel .cadre { border-color: var(--ocre-a); border-width: 2px; }
.planche__reel > span { position: absolute; right: 10px; top: 32px; font-size: .7rem; font-weight: 700; padding: 3px 8px;
  background: var(--ocre-a); color: #0E1714; border-radius: 3px; }
.planche .cartouche-t { margin-top: 12px; }

.prochain { margin: 8px 0 30px; max-width: 420px; }
.cadre--vide { border-style: dashed; border-color: var(--gris); }
.prochain__vide { height: 150px; display: grid; place-items: center; font-weight: 600; color: var(--gris); font-size: .9rem;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--fond-2) 10px 11px); }

/* ── Branchements (Chez Tonton) ──────────────────────────────────────── */
.branchements { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; margin: 8px 0 36px; max-width: 540px; }
.branchements__src { display: grid; gap: 10px; }
.branchements__src span { border: 1.5px solid var(--texte); border-radius: 6px; padding: 12px; font-size: .82rem; font-weight: 600; background: var(--carte); text-align: center; }
.branchements__fl { display: grid; gap: 50px; }
.branchements__fl i { height: 2px; background: var(--ocre-a); position: relative; }
.branchements__fl i::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--ocre-a); border-right: 0; }
.branchements__site { border: 2px solid var(--ocre-a); border-radius: 6px; padding: 30px 12px; text-align: center; font-family: var(--t); font-size: 1.1rem; background: var(--carte); }
.branchements__site small { display: block; font-family: var(--f); font-size: .74rem; color: var(--ocre); margin-top: 6px; }

/* ── Pile de guides ──────────────────────────────────────────────────── */
.pile { height: 330px; }
.pile__page { position: absolute; width: 260px; padding: 12px 12px 16px; border: 1.5px solid var(--texte); border-radius: 6px; background: var(--carte);
  box-shadow: 0 18px 30px -20px rgba(0,0,0,.6); }
.pile__page:nth-child(1) { left: 0; top: 0; transform: rotate(-4deg); }
.pile__page:nth-child(2) { left: 90px; top: 60px; transform: rotate(2deg); }
.pile__page:nth-child(3) { left: 180px; top: 120px; transform: rotate(-1deg); }
.pile__page .vign { margin: 0 0 12px; height: 92px; }
.pile__page > i { display: block; height: 8px; border-radius: 3px; background: var(--trait); margin-top: 7px; }
.pile__page > i:first-of-type { height: 11px; width: 80%; background: var(--texte); }
.pile__page > i.c { width: 55%; }

/* ── Métiers (Création) ──────────────────────────────────────────────── */
.metiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px 0 34px; }
.metiers > div > span { display: block; font-size: .8rem; font-weight: 600; color: var(--gris); margin-top: -10px; }

/* ── Téléphone ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pannes, .ticket { grid-template-columns: 1fr; }
  .pannes > div { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pannes > div > span { width: 100%; }
  .frise ol { grid-template-columns: 1fr; padding: 0 0 0 26px; gap: 14px; }
  .frise ol::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .frise li::before { left: -26px; top: 3px; }
  .compris { grid-template-columns: 1fr 1fr; }
  .trio, .pieces, .publics { grid-template-columns: 1fr; }
  .trio > div, .pieces > div, .publics > div { flex-direction: row; text-align: left; padding: 10px 14px; }
  .branchements { grid-template-columns: 1fr 34px 1fr; }
  .pile { height: 290px; }
  .pile__page { width: 210px; }
  .pile__page:nth-child(2) { left: 60px; } .pile__page:nth-child(3) { left: 120px; }
  .metiers { grid-template-columns: 1fr; }
  .serp { padding-right: 0; }
  .serp .cotation--v, .messages .cotation--v { display: none; }
  .messages { padding-right: 0; }
}

/* Une case de grille ne rétrécit pas sous son contenu le plus large : la barre d'adresse
   de la capture faisait déborder la planche de 8 px sur téléphone (mesuré le 30/10). */
.planche__grille > * { min-width: 0; }
.planche__grille .captures__barre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Calendrier mural des douze mois (30/10, choix 3b) ──────────────── */
.cal { margin: 8px 0 0; padding: 26px; border-radius: 14px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cal__feuille { position: relative; background: #FFFFFF; border: 1.5px solid #0E1714; border-radius: 8px; padding: 22px 16px 16px; box-shadow: 0 8px 0 -3px rgba(14,23,20,.12); }
.cal__anneaux { position: absolute; top: -9px; left: 0; right: 0; display: flex; justify-content: center; gap: 120px; }
.cal__anneaux i { display: block; width: 10px; height: 18px; border-radius: 5px; border: 2px solid #0E1714; background: #E8EDE9; }
.cal__titre { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; font: 600 .95rem var(--t); color: #0E1714; }
.cal__titre span { font: 700 .72rem var(--f); color: #8C520A; }
.cal__grille { display: grid; grid-template-columns: repeat(4, 64px); gap: 6px; }
.cal__grille div { border: 1px solid #D2DAD4; border-radius: 5px; padding: 6px 7px 7px; display: flex; flex-direction: column; gap: 6px; }
.cal__grille span { font-size: .7rem; font-weight: 600; color: #46534D; }
.cal__grille b { width: 18px; height: 18px; border-radius: 4px; background: #6E8F5E; color: #FFFFFF; font-size: 11px; display: grid; place-items: center; }
.cal .mois__suite { color: #46534D; }
@media (max-width: 520px) { .cal { padding: 18px; } .cal__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cal__feuille { width: 100%; } }

/* ── Parcours des guides, en carte routière (30/10, choix 4a) ────────── */
.parcours { padding: 14px; border-radius: 14px; }
.parcours svg { display: block; width: 100%; height: auto; }
.parcours__champs rect { fill: rgba(255,255,255,.5); }
.parcours__route { fill: none; stroke: #FFFFFF; stroke-width: 20; stroke-linecap: round; }
.parcours__axe { fill: none; stroke: #9DB2C6; stroke-width: 2; stroke-dasharray: 7 7; }
.parcours__depart { fill: #0E1714; }
.parcours__jalon { fill: #D88C22; stroke: #0E1714; stroke-width: 1.5; }
.parcours__num { font: 700 13px var(--f); fill: #0E1714; }
.parcours__lbl rect { fill: #FFFFFF; stroke: #0E1714; stroke-width: 1.2; }
.parcours__lbl text { font: 700 12px var(--f); fill: #0E1714; }
.parcours .plan__epingle { fill: #D88C22; stroke: #0E1714; stroke-width: 1.2; }
html.v-alterne .cal__titre { color: #0E1714; }

/* ── Phrase signalée à réécrire dans la maquette (30/10) ────────────── */
.a-reecrire { outline: 2px dashed #C2563A; outline-offset: 3px; border-radius: 3px; }
.a-reecrire::after { content: " à réécrire"; font: 700 .7rem var(--f); color: #FFFFFF; background: #C2563A; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
.chiffres.nouveau { outline-offset: 6px; }

/* ── Publicité Google : la page de résultats avec l'annonce ─────────── */
.annonce { padding: 26px; border-radius: 14px; }
.annonce__page { background: #FFFFFF; border: 1.5px solid #0E1714; border-radius: 9px; padding: 16px; display: grid; gap: 12px; margin-bottom: 16px; }
.annonce__recherche { display: block; padding: 8px 14px; border: 1.5px solid #D2DAD4; border-radius: 20px; font-size: .82rem; font-weight: 600; color: #0E1714; }
.annonce__pub { display: grid; gap: 4px; padding: 12px; border-radius: 7px; background: #F4E1BE; border: 1.5px solid #D88C22; }
.annonce__pub small { font-size: .66rem; font-weight: 700; color: #0E1714; }
.annonce__pub b { font: 600 1rem var(--t); color: #0E1714; }
.annonce__pub span { font-size: .72rem; color: #46534D; }
.annonce__pub i, .annonce__res i { display: block; height: 6px; border-radius: 3px; background: rgba(14,23,20,.18); width: 92%; }
.annonce__pub i.c, .annonce__res i.c { width: 60%; }
.annonce__res { display: grid; gap: 6px; padding: 4px 12px; opacity: .7; }
.annonce__res i:first-child { height: 9px; width: 50%; background: #5B7FA6; }
/* Deux colonnes : se loue / se construit */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 30px; }
.duo > div { padding: 20px; border-radius: 12px; display: grid; gap: 8px; }
.duo b { font: 600 1.05rem var(--t); }
.duo span { font-size: .9rem; padding-left: 18px; position: relative; color: var(--gris); }
.duo span::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: #D88C22; }
/* Deux montants : ma prestation + votre budget */
.montants { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 6px 0 30px; }
.montants > div { padding: 20px; border-radius: 12px; display: grid; gap: 6px; justify-items: start; }
.montants .ico { width: 44px; height: 40px; fill: none; stroke: #0E1714; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.montants .ico .p { stroke: #9A5A0C; } .montants .ico .pl { fill: #9A5A0C; stroke: none; }
.montants b { font: 600 1rem var(--t); }
.montants span { font-size: .85rem; color: var(--gris); }
.montants em { font: 600 2rem var(--t); font-style: normal; color: var(--ocre); }
@media (max-width: 620px) { .duo, .montants { grid-template-columns: 1fr; } .montants em { justify-self: center; } }

/* ── Référencement : la grille des sept packs (01/11/2026) ─────────── */
.packs__groupe { font: 600 .82rem var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--gris); margin: 34px 0 12px; }
.packs__groupe:first-of-type { margin-top: 8px; }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pack { display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 26px; background: var(--carte); border: 1px solid var(--trait); border-radius: 6px; }
.pack p { margin: 0; }
.sec__corps .pack__nom { color: var(--texte);  font: 600 1.18rem var(--t); letter-spacing: -.01em; }
.sec__corps .pack__prix { font: 600 1.9rem var(--t); letter-spacing: -.03em; line-height: 1.05; color: var(--ocre); }
.pack__prix em { display: block; font: 500 .8rem var(--f); font-style: normal; letter-spacing: 0; color: var(--gris); margin-top: 4px; }
.pack__prix--devis { font-size: 1.45rem; }
.sec__corps .pack__phrase { color: var(--gris); font-size: .95rem; line-height: 1.55; }
.pack ul { list-style: none; display: grid; gap: 7px; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--trait); padding-top: 14px; }
.pack li { font-size: .93rem; padding-left: 18px; position: relative; line-height: 1.45; }
.pack li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--ocre-a); }
.sec__corps .packs__note { margin-top: 26px; font-size: .88rem; color: var(--gris); }
a.gamme__onglet { text-decoration: none; }

/* ── Pages d'offre du référencement (01/11/2026) ─────────────────────── */
/* Point jamais décidé par Antoine : proposé dans le texte, à trancher */
.a-trancher { outline: 2px dashed #2F5E8C; outline-offset: 2px; border-radius: 3px; }
.a-trancher::after { content: " à trancher"; font: 700 .7rem var(--f); color: #FFFFFF; background: #2F5E8C; padding: 1px 6px; border-radius: 3px; margin-left: 6px; white-space: nowrap; }
.sec__corps .pack__lien { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: .93rem; }
/* Un lien posé directement dans un élément de liste n'avait aucun style (site.css ne vise que
   .sec__corps p a et .liste span a) : gris, sans soulignement, invisible. Mesuré le 01/11/2026. */
.liste li > a { color: var(--ocre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .18s; }
.liste li > a:hover { color: var(--texte); }

/* ── Référencement : les sept packs en carrousel, comme les sites (01/11/2026) ── */
/* Même mécanique que la page Tarifs ; site.css ne connaît que ses propres familles (cat-site…). */
#cat-une:checked ~ .gamme__barre [for="cat-une"],
#cat-mois:checked ~ .gamme__barre [for="cat-mois"],
#cat-ens:checked ~ .gamme__barre [for="cat-ens"] { background: var(--ocre-a); border-color: var(--ocre-a); color: #15231F; }
#cat-une:focus-visible ~ .gamme__barre [for="cat-une"],
#cat-mois:focus-visible ~ .gamme__barre [for="cat-mois"],
#cat-ens:focus-visible ~ .gamme__barre [for="cat-ens"] { outline: 2px solid var(--ocre); outline-offset: 3px; }
#cat-une:checked ~ .carrousel--une,
#cat-mois:checked ~ .carrousel--mois,
#cat-ens:checked ~ .carrousel--ens { display: block; }
.offre__corps .offre__lien { margin: 16px 0 0; font-weight: 600; }
.offre__lien a { color: var(--ocre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.offre__lien a:hover { color: var(--texte); }
/* Sur téléphone, « Sur devis » se coupait sur deux lignes et l'unité (« au mois, 6 mois ») s'éparpillait
   à côté du prix : capture du 01/11/2026 en 390 px. Le prix tient sur une ligne, l'unité passe dessous. */
@media (max-width: 900px) {
  .gamme--packs .offre__prix { white-space: nowrap; text-align: right; }
  .gamme--packs .offre__prix em { display: block; margin: 3px 0 0; }
}

/* ── Pages d'offre : « Pour aller plus loin », les pages sœurs en bas (cocon § 5) ── */
.soeurs { list-style: none; display: grid; gap: 10px; margin: 14px 0 0; padding: 0; }
.soeurs li { padding-left: 18px; position: relative; color: var(--gris); }
.soeurs li::before { content: ""; position: absolute; left: 0; top: .8em; width: 8px; height: 1px; background: var(--ocre-a); }
.soeurs a { color: var(--ocre); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.soeurs a:hover { color: var(--texte); }