/* =====================================================================
   accueil.css — l'accueil de l'offre particuliers (layouts/vitrine.php)
   ---------------------------------------------------------------------
   1. Les tokens attendus par la forme des vitrines (assets/forme/css :
      base.css puis forme.css, posés par vitrines/tools/apps.php), tirés
      de la charte du parcours : blanc, bleu nuit #0F2744, acier #1E3A5F,
      bleu pâle #EAF0F7. RL Limo en titres, Figtree en texte. Le décor
      (--deco, #5B7FA6) est le bleu de la volute du logo : il dessine
      filets, pastilles et trait de pinceau, jamais du texte.
   2. Ce que la page a en propre : boutons-formulaires, motifs, prix.
   3. L'écran redessiné du héros (.pk-*), voir App\Services\Accueil.

   La forme (en-tête, coques, typographie, boutons, cartes, mouvement)
   vient de forme.css : rien de tout cela ne se redéfinit ici. Les étapes
   du parcours gardent particulier.css.
   ===================================================================== */

:root {
    /* Contrat de base.css */
    --ink:         #0F2744;
    --ink-2:       #0A1C33;
    --on-ink:      #FFFFFF;
    --on-ink-mid:  #D5E0EE;
    --on-ink-dim:  rgba(255, 255, 255, .58);
    --accent:       #1E4E86;                  /* texte accentué : 8,3:1 sur blanc */
    --accent-lift:  #A9C6E8;                  /* sur fond sombre uniquement */
    --accent-deep:  #0F2744;
    --accent-soft:  #EAF0F7;
    --accent-line:  rgba(30, 78, 134, .26);
    --alt:         #1E3A5F;
    --alt-deep:    #0F2744;
    --alt-lift:    #A9C6E8;
    --on-alt:      #FFFFFF;
    --on-alt-mid:  rgba(255, 255, 255, .88);
    --alt-line:    rgba(255, 255, 255, .22);
    --ground:      #F4F6F9;
    --paper:       #FFFFFF;
    --parchment:   #E9EEF4;
    --sunken:      #E1E7EF;
    --text:        #0A1628;
    --text-mid:    #475467;
    --text-muted:  #5D6B82;
    --line:        #E4E8EE;
    --line-strong: #8792A6;
    --chrome:      rgba(255, 255, 255, .86);
    --chrome-line: rgba(10, 22, 40, .07);
    --chrome-blur: blur(14px) saturate(1.4);
    --danger:      #A3361F;
    --danger-soft: #FBEAE5;
    --ok:          #0E6B49;
    --radius:     20px;
    --radius-sm:  12px;
    --radius-lg:  28px;
    --elev-1: 0 1px 2px rgba(10, 22, 40, .04), 0 4px 14px rgba(15, 39, 68, .07);
    --elev-2: 0 2px 4px rgba(10, 22, 40, .05), 0 14px 32px rgba(15, 39, 68, .11);
    --elev-3: 0 2px 6px rgba(10, 22, 40, .06), 0 16px 36px rgba(15, 39, 68, .14), 0 40px 80px -24px rgba(15, 39, 68, .34);
    --font-sans:  'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'RL Limo', Georgia, 'Times New Roman', serif;
    --hero-texture: url('../forme/img/liquid.webp');

    /* Contrat de forme.css */
    --deco:          #5B7FA6;
    --deco-soft:     #DCE7F3;
    --on-accent:     #FFFFFF;
    --on-ink-strong: #FFFFFF;
    --on-ink-muted:  #A7B6CA;
    --line-soft:     rgba(10, 22, 40, .08);
    --pale:          #C3CEDC;
    --ink-rgb:         15, 39, 68;
    --on-ink-rgb:      255, 255, 255;
    --accent-rgb:      30, 78, 134;
    --accent-lift-rgb: 169, 198, 232;
    --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5C38 5 78 4.2 112 6.3s63 2.7 85-1.6' fill='none' stroke='%235B7FA6' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke' opacity='.6'/%3E%3C/svg%3E");
    --plus:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%231E4E86' d='M222 128a6 6 0 0 1-6 6h-82v82a6 6 0 0 1-12 0v-82H40a6 6 0 0 1 0-12h82V40a6 6 0 0 1 12 0v82h82a6 6 0 0 1 6 6Z'/%3E%3C/svg%3E");
    /* La texture source est ocre : on la fait tourner vers le bleu. */
    --liquid-filter: hue-rotate(188deg) saturate(.7);

    /* Propre à la page */
    --ciel: #C9DDF3;
}

