/*
  Démo immo « Résidence Horizon », v2 en 5 pages (29/10/2026) : ce qui est commun aux 5 pages.
  Plan : repo os, web/site-perso/demo-immo/plan.md (section « v2 »).
  Typo : Instrument Serif (titres) + Golos Text (texte). Palette : brique claire, châssis anthracite, toit vert.
  Écarts entre les blocs comme sur l'accueil : 48 px de marge par bloc sur téléphone (≈ 96 px entre deux contenus).
*/
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(/polices/golos-text-normal-400-900-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url(/polices/golos-text-normal-400-900-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/polices/instrument-serif-normal-400-latin.woff2) format('woff2')}

/* ============ 1. LES RÉGLAGES ============ */
:root{
  --fond:#F5F2EC; --fond2:#EDE8DF; --carte:#FFFFFF; --encre:#1D2226; --doux:#565D64; --pale:#6E747B;
  --ligne:#E2DBCF; --ligne-forte:#CFC6B7; --anthracite:#2A333A; --nuit:#1E252A; --brique:#E9DCC3; --brique-fonce:#B0643B; --sable:#E7C9A0;
  --vert-toit:#7FA36B;
  --dispo:#2F7D52; --dispo-fond:#E3F1E8; --option:#D08A1D; --option-txt:#8E5A06; --option-fond:#FBEFD9; --vendu:#9AA1A8; --vendu-txt:#5F666D; --vendu-fond:#ECEDEE;
  --titre:'Instrument Serif',Georgia,'Times New Roman',serif; --texte:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --large:1180px; --gout:clamp(16px,4vw,40px); --rayon:14px; --tete:64px;
}
@media (max-width:979px){:root{--tete:58px}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--tete) + 14px)}
body{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.6 var(--texte);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
h2{font:400 clamp(34px,5vw,54px)/1.05 var(--titre);letter-spacing:-.01em}
h3{font:600 19px/1.3 var(--texte)}
p{margin:0}
/* pas de mot seul en fin de paragraphe (comme sur l'accueil) */
main p,main li,main figcaption,summary span,footer p,.pied__promo p{text-wrap:pretty}
.bloc{max-width:var(--large);margin:0 auto;padding:0 var(--gout)}
.sec{padding:clamp(64px,9vh,112px) 0}
.sec__tete{display:grid;gap:14px;max-width:44rem;margin-bottom:clamp(26px,4vw,44px)}
.sec__tete p{color:var(--doux);font-size:18px}
.sur{font:600 13px/1.2 var(--texte);letter-spacing:.08em;text-transform:uppercase;color:var(--brique-fonce)}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;z-index:200000;background:#fff;padding:10px 14px;border-radius:8px}
:focus-visible{outline:2px solid var(--anthracite);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* les boutons : un plein (anthracite), un à contour */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:12px 22px;border-radius:999px;border:1px solid var(--anthracite);
  background:var(--anthracite);color:#fff;font:600 16px/1.2 var(--texte);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.btn:hover{background:#11171b;border-color:#11171b}
.btn:active{transform:scale(.98)}
.btn--contour{background:transparent;color:var(--anthracite)}
.btn--contour:hover{background:var(--anthracite);color:#fff}
.btn svg{width:16px;height:16px;flex:none}
.btn--petit{min-height:42px;padding:9px 16px;font-size:15px}
.btn[disabled]{opacity:.45;cursor:default}
/* le lien « et ensuite » en bas d'un bloc */
.lien{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding:4px 0 2px;line-height:1.3}
.lien svg{width:15px;height:15px;flex:none;transition:transform .2s}
.lien:hover svg{transform:translateX(3px)}
.suite .lien{color:var(--encre)}

/* les pastilles de statut */
.statut{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;font:600 13.5px/1.3 var(--texte);white-space:nowrap}
.statut::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.statut--dispo{background:var(--dispo-fond);color:var(--dispo)}
.statut--option{background:var(--option-fond);color:var(--option-txt)}
.statut--vendu{background:var(--vendu-fond);color:var(--vendu-txt)}

/* ============ 2. L'EN-TÊTE ET LE MENU ============ */
.tete{position:sticky;top:0;z-index:60;background:var(--fond);border-bottom:1px solid var(--ligne)}
.tete__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:var(--tete)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo svg{width:30px;height:30px;flex:none}
.logo span{font:400 24px/1 var(--titre);letter-spacing:.01em;white-space:nowrap}
.nav ul{list-style:none;margin:0;padding:0}
.nav__liens a{text-decoration:none;color:var(--doux);font-size:15.5px;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.nav__liens a:hover{color:var(--encre)}
.nav__liens a[aria-current="page"]{color:var(--encre);font-weight:600;border-bottom-color:var(--brique-fonce)}
.nav__promo{display:flex;align-items:center;gap:12px}
.nav__promo span{color:var(--doux);font-size:15px}
.btn--promo{background:var(--nuit);border-color:var(--nuit)}
.btn--promo svg{width:15px;height:15px;color:var(--sable)}
.btn--promo[aria-current="page"]{background:var(--carte);color:var(--nuit);border-color:var(--nuit)}
.btn--promo[aria-current="page"] svg{color:var(--brique-fonce)}
.langues{display:flex;gap:4px}
.langues a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;padding:4px 7px;border-radius:999px;color:var(--doux);font-size:14px;font-weight:600;letter-spacing:.03em;text-decoration:none;transition:color .2s,background-color .2s,box-shadow .2s}
.langues a:hover{color:var(--encre);background:var(--fond2)}
.langues a[aria-current]{color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--ligne-forte)}
.menu-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 16px;border:1px solid var(--ligne-forte);border-radius:999px;background:var(--carte);font-weight:600;font-size:15.5px;cursor:pointer}
.menu-btn i{position:relative;display:block;width:16px;height:2px;background:currentColor;border-radius:2px;transition:background-color .2s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s}
.menu-btn i::before{top:-5px}
.menu-btn i::after{top:5px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}
@media (min-width:980px){
  .menu-btn{display:none}
  .nav{display:flex;align-items:center;gap:30px}
  .nav__liens{display:flex;gap:26px}
  .nav__liens a{display:inline-block;padding:6px 0 4px}
  .nav__promo{padding-left:28px;border-left:1px solid var(--ligne)}
  .nav__promo span{display:none}
  .langues{margin-left:-8px}
}
/* entre 980 et 1179 px, la langue en plus : on resserre un peu le menu */
@media (min-width:980px) and (max-width:1179px){
  .nav{gap:20px}
  .nav__liens{gap:19px}
  .nav__promo{padding-left:20px}
}
@media (max-width:979px){
  .nav{position:absolute;left:0;right:0;top:100%;padding:8px var(--gout) 22px;background:var(--fond);border-bottom:1px solid var(--ligne);box-shadow:0 22px 40px -26px rgba(29,34,38,.45);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
  .tete.ouvert .nav{opacity:1;visibility:visible;transform:none}
  .nav__liens a{display:flex;align-items:center;min-height:52px;font:400 30px/1.1 var(--titre);color:var(--encre);border-bottom:1px solid var(--ligne)}
  .nav__liens a[aria-current="page"]{border-bottom-color:var(--ligne);color:var(--brique-fonce);font-weight:400}
  .nav__promo{flex-wrap:wrap;justify-content:space-between;margin-top:18px}
  .langues{gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--ligne)}
  .langues a{min-width:56px;min-height:44px;font-size:15.5px;border:1px solid var(--ligne-forte);background:var(--carte)}
  .langues a[aria-current]{background:var(--anthracite);border-color:var(--anthracite);color:#fff;box-shadow:none}
}
@media (max-width:379px){.logo span{font-size:21px}.menu-btn{padding:8px 13px}}

/* ============ 3. LE HAUT D'UNE PAGE INTÉRIEURE ============ */
.ptete{padding-top:clamp(40px,7vh,76px)}
.ptete h1{font:400 clamp(42px,6.4vw,76px)/1 var(--titre);letter-spacing:-.015em;margin-top:12px}
.ptete p.ptete__desc{color:var(--doux);font-size:18px;max-width:40rem;margin-top:16px}
.ptete + .sec{padding-top:clamp(32px,5vh,52px)}

/* ============ 4. LA FICHE D'UN LOT (Le projet, Appartements) ============ */
.fiche{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:22px;display:grid;gap:14px;box-shadow:0 18px 40px -30px rgba(29,34,38,.4)}
.fiche__haut{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fiche__haut .statut{margin-top:6px}
.fiche__nom{font:600 32px/1.05 var(--texte);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.fiche__ou{color:var(--doux);font-size:15.5px}
.fiche dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.fiche dt{color:var(--pale);font-size:13.5px}
.fiche dd{margin:0;font-weight:600;font-size:16.5px}
.fiche__prix{font:600 27px/1.15 var(--texte);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.fiche__prix small{display:block;font:400 13.5px/1.4 var(--texte);letter-spacing:0;color:var(--pale);margin-top:4px}
.fiche__btns{display:flex;flex-wrap:wrap;gap:10px}
.fiche__note{color:var(--doux);font-size:15.5px}

/* ============ 5. LE FORMULAIRE (Contact, Espace promoteur) ============ */
.form{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:clamp(18px,3vw,28px);display:grid;gap:14px}
.champ{display:grid;gap:6px}
.champ label,.champ legend{font-weight:600;font-size:15.5px}
.champ input:not([type=radio]):not([type=checkbox]),.champ select,.champ textarea{width:100%;min-height:48px;padding:11px 13px;border:1px solid var(--ligne-forte);border-radius:10px;background:#fff;font-size:16px}
.champ textarea{min-height:92px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--anthracite);outline-offset:1px;border-color:var(--anthracite)}
fieldset.champ{border:0;margin:0;padding:0}
.champ legend{padding:0;margin-bottom:6px}
.choixs{display:flex;flex-wrap:wrap;gap:8px}
.choixs label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--ligne-forte);border-radius:999px;cursor:pointer;font-weight:400;font-size:15.5px;background:#fff}
.choixs input{width:18px;height:18px;accent-color:var(--anthracite);margin:0}
.choixs label:has(input:checked){border-color:var(--anthracite);box-shadow:inset 0 0 0 1px var(--anthracite)}
.form__note{color:var(--pale);font-size:14px}
.form__ok{display:none;padding:14px 16px;border-radius:12px;background:var(--dispo-fond);color:#1F5A3A;font-size:16px}
.form__ok.vu{display:block}
.form__ok.manque{background:var(--option-fond);color:var(--option-txt)}
.form__ok a{font-weight:600}

/* ============ 6. LE PIED DE PAGE ============ */
/* 31/10 : la dernière ligne colle le bas de la page (100 px de vide dessous avant) ; elle se pose au niveau du bouton
   « haut de page » (même marge du bas, +3 px : pastille de 38 px, bouton de 44), et la pastille « Site de Matthias »
   s'y pose aussi au lieu de flotter par-dessus (commun.js la cache quand celle du pied est à l'écran) */
.pied{background:var(--fond2);border-top:1px solid var(--ligne);padding:clamp(48px,8vh,80px) 0 calc(clamp(14px,3vw,26px) + 3px + env(safe-area-inset-bottom,0px))}
.pied__grille{display:grid;gap:24px}
@media (min-width:900px){.pied__grille{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start}}
.pied__nom{font:400 30px/1.1 var(--titre)}
.pied__txt{color:var(--doux);font-size:16px;margin-top:8px;max-width:30rem}
.pied__liens{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.pied__liens a{color:var(--encre);font-size:15.5px;text-decoration:none;border-bottom:1px solid var(--ligne-forte)}
.pied__liens a:hover{border-bottom-color:var(--encre)}
.pied__promo{background:var(--nuit);color:#EEF0F1;border-radius:var(--rayon);padding:20px 22px;display:grid;gap:12px;justify-items:start}
.pied__promo p{color:rgba(238,240,241,.8);font-size:16px}
.pied__promo b{color:#fff;font-weight:600}
.pied__promo .lien{color:var(--sable)}
.credits{margin-top:clamp(28px,4vw,40px);padding-top:18px;border-top:1px solid var(--ligne-forte);color:var(--pale);font-size:13.5px;line-height:1.55}
.credits a{color:var(--doux)}
.credits p+p{margin-top:6px}
.credits__bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;margin-top:6px}
.credits__bas p{flex:1 1 24rem}
.credits a.credits__matthias{flex:none;display:inline-flex;align-items:center;padding:9px 16px;border:1px solid rgba(63,224,255,.55);border-radius:999px;
  background:#070c1b;color:#e8eefc;font:600 15px/1.2 'coquille-texte',system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:border-color .25s,color .25s}
.credits a.credits__matthias:hover{border-color:#3fe0ff;color:#3fe0ff}
.credits a.credits__matthias:focus-visible{outline:2px solid #3fe0ff;outline-offset:3px}

/* ============ 7. LES APPARITIONS (léger) ET LE BOUTON « HAUT DE PAGE » ============ */
html.js .rv{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.js .rv.vu{opacity:1;transform:none}
@media (max-width:720px){html.js .rv{transform:translate3d(0,12px,0);transition-duration:.5s}}
/* le bouton « haut de page » : bas à droite (la pastille « Site de Matthias » est en bas à gauche) */
.rh{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);bottom:calc(clamp(14px,3vw,26px) + env(safe-area-inset-bottom,0px));z-index:70;
  display:grid;place-items:center;width:44px;height:44px;padding:0;margin:0;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);
  background:var(--carte);border:1px solid var(--ligne-forte);color:var(--anthracite);border-radius:50%;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);
  transition:opacity .3s,transform .3s,visibility .3s,background-color .25s,color .25s}
.rh[data-vu="oui"]{opacity:1;visibility:visible;transform:none}
.rh:hover{background:var(--anthracite);color:#fff}
.rh svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============ 8. TÉLÉPHONE ============ */
@media (max-width:719px){
  .sec{padding:48px 0}
  .sec__tete{gap:10px;margin-bottom:22px}
  .sec__tete p{font-size:17px}
  .ptete p.ptete__desc{font-size:17px}
  .fiche{padding:18px;gap:12px}
  /* 31/10 : le pied tient dans la zone visible (sous l'en-tête) : 687 px avant, pour ~606 à 390 × 664 */
  .pied{padding-top:36px}
  .pied__grille{gap:20px}
  .pied__nom{font-size:27px}
  .pied__liens{margin-top:12px}
  .pied__promo{padding:16px 18px;gap:8px}
  .credits{margin-top:22px;padding-top:14px;font-size:13px;line-height:1.5}
  .credits__bas{gap:8px}
  .fiche__nom{font-size:34px}
  .fiche__prix{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .rv{opacity:1;transform:none}
}

/* ══ BANDE DE DÉMONSTRATION (02/10/2026 ; 29/10 : un vrai petit bouton à la place de « ← Retour » souligné).
     Toujours visible en haut de la page, EN FLUX : elle pousse la page vers le bas. ══ */
@font-face{font-family:'bande-texte';font-style:normal;font-weight:400 700;font-display:swap;src:url('/polices/onest-latin.woff2') format('woff2')}
.coquille-retour{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;box-sizing:border-box;width:auto;max-width:none;margin:0;text-indent:0;padding:8px clamp(14px,3vw,26px);background:#070c1b;border-bottom:1px solid rgba(63,224,255,.38);
  color:#e8eefc;font:500 13.5px/1.45 'bande-texte',system-ui,sans-serif;letter-spacing:0;text-align:center;text-transform:none}
.coquille-retour a{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border:1px solid rgba(63,224,255,.6);border-radius:999px;
  color:#e8eefc;font:600 13.5px/1.2 'bande-texte',system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,color .2s}
.coquille-retour a:hover{background:rgba(63,224,255,.12);border-color:#3fe0ff;color:#fff}
.coquille-retour a:focus-visible{outline:2px solid #3fe0ff;outline-offset:3px}
/* téléphone : la phrase courte (« projet fictif »), le bouton à droite, la bande sur 2 lignes au plus */
@media (max-width:620px){.coquille-retour{justify-content:space-between;text-align:left;flex-wrap:nowrap}.coquille-retour a{flex:none}.coquille-retour .cr-plus{display:none}}

/* ══ LE RETOUR VERS MATTHIAS (02/10/2026 ; 29/10 : sans la flèche « ← »).
     En bas à gauche : une petite étiquette « Site de Matthias ». Elle s'efface quand le bloc de fin
     arrive à l'écran, ou quand elle se pose sur un bouton (27/10). Le bloc « Ce site vous plaît ? »
     (Appeler, WhatsApp) est à la fin de l'Espace promoteur. ══ */
@font-face{font-family:'coquille-titre';font-style:normal;font-weight:400 800;font-display:swap;src:url('/polices/bricolage-grotesque-latin.woff2') format('woff2')}
@font-face{font-family:'coquille-texte';font-style:normal;font-weight:400 700;font-display:swap;src:url('/polices/onest-latin.woff2') format('woff2')}
a.cq{position:fixed;left:clamp(10px,2.4vw,22px);bottom:clamp(10px,2.4vw,22px);bottom:calc(clamp(10px,2.4vw,22px) + env(safe-area-inset-bottom,0px));z-index:100000;
  display:inline-flex;align-items:center;box-sizing:border-box;width:auto;max-width:none;margin:0;padding:9px 16px;
  font:600 15px/1.2 'coquille-texte',system-ui,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;color:#e8eefc;
  border:1px solid rgba(63,224,255,.55);border-radius:999px;background:rgba(7,12,27,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px -6px rgba(0,0,0,.6);
  transition:border-color .25s,color .25s,opacity .25s,visibility .25s}
a.cq:hover,a.cq:focus-visible{border-color:#3fe0ff;color:#3fe0ff}
a.cq:focus-visible{outline:2px solid #3fe0ff;outline-offset:3px}
a.cq[data-cache="oui"]{opacity:0;visibility:hidden}
.cq-fin{display:block;box-sizing:border-box;width:auto;max-width:none;margin:0;
  padding:clamp(44px,6vw,64px) clamp(16px,4vw,40px) calc(clamp(14px,3vw,26px) + 8px + env(safe-area-inset-bottom,0px));  /* 31/10 : la dernière ligne au niveau du bouton « haut de page » (90-104 px de vide dessous avant) */
  background:#070c1b;border-top:1px solid rgba(63,224,255,.38);color:#e8eefc;text-align:center;
  font:400 17px/1.55 'coquille-texte',system-ui,sans-serif;letter-spacing:0;text-transform:none}
.cq-fin *{box-sizing:border-box}
.cq-fin p.cq-fin__titre{margin:0 auto .5rem;max-width:none;padding:0;font:800 clamp(28px,4.4vw,44px)/1.1 'coquille-titre',system-ui,sans-serif;letter-spacing:-.015em;color:#eef2ff;text-transform:none}
.cq-fin p.cq-fin__texte{margin:0 auto 1.6rem;max-width:34em;padding:0;font:400 clamp(17px,1.6vw,19px)/1.55 'coquille-texte',system-ui,sans-serif;color:#c3cce3;letter-spacing:0;text-transform:none}
.cq-fin .cq-fin__boutons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0;padding:0}
.cq-fin a.cq-fin__btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;margin:0;padding:12px 26px;border-radius:999px;
  font:700 17px/1.2 'coquille-titre',system-ui,sans-serif;letter-spacing:0;text-transform:none;text-decoration:none;color:#fff;white-space:nowrap;
  transition:box-shadow .25s,border-color .25s,background-color .25s}
.cq-fin a.cq-fin__btn svg{display:block;flex:none;width:18px;height:18px}
.cq-fin a.cq-fin__btn--tel{background:linear-gradient(105deg,#6d4df2,#2456f0 55%,#1e8fd8);border:0;box-shadow:0 8px 30px rgba(56,92,255,.35)}
.cq-fin a.cq-fin__btn--tel:hover{box-shadow:0 10px 40px rgba(63,224,255,.4)}
.cq-fin a.cq-fin__btn--wa{background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.55)}
.cq-fin a.cq-fin__btn--wa:hover{background:rgba(37,211,102,.16)}
.cq-fin a.cq-fin__btn:focus-visible{outline:2px solid #3fe0ff;outline-offset:3px}
.cq-fin p.cq-fin__qui{margin:1.5rem auto 0;max-width:none;padding:0;font:400 17px/1.5 'coquille-texte',system-ui,sans-serif;color:#a9b4d0;letter-spacing:0;text-transform:none}
.cq-fin p.cq-fin__qui a{color:#e8eefc;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;font:inherit}
.cq-fin p.cq-fin__qui a:hover{color:#3fe0ff}
.cq-fin p.cq-fin__qui a.cq-fin__tel{font-size:19px}
@media (prefers-reduced-motion:reduce){a.cq,.cq-fin a.cq-fin__btn{transition:none}}
@media print{a.cq,.cq-fin,.coquille-retour{display:none}}
/* Un mot à trait d’union ne se coupe pas en fin de ligne (« vous-/même », 30/10) */
.insec{white-space:nowrap}