@font-face { font-family: 'EB Garamond'; src: url(polices/ebgaramond.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap }
@font-face { font-family: 'EB Garamond'; src: url(polices/ebgaramond-italic.woff2) format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap }
@font-face { font-family: 'UnifrakturMaguntia'; src: url(polices/UnifrakturMaguntia-Book.ttf) format('truetype'); font-display: swap }
:root { --encre: #2B2018; --brun: #8A4925; --or: #B08A4A; --papier: #F7F0E3; --papier2: #EFE4CF; --vert: #2D5A3D; }
* { box-sizing: border-box }
[hidden] { display: none !important }
body { margin: 0; font-family: Georgia, "Palatino Linotype", "Book Antiqua", serif; color: var(--encre); background: var(--papier); line-height: 1.55; font-size: 18px }
a { color: var(--brun) }
.enveloppe { max-width: 1080px; margin: 0 auto; padding: 0 20px }
.alerte-dev { background: #8B1E1E; color: #fff; font: 14px/1.4 system-ui, sans-serif; padding: 8px 16px; text-align: center; display: none }
header.haut { display: flex; justify-content: space-between; align-items: center; padding: 18px 0 }
.marque { font-size: 22px; letter-spacing: .12em; text-transform: uppercase; color: var(--brun); text-decoration: none }
.bouton { display: inline-block; background: var(--brun); color: #fff; text-decoration: none; padding: 14px 26px; border-radius: 4px; font-size: 18px; border: 0; cursor: pointer; font-family: inherit }
.bouton:hover { background: #6E3818 }
.bouton.second { background: transparent; color: var(--brun); border: 2px solid var(--brun) }
.heros { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 30px 0 50px }
.heros h1 { font-size: 46px; line-height: 1.12; margin: 0 0 16px; font-weight: 400 }
.heros .accroche { font-size: 20px; margin: 0 0 24px }
.heros img { width: 100%; max-width: 400px; height: auto; justify-self: center; box-shadow: 0 22px 44px rgba(60, 35, 15, .38), inset 0 0 0 1px #6b4a2a; border: 12px solid #2a2118; outline: 1px solid #B08A4A; outline-offset: -9px; background: #F7F0E3; padding: 16px; }
.prix-court { margin-top: 14px; font-size: 16px; color: #5A4A3A }
section { padding: 50px 0; border-top: 1px solid #E2D4BA }
section h2 { font-size: 32px; font-weight: 400; margin: 0 0 24px; text-align: center }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px }
.carte-info h3 { font-size: 20px; margin: 0 0 8px; color: var(--brun); font-weight: 400; letter-spacing: .05em }
.essai { background: var(--papier2); border-radius: 8px; padding: 28px; display: grid; grid-template-columns: 400px 1fr; gap: 30px; align-items: start }
.essai input { font: inherit; font-size: 22px; padding: 12px 14px; width: 100%; border: 2px solid var(--or); border-radius: 4px; background: #fff }
.essai .ecu svg, .essai .ecu img { width: 100%; height: auto; display: block }
.essai .ecu { position: relative; align-self: start }
.essai .attente { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 14px; color: #5A4A3A; display: none; margin: 0 }
.onglets { display: flex; justify-content: center; gap: 8px; margin: 0 0 18px; flex-wrap: wrap }
.onglet { font: inherit; font-size: 17px; background: transparent; border: 2px solid var(--or); color: var(--brun); padding: 10px 18px; border-radius: 4px; cursor: pointer }
.onglet.actif { background: var(--brun); border-color: var(--brun); color: #fff }
#choix label { display: block; margin: 12px 0 5px; font-size: 16px }
#choix select, #choix input[type=text] { font: inherit; font-size: 18px; padding: 9px 11px; width: 100%; border: 2px solid var(--or); border-radius: 4px; background: #fff; color: var(--encre) }
#choix #nom, #choix #nom2 { font-size: 22px }
.grille-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px }
.personnaliser { background: transparent; border: 1px solid #D9C8A8; margin: 16px 0 0; max-width: none }
.facultatif { font-size: 14px; color: #7A6A55 }
.note { font-size: 15px; color: #8B1E1E; min-height: 1em }
.offres.trois-offres { grid-template-columns: repeat(3, 1fr); max-width: none }
.bouton.inactif { background: #CFC3AE; color: #fff; cursor: default; border-color: #CFC3AE }
.alliance-texte { max-width: 760px; margin: 0 auto; font-size: 19px }
.essai .blasonnement { font-style: italic; margin: 12px 0 }
.badge { display: inline-block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--brun); color: var(--brun); padding: 2px 8px; margin-right: 6px }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.galerie figure { margin: 0; text-align: center; font-size: 15px }
.galerie img { width: 100%; border: 8px solid #2a2118; box-shadow: 0 8px 20px rgba(60, 35, 15, .25) }
.offres { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 860px; margin: 0 auto }
.offre { background: #fff; border: 2px solid #E2D4BA; border-radius: 8px; padding: 28px; display: flex; flex-direction: column }
.offre.vedette { border-color: var(--brun) }
.offre .montant { font-size: 44px; margin: 6px 0 }
.offre ul { padding-left: 20px; margin: 10px 0 22px; flex: 1 }
.honnete { max-width: 760px; margin: 0 auto }
.honnete p { margin: 0 0 14px }
details { background: #fff; border: 1px solid #E2D4BA; border-radius: 6px; padding: 14px 18px; margin: 0 auto 10px; max-width: 820px }
summary { cursor: pointer; font-size: 19px }
footer { padding: 30px 0 50px; font-size: 15px; color: #5A4A3A; text-align: center; border-top: 1px solid #E2D4BA }
.page-texte { max-width: 820px; margin: 0 auto; padding: 20px 20px 60px }
.page-texte h1 { font-weight: 400 }
.page-texte h2 { font-weight: 400; color: var(--brun); margin-top: 32px }
.a-completer { background: #FFF3B0; padding: 0 4px }
form.formulaire label { display: block; margin: 16px 0 6px }
form.formulaire input, form.formulaire textarea { font: inherit; width: 100%; padding: 10px; border: 2px solid var(--or); border-radius: 4px }
@media (max-width: 800px) {
.heros, .essai, .offres, .offres.trois-offres { grid-template-columns: 1fr }
.grille-choix { grid-template-columns: 1fr }
.essai { padding: 16px }
.trois, .galerie { grid-template-columns: 1fr }
.heros h1 { font-size: 34px }
}
.marque { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap }
.logo-marque { width: 40px; height: 40px; border-radius: 50%; display: block }
/* Refonte « étude » (21/10/2026) */
.intro { max-width: 820px; margin: 0 auto 26px; text-align: center }
.regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px }
.regle { background: #fff; border: 1px solid #E2D4BA; border-radius: 6px; padding: 18px 20px }
.regle h3 { margin: 0 0 6px; font-weight: 400; color: var(--brun); font-size: 20px }
.regle p { margin: 0; font-size: 17px }
.etapes-etude { max-width: 820px; margin: 0 auto; padding-left: 24px }
.etapes-etude li { margin: 0 0 12px }
.exemple-grille { display: grid; grid-template-columns: 340px 1fr; gap: 30px; align-items: start }
.exemple-grille img { width: 100%; height: auto; border: 8px solid #2a2118; box-shadow: 0 8px 20px rgba(60, 35, 15, .25) }
.facultatif { font-size: 14px; color: #7A6A55 }
.note { font-size: 16px; color: #8B1E1E; min-height: 1em }
.bouton.gros { font-size: 21px; padding: 16px 34px }
.petit-texte { font-size: 15px; color: #5A4A3A; margin-top: 12px }
.a-venir { display: block; margin-top: 10px; font-style: italic }
.alliance-texte { max-width: 760px; margin: 0 auto; font-size: 19px }
@media (max-width: 800px) {
.exemple-grille { grid-template-columns: 1fr }
}
/* Ajouts « vendeur » (21/10/2026) */
.bandeau-noel { background: #7A1E1E; color: #FBF4E3; text-align: center; font-size: 16px; padding: 9px 14px }
.rassure { list-style: none; padding: 0; margin: 16px 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 16px }
.cadeau-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center }
.cadeau-grille img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 30px rgba(60, 35, 15, .25) }
@media (max-width: 800px) { .rassure, .cadeau-grille { grid-template-columns: 1fr } }
.heros-img { margin: 0; justify-self: center }
.heros-img img { width: 100%; max-width: 440px; height: auto; display: block; border-radius: 8px; box-shadow: 0 18px 40px rgba(60, 35, 15, .3); border: 0; outline: 0; padding: 0; background: none }
.heros-img figcaption { font-size: 13px; color: #7A6A55; text-align: right; margin-top: 4px }
@media (max-width: 800px) { header.haut .bouton.second { font-size: 15px; padding: 9px 14px } .marque { font-size: 18px; letter-spacing: .08em } .bandeau-noel { font-size: 14px } }
.exemples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
.ex { background: #fff; border: 1px solid #E2D4BA; border-radius: 8px; padding: 16px; display: flex; flex-direction: column }
.ex img { width: 100%; height: auto; border-radius: 4px }
.ex h3 { margin: 12px 0 2px; font-weight: 400; font-size: 24px }
.ex-origine { font-size: 15px; color: #7A6A55; margin: 0 0 8px }
.ex-armes { font-size: 16px; margin: 0 0 8px }
.ex ul { padding-left: 18px; margin: 0 0 12px; font-size: 16px; flex: 1 }
.ex-lien { font-size: 16px }
@media (max-width: 800px) { .exemples { grid-template-columns: 1fr } }
@media (max-width: 800px) { .heros .heros-img { order: -1 } .heros .heros-img img { max-width: 260px } .heros { padding-top: 10px } }
/* Parcours de commande « une question par écran » (22/10/2026) */
.parcours { max-width: 640px; margin: 0 auto; background: #FBF6EC; border: 1px solid #D9C8A8; border-radius: 10px; padding: 18px 26px 28px; box-shadow: 0 14px 34px rgba(60, 35, 15, .08); outline: 1px solid rgba(176, 138, 74, .45); outline-offset: -7px; position: relative }
.parcours-haut { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; min-height: 34px }
.retour { font: inherit; font-size: 16px; background: none; border: 0; color: var(--brun); padding: 6px 2px; cursor: pointer; white-space: nowrap }
.retour:hover { text-decoration: underline }
.progression { flex: 1; height: 4px; background: #E6D8BD; border-radius: 2px; overflow: hidden }
#barre { display: block; height: 100%; width: 16%; background: linear-gradient(90deg, var(--or), var(--brun)); border-radius: 2px; transition: width .5s cubic-bezier(.2, .7, .2, 1) }
.etape-num { font-size: 14px; color: #7A6A55; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right }
.ecran.entre { animation: ecran-entre .4s cubic-bezier(.2, .7, .2, 1) }
.parcours.arriere .ecran.entre { animation-name: ecran-retour }
@keyframes ecran-entre { from { opacity: 0; transform: translateX(14px) } to { opacity: 1; transform: none } }
@keyframes ecran-retour { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }
.surtitre { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin: 0 0 2px }
.question { font-size: 29px; font-weight: 400; line-height: 1.2; margin: 4px 0 8px; outline: none }
.question label { font-size: inherit; margin: 0; cursor: text }
.sous-question { font-size: 16px; color: #5A4A3A; margin: 0 0 18px }
.saisie { font: inherit; font-size: 19px; width: 100%; padding: 12px 14px; border: 1px solid #CDB68E; border-bottom: 2px solid var(--or); border-radius: 6px; background: #fff; color: var(--encre); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none }
.saisie:focus { outline: none; border-color: var(--brun); box-shadow: 0 0 0 3px rgba(176, 138, 74, .25) }
.saisie::placeholder { color: #A8977D; font-style: italic }
.saisie.grande { font-size: 26px; padding: 14px 16px; letter-spacing: .02em; margin-top: 6px }
.apport { font-size: 16px; font-style: italic; color: var(--brun); margin: 12px 0 0; line-height: 1.45; padding-left: 18px; position: relative }
.apport:empty { display: none }
.apport::before { content: ''; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; background: var(--or); transform: rotate(45deg) }
.apport.neuf { animation: apport-neuf .5s ease }
@keyframes apport-neuf { from { opacity: 0; transform: translateY(-4px) } to { opacity: 1; transform: none } }
.erreur { color: #8B1E1E; font-size: 15px; margin: 10px 0 0 }
.erreur:empty { display: none }
.actions { margin-top: 26px; display: flex; justify-content: flex-end }
.bouton.suivant { min-width: 200px; text-align: center; border-radius: 6px }
.gros-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px }
.gros-bouton { font: inherit; text-align: left; background: #fff; border: 1px solid #D9C8A8; border-radius: 10px; padding: 22px 44px 22px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: var(--encre); position: relative; transition: border-color .2s, box-shadow .2s, transform .15s }
.gros-bouton::after { content: '›'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 30px; color: var(--or) }
.gros-bouton:hover { border-color: var(--or); box-shadow: 0 8px 20px rgba(60, 35, 15, .1) }
.gros-bouton:active { transform: scale(.985) }
.gros-bouton[aria-pressed=true] { border-color: var(--brun); box-shadow: 0 0 0 2px var(--brun) }
.gb-titre { font-size: 24px; color: var(--brun) }
.gb-sous { font-size: 15px; color: #6A5A48 }
.cherche { position: relative }
.lieu.rempli .saisie { border-color: var(--brun); background: #FFFDF8; padding-right: 46px }
.effacer { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 24px; line-height: 1; color: #9A8A73; width: 40px; height: 40px; cursor: pointer; border-radius: 50% }
.effacer:hover { color: var(--brun) }
.suggestions { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid #D9C8A8; border-radius: 8px; box-shadow: 0 14px 30px rgba(60, 35, 15, .18); margin: 0; padding: 4px 0; list-style: none; max-height: 288px; overflow-y: auto; -webkit-overflow-scrolling: touch }
.suggestions li { padding: 11px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.3 }
.suggestions li + li { border-top: 1px solid #F1E8D6 }
.suggestions li[aria-selected=true], .suggestions li[data-i]:hover { background: #F4EBDA }
.suggestions .vide { color: #7A6A55; font-size: 15px; cursor: default }
.s-sous { font-size: 14px; color: #8A7A63; font-style: italic; white-space: nowrap }
.rapides { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 }
.rapides:first-child { margin: 0 0 10px }
.rapide { font: inherit; font-size: 16px; background: #fff; border: 1px solid #CDB68E; color: var(--brun); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s }
.rapide:hover { border-color: var(--brun) }
.rapide.actif { background: var(--brun); color: #fff; border-color: var(--brun) }
.rapides.gros { display: block; margin-top: 4px }
.rapides.gros .rapide { width: 100%; font-size: 19px; padding: 14px; border-radius: 8px }
.ou { display: flex; align-items: center; gap: 12px; color: #9A8A73; font-size: 15px; font-style: italic; margin: 14px 0 }
.ou::before, .ou::after { content: ''; flex: 1; border-top: 1px solid #E2D4BA }
.passer { font: inherit; font-size: 17px; background: #fff; border: 1px dashed var(--or); color: var(--brun); width: 100%; padding: 13px 14px; border-radius: 8px; cursor: pointer; margin: 0 0 8px }
.passer:hover { border-style: solid }
.passer-gros { font: inherit; font-size: 19px; display: block; width: 100%; background: #fff; border: 1px solid #CDB68E; color: var(--brun); padding: 14px; border-radius: 8px; cursor: pointer; transition: border-color .2s, background .2s }
.passer-gros:hover { border-color: var(--brun); background: #FFFDF8 }
.q-libelle.libre-libelle { margin-top: 20px; font-size: 16px; color: #5A4A3A }
.q-bloc { padding: 18px 0 16px; border-top: 1px solid #E8DCC4 }
.passer + .q-bloc { margin-top: 12px }
.q-libelle { display: block; font-size: 17px; margin: 0 0 9px; line-height: 1.4 }
.sous-bloc .q-libelle { margin-top: 16px }
.sous-bloc { margin: 14px 0 0 10px; padding-left: 16px; border-left: 2px solid #E2D4BA }
.case { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; font-size: 17px; line-height: 1.4 }
.case input { width: 20px; height: 20px; accent-color: var(--brun); margin: 3px 0 0; flex: none }
.case-sous { font-size: 15px; color: #6A5A48 }
.case.discrete { font-size: 15px; color: #6A5A48; padding: 14px 0 0; border-top: 1px solid #E8DCC4 }
.case.discrete input { width: 16px; height: 16px }
#bloc-lieu3 { margin-top: 18px }
.lien-discret { font: inherit; font-size: 15px; background: none; border: 0; color: var(--brun); text-decoration: underline; padding: 10px 0 0; cursor: pointer }
.parcours .decors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.parcours label.decor { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #E2D4BA; border-radius: 8px; padding: 8px 8px 12px; cursor: pointer; position: relative; font-size: 15px; line-height: 1.35; transition: border-color .2s, box-shadow .2s }
.parcours label.decor img { width: 100%; height: auto; border-radius: 4px; display: block }
.parcours label.decor input { position: absolute; opacity: 0; pointer-events: none }
.parcours label.decor.choisi { border-color: var(--brun); box-shadow: 0 0 0 2px var(--brun) }
.parcours label.decor.choisi::after { content: '✓'; position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--brun); color: #fff; font-size: 16px; line-height: 28px; text-align: center }
.parcours label.decor:focus-within, .parcours label.offre:focus-within { outline: 2px solid var(--or); outline-offset: 2px }
.parcours .offres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: none; margin: 4px 0 0 }
.parcours label.offre { display: block; background: #fff; border: 1px solid #E2D4BA; border-radius: 8px; padding: 16px 16px 12px; cursor: pointer; position: relative; transition: border-color .2s, box-shadow .2s, opacity .2s }
.parcours label.offre:not(.choisi) { opacity: .82 }
.parcours label.offre.choisi { border-color: var(--brun); box-shadow: 0 0 0 2px var(--brun); opacity: 1 }
.parcours label.offre input { position: absolute; top: 19px; right: 16px; width: 20px; height: 20px; accent-color: var(--brun); margin: 0 }
.offre-tete { display: flex; flex-direction: column; font-size: 18px; padding-right: 30px }
.parcours .offre .montant { font-size: 32px; color: var(--brun); margin: 2px 0 0; line-height: 1.1 }
.parcours .offre ul { margin: 8px 0 0; padding-left: 18px; font-size: 15px; line-height: 1.4 }
.parcours .recap { background: var(--papier2); border-radius: 8px; padding: 10px 14px 12px; margin: 18px 0 10px; font-size: 16px }
.recap-liste { list-style: none; margin: 0; padding: 0 }
.recap-liste li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted #D2C09C; line-height: 1.35 }
.r-cle { color: #7A6A55; font-size: 14px; min-width: 64px; flex: none }
.r-val { flex: 1; min-width: 0; overflow-wrap: anywhere }
.modifier { font: inherit; font-size: 14px; background: none; border: 0; color: var(--brun); text-decoration: underline; cursor: pointer; padding: 0; flex: none }
.recap-total { display: flex; justify-content: space-between; gap: 10px; font-size: 18px; margin: 10px 0 0 }
.parcours .note:empty { display: none }
.parcours #payer { display: block; width: 100%; text-align: center; border-radius: 6px; margin-top: 8px }
.parcours .rassure { font-size: 15px }
@media (max-width: 640px) {
#etude .intro { font-size: 16px; text-align: left; margin-bottom: 18px }
.parcours { padding: 14px 16px 22px; outline-offset: -5px }
.question { font-size: 25px }
.gros-choix, .parcours .offres { grid-template-columns: 1fr }
.gros-bouton { padding: 18px 44px 18px 18px }
.actions { display: block }
.bouton.suivant { width: 100%; min-width: 0 }
.parcours label.decor { font-size: 14px; padding: 6px 6px 10px }
.parcours label.decor.choisi::after { top: 10px; right: 10px }
.sous-bloc { margin-left: 2px; padding-left: 12px }
.s-sous { white-space: normal; text-align: right }
.rapide { font-size: 14px; padding: 6px 11px }
}
@media (prefers-reduced-motion: reduce) {
.ecran.entre, .apport.neuf { animation: none }
#barre { transition: none }
}
/* Menu, carrousel, bénéfices, étapes en schéma (retours de Nicolas, 23/10/2026) */
header.haut { position: relative; gap: 14px }
.menu { display: flex; gap: 22px; margin-left: auto; font-size: 17px }
.menu a { color: var(--encre); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; white-space: nowrap }
@media (max-width: 1100px) { .menu { gap: 16px; font-size: 16px } }
.menu a:hover { color: var(--brun); border-bottom-color: var(--or) }
.burger { display: none; width: 44px; height: 44px; border: 1px solid #D9C8A8; border-radius: 6px; background: #fff; cursor: pointer; padding: 0; flex: none; position: relative }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--brun); border-radius: 1px; transition: transform .25s, opacity .2s }
.burger span:nth-child(1) { top: 14px } .burger span:nth-child(2) { top: 21px } .burger span:nth-child(3) { top: 28px }
.burger[aria-expanded=true] span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger[aria-expanded=true] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded=true] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
section[id] { scroll-margin-top: 8px }
.heros > div:first-child { min-width: 0 }
.carrousel { position: relative; width: 100%; max-width: 440px; justify-self: center; min-width: 0 }
.car-piste { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 10px; box-shadow: 0 18px 40px rgba(60, 35, 15, .3); background: var(--papier2); overscroll-behavior-x: contain }
.car-piste::-webkit-scrollbar { display: none }
.car-diapo { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 4 / 5 }
.heros .car-diapo img { width: 100%; max-width: none; height: 100%; display: block; object-fit: cover; border: 0; outline: 0; padding: 0; box-shadow: none; background: none }
.car-points { display: flex; justify-content: center; gap: 4px; margin-top: 8px }
.car-points button { width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; position: relative }
.car-points button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #D2BE98; transition: background .2s, transform .2s }
.car-points button[aria-current=true]::before { background: var(--brun); transform: scale(1.25) }
.car-fleche { position: absolute; top: calc(50% - 18px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid #D9C8A8; background: rgba(253, 249, 240, .92); color: var(--brun); font-size: 26px; line-height: 1; cursor: pointer; display: none; box-shadow: 0 4px 12px rgba(40, 25, 10, .2) }
.car-prec { left: -20px } .car-suiv { right: -20px }
@media (hover: hover) and (pointer: fine) { .car-fleche { display: block } }
.benefices { list-style: none; margin: 0 0 40px; padding: 18px 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; background: #FBF6EC; border: 1px solid #E2D4BA; border-radius: 10px }
.benefices li { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 6px; line-height: 1.3 }
.benefices svg, .et-icone svg { width: 42px; height: 42px; fill: none; stroke: var(--brun); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px }
.benefices b { font-weight: 400; font-size: 18px; color: var(--encre) }
.benefices span { font-size: 15px; color: #7A6A55; font-style: italic }
.etapes-etude { list-style: none; max-width: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative }
.etapes-etude li { margin: 0; background: #fff; border: 1px solid #E2D4BA; border-radius: 10px; padding: 22px 18px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative }
.etapes-etude li + li::before { content: ""; position: absolute; left: -23px; top: 52px; width: 22px; border-top: 2px dotted var(--or) }
.et-icone { width: 64px; height: 64px; border-radius: 50%; background: var(--papier2); display: flex; align-items: center; justify-content: center; margin-bottom: 8px }
.et-icone svg { margin: 0; width: 36px; height: 36px }
.et-num { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--or) }
.etapes-etude b { font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--brun); margin: 2px 0 6px }
.et-texte { font-size: 16px; line-height: 1.45 }
.sources { max-width: 820px; margin: 26px auto 0; text-align: center; font-size: 17px; color: #4A3B2D; background: #FBF6EC; border-left: 3px solid var(--or); border-radius: 0 6px 6px 0; padding: 12px 18px }
.aide-cibler { font-size: 15px; color: #4A3B2D; background: #F4EBDA; border-radius: 6px; padding: 8px 12px; margin: -6px 0 18px; line-height: 1.4 }
.video-auto { display: block; width: 100%; max-width: 300px; height: auto; border-radius: 8px; margin-top: 10px; background: #1c140c }
@media (max-width: 980px) {
.burger { display: block }
.menu { display: none; position: absolute; z-index: 50; top: 100%; left: -20px; right: -20px; margin: 0; flex-direction: column; gap: 0; background: #FBF6EC; border-bottom: 1px solid #D9C8A8; box-shadow: 0 14px 28px rgba(60, 35, 15, .16); padding: 4px 20px 10px }
.menu.ouvert { display: flex }
.menu a { padding: 14px 2px; font-size: 19px; border-bottom: 1px solid #E8DCC4 }
.menu a:last-child { border-bottom: 0 }
header.haut { gap: 8px; padding: 12px 0 }
header.haut .bouton.second { margin-left: auto }
}
@media (max-width: 800px) {
.heros .carrousel { order: -1; max-width: 420px }
.benefices { grid-template-columns: 1fr 1fr; gap: 16px 8px; margin-bottom: 30px; padding: 16px 6px }
.benefices b { font-size: 16px }
.benefices span { font-size: 14px }
.etapes-etude { grid-template-columns: 1fr; gap: 14px }
.etapes-etude li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; text-align: left; align-items: start; padding: 16px 16px 14px }
.etapes-etude li + li::before { left: 43px; top: -15px; width: 0; height: 14px; border-top: 0; border-left: 2px dotted var(--or) }
.et-icone { width: 56px; height: 56px; grid-row: 1 / span 3; margin: 0 }
.et-icone svg { width: 32px; height: 32px }
.etapes-etude b { margin: 0 0 4px; font-size: 19px }
.sources { text-align: left; font-size: 16px }
}
@media (max-width: 420px) {
.marque { font-size: 16px; gap: 8px; letter-spacing: .06em }
.logo-marque { width: 34px; height: 34px }
header.haut .bouton.second .long { display: none }
}
@media (max-width: 345px) { header.haut { gap: 6px } .marque { font-size: 14px; letter-spacing: .03em; gap: 6px } .logo-marque { width: 30px; height: 30px } header.haut .bouton.second { padding: 8px 10px } }
@media (prefers-reduced-motion: reduce) { .burger span, .car-points button::before { transition: none } }
/* De la recherche à l'affiche : les vraies étapes de l'exemple Dubois */
.proc-titre { text-align: center; font-weight: 400; font-size: 22px; color: var(--brun); margin: 34px 0 16px }
.processus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start }
.processus figure { margin: 0; background: #fff; border: 1px solid #E2D4BA; border-radius: 10px; overflow: hidden }
.processus img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: 50% 30%; background: #F6EEDC }
.processus .proc-blason { height: 220px; display: flex; align-items: center; justify-content: center; padding: 18px; text-align: center; font-style: italic; font-size: 20px; line-height: 1.4; color: #2B2018; background: #F6EEDC; border-bottom: 1px dotted var(--or) }
.processus figcaption { padding: 12px 14px 14px; font-size: 15px; line-height: 1.45; color: #4A3B2D }
.processus figcaption b { display: block; font-weight: 400; font-size: 18px; color: var(--brun); margin-bottom: 4px }
@media (max-width: 980px) { .processus { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 420px) { .processus { gap: 12px } .processus img, .processus .proc-blason { height: 170px } .processus .proc-blason { font-size: 17px } .processus figcaption { font-size: 14px } }
.bandeau-offre { background: #2B2018; color: #FBF4E3; text-align: center; font-size: 16px; padding: 9px 14px }
.bandeau-offre b { color: #E9C46A; font-weight: 600 }
.montant s { color: #8A7A66; font-size: .8em; margin-right: 4px }
@media (max-width: 800px) { .bandeau-offre { font-size: 14px } }
.atelier { display: block; width: 100%; max-width: 900px; height: auto; margin: 0 auto 26px; border-radius: 10px; box-shadow: 0 10px 26px rgba(60,35,15,.18) }
/* Galerie d'exemples, filtrable par occasion */
.gal-filtres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 20px }
.gal-filtres button { font: inherit; font-size: 15px; padding: 7px 14px; border: 1px solid #D6C5A5; border-radius: 20px; background: #fff; color: var(--brun); cursor: pointer }
.gal-filtres button.actif { background: var(--brun); color: #FBF4E3; border-color: var(--brun) }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.galerie figure { margin: 0; background: #fff; border: 1px solid #E2D4BA; border-radius: 10px; overflow: hidden; position: relative }
.galerie figure[hidden] { display: none }
.galerie img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: 50% 45%; background: #F6EEDC }
.galerie figcaption { padding: 12px 14px 14px; font-size: 15px; line-height: 1.45; color: #4A3B2D }
.galerie figcaption b { display: block; font-weight: 400; font-size: 20px; color: var(--brun) }
.gal-tags { display: block; font-size: 13px; letter-spacing: .03em; color: #8A6A3A; margin: 2px 0 6px }
.gal-ex { position: absolute; top: 10px; left: 10px; background: rgba(43,32,24,.82); color: #FBF4E3; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 12px }
.gal-cta { text-align: center; margin-top: 24px }
@media (max-width: 980px) { .galerie { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 420px) { .galerie { gap: 12px } .galerie img { height: 220px } .galerie figcaption { font-size: 14px; padding: 10px 11px 12px } .galerie figcaption b { font-size: 18px } .gal-filtres button { font-size: 14px; padding: 6px 11px } }
.occasions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px }
.occasions div { background: #fff; border: 1px solid #E2D4BA; border-radius: 8px; padding: 10px 12px; font-size: 15px; line-height: 1.4; color: #4A3B2D }
.occasions b { display: block; font-weight: 600; color: var(--brun); margin-bottom: 2px }
@media (max-width: 420px) { .occasions { grid-template-columns: 1fr } }
/* Boutons d'action plus visibles (Jonathan, 23/10 : « on capte pas que c'est un bouton ») */
.bouton { border-radius: 8px; font-weight: 600; box-shadow: 0 3px 0 #5A2C12, 0 8px 18px rgba(90,44,18,.22); transition: transform .08s, box-shadow .08s }
.bouton:active { transform: translateY(2px); box-shadow: 0 1px 0 #5A2C12, 0 4px 10px rgba(90,44,18,.2) }
a.bouton[href="#etude"]::after { content: " \2192"; display: inline-block; margin-left: 6px; transition: transform .15s }
a.bouton[href="#etude"]:hover::after { transform: translateX(3px) }
header.haut .bouton.second { background: var(--brun); color: #fff; border: 0 }
header.haut .bouton.second:hover { background: #6E3818 }
.bouton.inactif { box-shadow: none }
@media (max-width: 600px) { .heros a.bouton[href="#etude"], .gal-cta a.bouton, .cadeau a.bouton { display: block; text-align: center } }
header.haut .bouton.second { white-space: nowrap }
@media (max-width: 600px) { header.haut a.bouton[href="#etude"]::after { content: none } }
/* Mode complément (après le paiement) : seule la suite du questionnaire est affichée */
.mode-complement section:not(#etude), .mode-complement .bandeau-noel, .mode-complement:not(.mode-offrir) header.haut nav, .mode-complement header.haut .bouton, .mode-complement:not(.mode-offrir) header.haut .burger, .mode-complement:not(.mode-offrir) footer { display: none !important }
/* Bon cadeau (27/10, retour de Nicolas : « il n'y a plus le menu, on peut se croire bloqué ») : le menu et le pied de page restent,
et leurs liens ramènent à la page complète (index.html, script) */
.mode-complement #etude { padding-top: 24px }
.complement-cta { background: #FBF6EC; border-left: 3px solid var(--or); border-radius: 0 8px 8px 0; padding: 4px 18px 6px; margin: 18px 0 }
/* Bloc cadeau : la vidéo à gauche, le texte et les occasions à droite (23/10) */
.cadeau-grille { grid-template-columns: minmax(0, 380px) 1fr; justify-content: center; align-items: center }
.cadeau-video .video-auto { max-width: 380px; width: 100%; margin: 0 auto; box-shadow: 0 12px 30px rgba(60, 35, 15, .25) }
.cadeau-video .legende { text-align: center; font-size: 14px; color: #7A6A55; margin: 6px 0 0 }
@media (max-width: 800px) { .cadeau-grille { grid-template-columns: 1fr } .cadeau-video .video-auto { max-width: 320px } }
/* Règles : cartes de même hauteur, la dernière ligne centrée */
.regles { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch }
.regle { flex: 0 1 calc((100% - 44px) / 3); min-width: 260px; box-sizing: border-box }
@media (max-width: 980px) { .regle { flex-basis: calc((100% - 22px) / 2) } }
@media (max-width: 600px) { .regle { flex-basis: 100% } }
/* Processus : cartes de même hauteur */
.processus { align-items: stretch }
/* Galerie : le blason en entier */
.galerie img { height: auto; aspect-ratio: 2 / 3; object-fit: contain; background: #F6EEDC }
/* Blason d'alliance (à venir) : image et texte côte à côte */
.alliance-grille { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 34px; align-items: center; justify-content: center }
.alliance-grille figure { margin: 0 }
.alliance-grille img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 12px 30px rgba(60, 35, 15, .2) }
.alliance-grille figcaption { text-align: center; font-size: 14px; color: #7A6A55; margin-top: 6px }
.alliance-grille h2 { text-align: left; margin-top: 6px }
.a-venir-badge { display: inline-block; background: var(--or); color: #2B2018; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 12px }
@media (max-width: 800px) { .alliance-grille { grid-template-columns: 1fr } .alliance-grille h2 { text-align: center } .alliance-grille > div { text-align: center } }
/* Lot 1 (revue du 23/10) : premier écran mobile, barre fixe, garantie */
.bandeau-noel .b-court { display: none }
.garantie-ligne { margin: 10px 0 0; font-size: 16px; color: #2E5E2E; font-weight: 600 }
#garantie { background: #2B2018; color: #F3E9D2; padding: 46px 0 }
.garanties { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1040px }
.garanties li { border: 1px solid rgba(233, 196, 106, .35); border-radius: 10px; padding: 18px 18px 16px; font-size: 16px; line-height: 1.5; color: #E6DAC0 }
.garanties b { display: block; font-size: 21px; font-weight: 400; color: #E9C46A; margin-bottom: 6px }
#garantie .gal-cta { margin-top: 26px }
#garantie .bouton { background: #E9C46A; color: #2B2018; box-shadow: 0 3px 0 #9C7A2E, 0 8px 18px rgba(0,0,0,.3) }
.barre-fixe { display: none }
@media (max-width: 800px) {
.bandeau-noel .b-long { display: none } .bandeau-noel .b-court { display: inline } .bandeau-noel { padding: 7px 10px }
.heros .carrousel { order: 0; margin-top: 8px }
.heros h1 { font-size: 30px; line-height: 1.15; margin-top: 4px }
.heros .accroche { font-size: 17px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
.garanties { grid-template-columns: 1fr }
.barre-fixe { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; text-align: center; background: var(--brun); color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; padding: 14px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(43,32,24,.35); transform: translateY(140%); transition: transform .25s }
.barre-fixe.visible { transform: none }
.mode-complement .barre-fixe { display: none }
footer { padding-bottom: 90px }
}
/* Écran de l'offre (revue du 23/10) */
.parcours .offre-img { display: block; width: 100%; height: 120px; object-fit: cover; object-position: 50% 35%; border-radius: 6px; margin: 0 0 10px; border: 0; box-shadow: none }
.date-reception { margin: 14px 0 10px; font-size: 16px; color: #2E5E2E; background: #F1F6EC; border-radius: 8px; padding: 10px 12px }
.pour-offrir { margin: 14px 0 0; background: #FBF6EC; border-left: 3px solid var(--or); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 15px; line-height: 1.45 }
.pour-offrir b { display: block; color: var(--brun); margin-bottom: 2px }
.recap-details { margin: 14px 0 0 }
.recap-details summary { cursor: pointer; color: var(--brun); font-size: 16px }
@media (max-width: 600px) {
.parcours .offres { grid-template-columns: 1fr 1fr; gap: 8px }
.parcours label.offre { padding: 10px 10px 8px }
.parcours label.offre ul { font-size: 13.5px; padding-left: 16px; margin: 6px 0 0 }
.parcours .offre-tete { flex-direction: column; align-items: flex-start; gap: 2px }
.parcours .offre-img { height: 80px }
}
/* Aperçu du sens du nom (revue du 23/10) */
.sens-nom { margin: 12px 0 0; background: #FBF6EC; border: 1px solid #E8D9B8; border-radius: 8px; padding: 12px 14px; font-size: 16px; line-height: 1.5; color: #2B2018 }
.sens-nom .sn-eti { display: block; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #8A6A3A; margin-bottom: 4px }
.sens-nom .sn-suite { display: block; margin-top: 6px; font-size: 14.5px; color: #5A4A3A; font-style: italic }
/* Haut de page (23/10 soir) : tout l'essentiel dans le premier écran du téléphone */
.heros-apercu { display: none }
@media (max-width: 800px) {
header.haut { padding: 8px 0 }
.heros { gap: 14px; padding-top: 2px }
.heros h1 { font-size: 27px; line-height: 1.15; margin: 2px 0 8px }
.heros .accroche { font-size: 16px; line-height: 1.45; margin: 0 0 12px; display: block; -webkit-line-clamp: unset; overflow: visible }
.heros-apercu { display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: center; margin: 0 0 14px }
.heros-apercu img { width: 118px; height: 148px; object-fit: cover; border-radius: 6px; border: 0; box-shadow: 0 6px 16px rgba(60,35,15,.25); max-width: none }
.heros-apercu ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.35 }
.heros-apercu li { padding: 3px 0 3px 18px; position: relative }
.heros-apercu li::before { content: "✓"; position: absolute; left: 0; color: #2E5E2E; font-weight: 700 }
.heros .prix-court, .heros .garantie-ligne { display: none }
.heros a.bouton[href="#etude"] { padding: 14px 16px; font-size: 18px }
}
@media (max-width: 800px) { .heros-apercu img { object-position: 50% 22%; border-radius: 6px } }
/* Lot 2 de la revue (23/10 soir) */
.gal-affiche { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--brun) }
.galerie { grid-template-columns: repeat(4, 1fr) }
.gal-filtres { flex-wrap: wrap }
.processus figure { display: flex; flex-direction: column }
.processus img { height: auto; aspect-ratio: 4 / 5; object-fit: contain; padding: 10px; background: #F3EAD7 }
.sources-ligne { text-align: center; font-size: 15px; color: #6A5A48; margin: 18px auto 0; max-width: 760px }
#comment .atelier { max-width: 560px }
.occasions a { display: block; background: #fff; border: 1px solid #E2D4BA; border-radius: 10px; padding: 10px 12px; font-size: 15px; line-height: 1.4; color: #4A3B2D; text-decoration: none }
.occasions a:hover { border-color: var(--brun) }
.occasions a b { display: block; font-weight: 600; color: var(--brun) }
.honnete-bloc { padding: 40px 0 }
.honnete-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto }
.honnete-colonnes ul { list-style: none; margin: 0; padding: 18px 20px; background: #fff; border: 1px solid #E2D4BA; border-radius: 10px }
.honnete-colonnes li { padding: 6px 0 6px 26px; position: relative; font-size: 16px; line-height: 1.4 }
.honnete-colonnes li::before { content: "✓"; position: absolute; left: 2px; color: #2E5E2E; font-weight: 700 }
.honnete-colonnes ul.non li::before { content: "✕"; color: #9B2C2C }
.regles { display: block; max-width: 760px; margin: 0 auto }
.regles details.regle { display: block; background: #fff; border: 1px solid #E2D4BA; border-radius: 10px; padding: 0; margin: 0 0 10px; min-width: 0 }
.regles details.regle summary { display: flex; align-items: center; gap: 14px; padding: 10px 14px; cursor: pointer; font-size: 19px; color: var(--brun); list-style: none }
.regles details.regle summary::-webkit-details-marker { display: none }
.regles details.regle summary::after { content: "+"; margin-left: auto; font-size: 22px; color: #8A6A3A }
.regles details.regle[open] summary::after { content: "–" }
.regles details.regle summary img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid #E2D4BA }
.regles details.regle p { margin: 0; padding: 0 18px 16px 80px; font-size: 16px }
.dernier-appel { text-align: center; padding: 46px 0; background: #FBF6EC; border-top: 1px solid #E2D4BA }
.dernier-appel p { font-size: 17px }
.alliance-bande { padding: 30px 0 }
.alliance-bande .alliance-grille { grid-template-columns: 220px 1fr; gap: 24px }
.alliance-bande h2 { font-size: 24px }
#questions details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px }
#questions details summary::-webkit-details-marker { display: none }
#questions details summary::after { content: "+"; font-size: 22px; color: #8A6A3A; flex: none }
#questions details[open] summary::after { content: "–" }
@media (max-width: 980px) { .galerie { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 800px) {
.galerie { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px }
.galerie figure { scroll-snap-align: start }
.galerie figure[hidden] { display: none }
.gal-filtres { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px }
.gal-filtres button { flex: none }
.processus { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px }
.processus figure { scroll-snap-align: start }
#comment .atelier { height: 190px; object-fit: cover }
.honnete-colonnes { grid-template-columns: 1fr }
.cadeau-video .video-auto { max-width: 240px }
.regles details.regle p { padding-left: 18px }
.alliance-bande .alliance-grille { grid-template-columns: 1fr }
.alliance-bande img { max-width: 260px; margin: 0 auto }
}
/* Système visuel (revue UI 4, 5, 10 ; 23/10 soir) : les titres en EB Garamond, la police des affiches ; sections en alternance */
:root { --titre: 'EB Garamond', Georgia, serif; --blanc-papier: #FFFDF8; --filet: #E2D4BA }
h1, h2, h3, .marque, .question, .offre-tete b, .montant, .gal-tags + *, .galerie figcaption b, .processus figcaption b, .garanties b, .regles details.regle summary, #questions summary { font-family: var(--titre) }
.heros h1 { font-weight: 500; letter-spacing: -.005em }
section h2 { font-size: 38px; font-weight: 500; line-height: 1.15; margin-bottom: 28px }
section h2::after { content: ""; display: block; width: 56px; height: 2px; background: var(--or); margin: 14px auto 0; opacity: .8 }
.cadeau h2::after, .alliance-grille h2::after { margin-left: 0 }
#garantie h2::after { background: #E9C46A }
#comment, #methode, .honnete-bloc { background: var(--blanc-papier) }
.cadeau { background: var(--papier2) }
#questions summary { font-size: 20px }
.parcours .question { font-weight: 500; font-size: 30px }
.montant { font-weight: 500 }
@media (max-width: 800px) {
section { padding: 36px 0 }
section h2 { font-size: 30px; margin-bottom: 20px }
.heros h1 { font-size: 30px }
.parcours .question { font-size: 26px }
}
/* Lot 4 (23/10 soir) */
.offre-sous { display: block; font-size: 14px; font-style: italic; color: #8A6A3A; margin-top: -2px }
.retractation { font-size: 12.5px; line-height: 1.4; color: #7A6A58; margin: 10px 0 0 } /* une ligne discrète (27/10, retour de Nicolas) ; l'information reste obligatoire (art. L221-5) */
.car-points button { width: 44px; height: 44px }
#questions details summary { padding-top: 12px; padding-bottom: 12px }
footer a { display: inline-block; padding: 6px 0 }
@media (max-width: 600px) {
.parcours label.offre ul { font-size: 13px; line-height: 1.3; padding-left: 14px }
.parcours label.offre li { margin-bottom: 2px }
.parcours .offre-img { height: 64px }
.parcours .offre-tete { font-size: 16px; line-height: 1.2 }
.parcours .montant { font-size: 28px }
.date-reception { font-size: 14.5px; line-height: 1.4; padding: 8px 10px; margin: 10px 0 8px }
[data-etape="offre"] .question { margin-bottom: 8px }
}
.retractation { margin: 0 0 10px }
@media (max-width: 600px) { .retractation { font-size: 12.5px } }
/* Carte cadeau (23/10) */
.carte-cadeau-bloc { margin: 14px 0; background: #fff; border: 1px dashed var(--or); border-radius: 10px; padding: 12px 14px; font-size: 15.5px; line-height: 1.45 }
.carte-cadeau-bloc a { font-weight: 600; white-space: nowrap }
.mode-offrir [data-etape="offre"] .recap-details, .mode-offrir .petit-texte { display: none }
/* Nom en 1re question : aperçu façon affiche ; confiance avant le paiement (24/10) */
.apercu-nom { margin: 14px 0 4px; text-align: center; background: #FBF4E3; border: 1px solid #D9C49A; border-radius: 8px; padding: 14px 10px 16px; box-shadow: inset 0 0 0 4px #FBF4E3, inset 0 0 0 5px #D9C49A }
.apercu-nom .an-sur { display: block; font-family: var(--titre); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: #8A4925 }
.apercu-nom .an-nom { display: block; font-family: var(--titre); font-size: 40px; font-weight: 500; letter-spacing: .18em; line-height: 1.15; color: #2B2018; word-break: break-word }
.confiance { list-style: none; margin: 12px 0 12px; padding: 12px 14px; background: #fff; border: 2px solid #2E5E2E; border-radius: 10px }
.confiance li { font-size: 17px; line-height: 1.4; color: #1F1A14; padding: 5px 0 }
.confiance li b { display: block; font-size: 18px; color: #1F3F1F }
.confiance a { color: #6E3818; font-weight: 600 }
@media (max-width: 600px) { .apercu-nom .an-nom { font-size: 30px; letter-spacing: .12em } .confiance li { font-size: 16px; padding: 3px 0 } .confiance li b { font-size: 17px } }
.date-reception { margin-top: 12px } .retractation { margin: 8px 0 10px }
.confiance .detail { display: block }
@media (max-width: 600px) { .confiance { padding: 8px 12px; margin: 10px 0 } .confiance .detail { display: none } .confiance li b { font-size: 17px; line-height: 1.35 } }
/* Rappel facultatif avant le paiement (24/10) */
.rappel { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: #3A2E22 }
.rappel input[type=email] { display: block; width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; margin: 6px 0; border: 1px solid #CDB894; border-radius: 8px; background: #fff }
.rappel-info { margin: 2px 0 0; font-size: 13.5px; color: #6A5A48 }
/* Aperçu gratuit après le nom (24/10) : origine du nom et carte INSEE */
.ap-bloc { margin: 12px 0 0; background: #FBF6EC; border: 1px solid #E8D9B8; border-radius: 8px; padding: 12px 14px; font-size: 16px; line-height: 1.5; color: #2B2018 }
.ap-bloc p { margin: 0 0 8px } .ap-bloc p:last-child { margin-bottom: 0 }
.ap-eti { display: block; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #8A6A3A; margin-bottom: 4px }
.ap-charge { color: #5A4A3A; font-style: italic }
.ap-carte { display: block; width: 100%; max-width: 380px; height: auto; margin: 6px auto 4px }
.ap-echelle { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #5A4A3A }
.ap-degrade { display: inline-flex } .ap-degrade i { width: 18px; height: 12px }
.ap-source { font-size: 13px; color: #6A5A48 }
.ap-suite { margin: 16px 0 0 } .ap-transition { font-size: 18px; margin: 0 0 4px }
#ap-nom { white-space: nowrap }
/* Les premiers retours (24/10) : 3 cartes, puis « Voir les autres retours » */
.retours-mention { font-size: 17px; color: #4A3B2D; margin: -4px 0 16px }
.retours-liste { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) }
.temoin { min-width: 0; overflow-wrap: break-word }
.temoin { margin: 0; background: #FBF6EC; border: 1px solid #E8D9B8; border-radius: 10px; padding: 14px 16px }
.temoin h3 { font-size: 20px; margin: 6px 0 6px } .temoin blockquote { margin: 0 0 8px; font-size: 16.5px; line-height: 1.5 }
.temoin figcaption { font-weight: 600; color: #2B2018 }
.temoin-eti { display: inline-block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #6E3818; background: #F1E3C8; border-radius: 4px; padding: 2px 8px }
#retours:not(.tout) .temoin-suite { display: none }
.retours-plus-p { text-align: center; margin: 16px 0 0 }
/* Premier écran (24/10, mission e-commerce) : surtitre cadeau, vraie affiche d'exemple, saisie du nom vers l'aperçu gratuit */
.surtitre { margin: 0 0 6px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: #8A4925; font-weight: 600 }
.heros-apercu figure { margin: 0 } .heros-apercu figcaption { font-size: 12px; color: #6A5A48; text-align: center; margin-top: 4px; line-height: 1.2 }
.heros-nom { margin: 4px 0 0 } .heros-nom label { display: block; font-size: 17px; font-weight: 600; margin: 0 0 6px; color: #2B2018 }
.heros-nom-ligne { display: flex; gap: 8px }
.heros-nom input { flex: 1; min-width: 0; font: inherit; font-size: 19px; padding: 12px 14px; border: 2px solid #B08A4A; border-radius: 10px; background: #fff; color: #2B2018 }
.heros-nom .bouton { white-space: nowrap }
.heros-nom .erreur { margin: 6px 0 0 }
@media (max-width: 800px) {
.surtitre { font-size: 13px; margin: 2px 0 4px }
.heros-nom-ligne { flex-direction: column }
.heros-nom .bouton { width: 100%; padding: 14px 16px; font-size: 19px }
.heros-apercu img { height: 148px; object-position: 50% 0 }
}
.ap-exemple { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; margin: 14px 0 0; font-size: 15.5px; line-height: 1.45 }
.ap-exemple img { width: 96px; height: auto; border-radius: 4px; box-shadow: 0 4px 12px rgba(60,35,15,.25) }
.ap-exemple p { margin: 0 } .ap-ex-leg { display: block; font-size: 13px; color: #6A5A48; margin-top: 4px }
/* Offre sur téléphone (24/10) : « Valider et payer » reste visible en bas de l'écran pendant qu'on lit les offres */
@media (max-width: 800px) {
#q[data-ecran="offre"] #payer { position: sticky; bottom: 10px; z-index: 5; box-shadow: 0 8px 22px rgba(43,32,24,.35) }
}
/* Un exemple complet de la prestation (25/10) */
.ex-complet { display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 32px; align-items: start }
.ex-complet figure { margin: 0 } .ex-complet img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 26px rgba(60,35,15,.3) }
.ex-complet figcaption { font-size: 14px; color: #6A5A48; text-align: center; margin-top: 6px }
.ex-complet h2 { text-align: left; margin-top: 0 } .ex-complet h2::after { margin-left: 0 }
.ex-liste { padding-left: 20px; font-size: 17px; line-height: 1.5 } .ex-liste li { margin: 0 0 8px }
.ex-pas { font-style: italic; color: #4A3B2D } .ex-prix { font-size: 18px }
@media (max-width: 800px) { .ex-complet { grid-template-columns: 1fr; gap: 18px } .ex-complet h2 { text-align: center } .ex-complet h2::after { margin-left: auto } }
/* Premier écran mobile (26/10) : grande image puis le nom et le bouton, sans défiler.
Le texte du héros passe en display: contents pour intercaler le carrousel entre le titre et la saisie.
La largeur du carrousel suit la hauteur d'écran (svh) pour que le bouton reste visible. */
.heros-nom-gratuit { display: none }
@media (max-width: 800px) {
.heros { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 26px }
.heros > .heros-texte { display: contents }
.heros .surtitre { order: 1; margin: 4px 0 2px; font-size: 12.5px }
.heros h1 { order: 2; font-size: 25px; line-height: 1.16; margin: 0 0 10px }
.heros .carrousel { order: 3; margin: 0 auto; width: clamp(210px, calc((100vh - 360px) * .8), 100%); width: clamp(210px, calc((100svh - 360px) * .8), 100%); max-width: 440px }
.heros .car-points { margin-top: 0 }
.heros .car-points button { width: 30px; height: 28px }
.heros-nom { order: 4; margin: 2px 0 0 }
.heros-nom label { font-size: 16.5px; margin: 0 0 6px }
.heros-nom .label-long { display: none }
.heros-nom-ligne { flex-direction: row }
.heros-nom input { font-size: 18px; padding: 11px 12px }
.heros-nom .bouton { width: auto; padding: 12px 16px; font-size: 18px }
.heros-nom-gratuit { display: block; margin: 6px 0 0; font-size: 14px; color: #6A5A48 }
.heros-apercu { order: 5; display: block; margin: 16px 0 0 }
.heros-apercu figure { display: none }
.heros .accroche { order: 6; margin: 12px 0 0; font-size: 16px }
}
/* Informations supplémentaires, dernier écran après le paiement (26/10) */
textarea.saisie.infos { display: block; width: 100%; min-height: 9em; font: inherit; font-size: 17px; line-height: 1.5; padding: 12px 14px; border: 1px solid #CDB894; border-radius: 8px; background: #fff; resize: vertical; margin: 8px 0 12px }
textarea.saisie.infos::placeholder { color: #8A7A63; font-style: italic }
/* Questionnaire guidé (26/10) : cinq questions courtes, facultatives */
label.question-infos { display: block; font-weight: 600; font-size: 17px; line-height: 1.4; margin: 16px 0 0; color: var(--encre) }
textarea.saisie.infos[data-infos] { min-height: 7.6em; margin-top: 6px }
#infos-valeurs { min-height: 10.2em }
/* Avis clients (26/10) */
.temoin-note { color: #B08A4A; font-size: 20px; letter-spacing: 2px; margin: 4px 0 6px }
.temoin-note span { color: #DCCDB2 }
.temoin-photo { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; margin: 8px 0 }
.temoin figcaption small { display: block; font-size: 13px; color: #6A5A48; margin-top: 2px }
/* Parrainage (26/10) */
.ami-note { background: #FFFDF5; border: 2px solid #B08A4A; border-radius: 10px; padding: 10px 14px; font-size: 16px; line-height: 1.45; margin: 12px 0 }
/* Bon cadeau de Noël (26/10) */
.lien-offrir { font-size: 16px; margin: 10px 0 0 }
.lien-offrir a { font-weight: 600; color: #7A3E1D }
.bandeau-noel a { color: inherit; text-decoration: underline }
/* Carrousel annoté (26/10, idées de Nicolas) : étiquettes et cotes sur les images, bénéfices */
.car-annote, .car-benefices { position: relative; container-type: inline-size; overflow: hidden }
.car-traits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.car-traits line { stroke: #FFFDF5; stroke-width: .9; stroke-linecap: round; filter: drop-shadow(0 0 .6px rgba(0,0,0,.9)) }
.car-traits circle { fill: #FFFDF5; stroke: #2B2018; stroke-width: .5 }
.car-eti { position: absolute; max-width: 44%; background: rgba(255, 253, 245, .94); color: #2B2018; border: 1px solid #B08A4A; border-radius: 8px; padding: .5em .7em; font: 600 3.7cqw/1.2 Georgia, serif; box-shadow: 0 2px 8px rgba(0,0,0,.25) }
.car-eti small { display: block; font-weight: 400; font-size: .78em; color: #5A4A3A; margin-top: .15em }
.car-eti.droite { text-align: right }
.car-cote { position: absolute; transform: translate(-50%, 0); background: rgba(255, 253, 245, .94); color: #2B2018; border-radius: 6px; padding: .2em .5em; font: 700 3.6cqw/1.2 Georgia, serif; white-space: nowrap }
.car-legende { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(43, 32, 24, .78); color: #F7F0E3; font: 3.2cqw/1.3 Georgia, serif; padding: .5em .8em; text-align: center }
.car-annote .car-legende ~ .car-eti[style*="bottom"] { margin-bottom: 7cqw }
/* Diapositive « Ce qui est compris » (27/10, « c'est petit et dommage après de si belles images ») : la photo de Noël en fond,
un panneau sombre en bas, textes plus grands */
.car-benefices { background: #2B2018; color: #F7F0E3 }
.heros .car-benefices .car-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0 }
.car-benefices .car-tag { position: absolute; top: 3cqw; right: 3cqw; background: rgba(43, 32, 24, .72); color: #F7F0E3; border-radius: 6px; padding: .3em .6em; font: italic 2.9cqw/1.2 Georgia, serif }
.car-panneau { position: absolute; left: 0; right: 0; bottom: 0; padding: 11cqw 5cqw 4.5cqw; background: linear-gradient(to bottom, rgba(30, 21, 14, 0) 0, rgba(30, 21, 14, .86) 10cqw, rgba(30, 21, 14, .94) 100%) }
.car-benefices .car-titre { font: 500 7.6cqw/1.1 'EB Garamond', Georgia, serif; margin: 0 0 3.2cqw; text-align: center; color: #FFF8EA }
.car-benefices ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content max-content; justify-content: space-between; gap: 3cqw 3cqw }
.car-benefices li { font: 3.4cqw/1.3 Georgia, serif; color: #E9DCC4; border-left: 2px solid #B08A3E; padding-left: 2.4cqw }
.car-benefices li b { display: block; font-size: 4.4cqw; line-height: 1.2; color: #FFF8EA; margin-bottom: .15em; white-space: nowrap }
.car-benefices .car-prix { margin: 4cqw 0 0; text-align: center; font: 600 4.2cqw/1.3 Georgia, serif; color: #E8C987 }
/* Premier écran mobile (27/10, mission de nuit) : le titre, la saisie du nom, puis les prix, au-dessus du carrousel.
Un seul bouton à l'écran : celui de l'en-tête est retiré (l'en-tête ne suit pas le défilement ; plus bas, le menu
« Commander » et la barre fixe mobile restent). */
.heros-prix { margin: 10px 0 0; font-size: 17px; line-height: 1.4; color: #2B2018 }
.heros-prix b { color: #6E3818; white-space: nowrap }
.heros .prix-court { display: none }
.haut #cta-entete { display: none }
@media (min-width: 801px) {
.heros h1 { font-size: 42px; margin: 0 0 12px }
.heros .accroche { font-size: 18px; margin: 0 0 18px }
}
@media (max-width: 800px) {
.heros .surtitre { order: 1 }
.heros h1 { order: 2; font-size: 24px; margin: 0 0 10px }
.heros-nom { order: 3; margin: 0 }
.heros-nom-gratuit { display: none }
.heros-prix { order: 4; display: block; margin: 10px 0 14px; font-size: 15.5px; line-height: 1.4; color: #2B2018; background: #FBF4E3; border: 1px solid #E2D4BA; border-radius: 8px; padding: 8px 12px }
.heros-prix b { color: #6E3818; white-space: nowrap }
.heros .carrousel { order: 5; width: 100% }
.heros .lien-offrir { order: 6; margin: 14px 0 0 }
.heros-apercu { order: 7 }
.heros .accroche { order: 8 }
}
/* Honnêteté au premier écran mobile (27/10) : sur ordinateur, l'accroche visible le dit déjà */
.heros-honnete { display: none }
@media (max-width: 800px) {
.heros-honnete { order: 4; display: block; margin: -6px 0 14px; font-size: 14.5px; font-style: italic; color: #5A4A3A }
}
/* Logo « sceau » et nom dessiné (27/10/2026, piste 1 choisie par Jonathan) */
.nom-marque { display: block; height: 40px; width: auto }
@media (max-width: 800px) { .nom-marque { height: 34px } }
@media (max-width: 345px) { .nom-marque { height: 28px } }
@media (min-width: 801px) { .logo-marque { width: 52px; height: 52px } .nom-marque { height: 46px } }
/* Images légères (27/10/2026, vitesse sur téléphone) : les ![]()
sont entourées de (AVIF, WebP, repli JPEG) ;
la boîte du est effacée pour que la mise en page reste exactement celle de l'![]()
seule */
picture { display: contents }
/* Diapositives 2 à 4 du carrousel dont l'image n'est pas encore demandée : rien d'affiché (ni texte de remplacement),
comme une image en cours de chargement */
.car-diapo img[data-src] { visibility: hidden }
/* Maison française (27/10/2026) : liseré tricolore discret en haut de chaque page, badge et lien vers « Notre maison » */
html::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #1F3F8F 0 33.4%, #F7F0E3 33.4% 66.6%, #C8352E 66.6%); border-bottom: 1px solid rgba(43,32,24,.08) }
.drapeau-fr { display: inline-block; width: 18px; height: 12px; margin: 0 8px -1px 0; border: 1px solid rgba(43,32,24,.25); background: linear-gradient(90deg, #1F3F8F 0 33.4%, #fff 33.4% 66.6%, #C8352E 66.6%); vertical-align: baseline }
.heros-france { font-size: 15px; letter-spacing: .04em; color: #4A3B2D; margin: 6px 0 0 }
.lien-maison { margin: 22px 0 0; font-size: 17px }
@media (max-width: 600px) { .heros-france { font-size: 13px; letter-spacing: .02em; margin: 0 0 4px } .heros-france .fr-long { display: none } }
/* Galerie sur ordinateur et tablette (27/10/2026, retour de Jonathan : « 4 en haut et 3 en bas, ça fait bizarre ») :
la dernière ligne, incomplète, est centrée quel que soit le nombre d'exemples affichés par les filtres */
@media (min-width: 801px) {
.galerie { display: flex; flex-wrap: wrap; justify-content: center }
.galerie figure { flex: 0 0 calc((100% - 3 * 18px) / 4) }
}
@media (min-width: 801px) and (max-width: 980px) {
.galerie figure { flex-basis: calc((100% - 2 * 18px) / 3) }
}
/* Blason de couple (27/10/2026, 129 €) : parcours index.html?couple (classe mode-couple sur ) */
.couple-seul { display: none }
.mode-couple .couple-seul { display: block }
.mode-couple span.couple-seul { display: inline }
.mode-couple .non-couple { display: none }
.mode-couple .parcours .offres.offres-achat { grid-template-columns: 1fr; max-width: 520px }
.parcours label.offre.couple-seul { display: none }
.mode-couple .parcours label.offre.couple-seul { display: block }
.mode-couple .parcours label.offre.non-couple { display: none }
.ap-nom-titre { font-family: var(--titre); font-size: 22px; color: var(--brun); margin: 18px 0 0 }
.ap-nom-titre:first-of-type { margin-top: 6px }
.parcours .offres.formes { margin-bottom: 4px }
.parcours .formes .offre-tete b { font-size: 19px }
.q-date { margin-top: 14px }
.q-orig2 { margin-top: 14px }
.alliance-formes { margin: 10px 0; padding-left: 20px; line-height: 1.5 }
.alliance-formes li { margin: 0 0 8px }
.alliance-prix { font-size: 17px }
@media (max-width: 800px) { .alliance-formes { text-align: left } }
/* Offres réécrites (28/10/2026, avis Tapie-Ardisson validé par Jonathan) : introduction, ligne « +30 € » et « décider plus tard » */
.offres-intro { margin: 0 0 14px; font-size: 16.5px; line-height: 1.5 }
.offres-intro p { margin: 0 0 6px }
.offres-intro .oi-titre { font-family: var(--titre); font-size: 23px; line-height: 1.25; color: var(--brun); margin-bottom: 8px }
.mode-offrir .offres-intro { display: none }
.parcours .offre .offre-plus { margin: 10px 0 0; padding: 8px 10px; background: #F6EBD6; border-left: 3px solid var(--or); border-radius: 4px; font-size: 15px; font-weight: 600; color: #4A2A14; line-height: 1.35 }
.parcours .offre .offre-plus-tard { margin: 10px 0 0; font-size: 14px; color: #5A4A3A; line-height: 1.4 }
@media (max-width: 600px) { .parcours .offre .offre-plus { font-size: 13.5px; padding: 6px 8px } .parcours .offre .offre-plus-tard { font-size: 13px } .offres-intro .oi-titre { font-size: 21px } }
.offre-visuel { margin: 4px auto 16px; max-width: 440px; text-align: center }
.offre-visuel img { display: block; width: min(100%, 48vh); height: auto; margin: 0 auto; border-radius: 6px; box-shadow: 0 6px 18px rgba(60, 35, 15, .15) }
/* Offres plus détaillées (28/10) : une carte par ligne sur téléphone, plus lisible que deux colonnes étroites */
@media (max-width: 600px) { .parcours .offres.offres-achat { grid-template-columns: 1fr; gap: 12px } .parcours .offres-achat label.offre { padding: 12px 14px 12px } .parcours .offres-achat label.offre ul { font-size: 14.5px; line-height: 1.4 } }
.mode-offrir .parcours .offre .offre-plus-tard { display: none }
/* Pied de page de la maison (28/10/2026, demande de Jonathan) : marque, liens, réseaux */
body footer.pied, .chateau footer.pied { background: #2B2018; color: #E9DDC6; border-top: 3px solid #B08A4A; padding: 44px 0 26px; text-align: left; font-size: 16px }
footer.pied a { color: #F3E3BE; text-decoration: none }
footer.pied a:hover, footer.pied a:focus-visible { color: #fff; text-decoration: underline }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px }
.pied-marque { display: inline-flex; align-items: center; gap: 12px; font: 500 22px/1.2 var(--titre, Georgia, serif); color: #fff !important; margin-bottom: 10px }
.pied-marque img { border-radius: 50%; display: block }
.pied-maison p { margin: 0 0 8px; line-height: 1.5; color: #D8C9AE }
.pied-devise { font-family: var(--titre, Georgia, serif); font-style: italic; color: #D9BD86 !important; font-size: 18px }
.pied-liens, .pied-suivre { display: flex; flex-direction: column; gap: 4px }
.pied b { font: 500 13px/1.4 var(--titre, Georgia, serif); letter-spacing: .18em; text-transform: uppercase; color: #D9BD86; margin-bottom: 6px }
.pied-liens a { padding: 3px 0 }
.pied-reseaux { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px }
.pied-reseaux a { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(217, 189, 134, .45); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 15px }
.pied-reseaux a:hover { border-color: #D9BD86; background: rgba(217, 189, 134, .1); text-decoration: none }
.pied svg { width: 18px; height: 18px; fill: currentColor; flex: none }
.pied-mail { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; word-break: break-all }
.pied-bas { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(217, 189, 134, .25); font-size: 13.5px; color: #B9A88D; text-align: center }
.pied-bas a { color: #D8C9AE !important; display: inline-block; padding: 4px 0 }
.pied-sources { display: block; margin-top: 8px; font-size: 12.5px; color: #9E8D73 }
@media (max-width: 800px) {
.pied-grille { grid-template-columns: 1fr 1fr; gap: 26px }
.pied-maison { grid-column: 1 / -1 }
}
@media (max-width: 480px) { .pied-grille { grid-template-columns: 1fr } }