/* ── Boutons : l'appel principal est bleu nuit, comme dans le parcours ;
      sur fond sombre il passe en bleu ciel, sinon il s'y perdrait. ──── */
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-2); }
:is(.on-ink, .liquid, .coque-ink, .card-ink, .mnav) .btn-primary { background: var(--ciel); color: var(--ink); }
:is(.on-ink, .liquid, .coque-ink, .card-ink, .mnav) .btn-primary:hover { background: #DCE9F8; }

/* Le bouton qui commence une réservation est un formulaire : il se tient comme un lien. */
.reserver { display: contents; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── En-tête et pied ────────────────────────────────────────────────── */
.pill-logo img { height: clamp(17px, .95rem + .35vw, 21px); }
.logo-nom { font-size: 1.2rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pill-qui { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; font-size: .9375rem; font-weight: 500; color: var(--text-mid); white-space: nowrap; }
.ftr-id img { height: 22px; }
.ftr .logo-nom { color: var(--on-ink); }
.ftr-urgence li { color: var(--on-ink-mid); font-size: var(--fs-small); line-height: 1.5; }
.lien { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.acc-body a { color: var(--accent); text-underline-offset: 3px; }
.mock-cap { margin-top: .75rem; text-align: right; }

/* ── Ce qui vous amène : les motifs du parcours, en grand ───────────── */
.motifs { display: flex; flex-wrap: wrap; gap: .625rem; }
.motifs li {
    display: inline-flex; align-items: center; height: 3.25rem; padding: 0 1.4rem; border-radius: 999px;
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--elev-1);
    font-family: var(--font-serif); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); color: var(--text); white-space: nowrap;
}
.motifs li:nth-child(3n + 1) { background: var(--accent-soft); border-color: transparent; box-shadow: none; color: var(--ink); }
.motifs li:last-child { background: transparent; border-style: dashed; border-color: var(--line-strong); box-shadow: none; color: var(--text-mid); }

/* ── La séance et son prix ──────────────────────────────────────────── */
.prix { display: flex; flex-direction: column; gap: 1.25rem; }
.prix .kicker { color: var(--accent-lift); }
.prix-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .9rem; }
.prix-n b { font-weight: 400; font-size: clamp(3.4rem, 2.6rem + 2.4vw, 4.75rem); line-height: 1; color: var(--on-ink-strong); }
.prix-n span { font-size: var(--fs-small); color: var(--on-ink-mid); }
.prix-suite { padding-top: 1.25rem; border-top: 1px solid rgba(var(--on-ink-rgb), .16); color: var(--on-ink-mid); }
.prix .cap { text-align: center; color: var(--on-ink-muted); }
.prix .btn { justify-content: center; }

/* ── L'écran redessiné du héros ─────────────────────────────────────── */
.pk-tel { width: 286px; height: 520px; border-radius: 42px; background: #0A1628; padding: 10px; box-shadow: 0 30px 70px rgba(0, 0, 0, .38); font-family: var(--font-sans); font-size: 12px; line-height: 1.35; color: #0A1628; }
.pk-ecran { height: 100%; border-radius: 33px; background: #F4F6F9; padding: 26px 16px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.pk-marque { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5B7FA6; }
.pk-bonjour { font-family: var(--font-serif); font-size: 24px; line-height: 1.1; margin-bottom: 4px; }
.pk-carte { border-radius: 16px; background: #FFFFFF; padding: 13px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(10, 22, 40, .05); }
.pk-carte small, .pk-titre { font-size: 10px; color: #5D6B82; }
.pk-titre { margin-top: 6px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pk-carte b { font-weight: 600; font-size: 13px; }
.pk-nuit { background: #0F2744; color: #FFFFFF; padding: 16px; gap: 10px; box-shadow: 0 14px 30px rgba(15, 39, 68, .28); }
.pk-nuit small { color: #A9C6E8; }
.pk-nuit b { font-family: var(--font-serif); font-weight: 400; font-size: 19px; line-height: 1.15; color: #FFFFFF; }
.pk-suite { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 2px; }
.pk-suite li { position: relative; display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: #D5E0EE; }
.pk-suite li + li::before { content: ''; position: absolute; left: 8px; top: -9px; height: 9px; width: 1.5px; background: rgba(255, 255, 255, .28); }
.pk-suite i { width: 17px; height: 17px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .45); display: inline-flex; align-items: center; justify-content: center; }
.pk-suite .fait i { background: #C9DDF3; border-color: #C9DDF3; color: #0F2744; }
.pk-suite .ici { color: #FFFFFF; font-weight: 600; }
.pk-suite .ici i { border-color: #FFFFFF; box-shadow: 0 0 0 4px rgba(255, 255, 255, .16); }
.pk-bouton { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 10.5px; font-weight: 600; color: #FFFFFF; }
.pk-ligne { flex-direction: row; justify-content: space-between; align-items: center; font-weight: 600; }
.pk-ligne em { font-style: normal; font-weight: 400; font-size: 10px; color: #5D6B82; }
.pk-flot { border-radius: 20px; background: #FFFFFF; box-shadow: var(--elev-3); font-family: var(--font-sans); color: #0A1628; }
.pk-seance { width: 252px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: #475467; }
.pk-seance small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1E3A5F; }
.pk-prix { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk-prix b { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1; color: #0A1628; }
.pk-pastille { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #E7F5EE; color: #0E6B49; font-size: 10.5px; font-weight: 700; }
.pk-appel { width: 266px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: #475467; }
.pk-appel b { display: block; font-weight: 600; font-size: 13px; color: #0A1628; }
.pk-appel span { display: block; }
.pk-rond { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: #0F2744; color: #FFFFFF; display: inline-flex !important; align-items: center; justify-content: center; }

@media (max-width: 1280px) {
    .pill-qui { display: none; }
}
@media (max-width: 720px) {
    .motifs li { height: 2.875rem; padding: 0 1.1rem; white-space: normal; }
    .hero-cta .reserver .btn { width: 100%; }
}