/* =====================================================================
   ResAmicale — site vitrine.
   Même charte que l'application : Barlow, marine et rouge sapeur.
   Aucune dépendance externe, polices servies depuis le serveur.
   ===================================================================== */

@font-face { font-family:"Barlow"; font-weight:400; font-display:swap;
  src:url("fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:500; font-display:swap;
  src:url("fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:600; font-display:swap;
  src:url("fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow"; font-weight:700; font-display:swap;
  src:url("fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:600; font-display:swap;
  src:url("fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-weight:700; font-display:swap;
  src:url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
    --navy-950:#061330; --navy-900:#0a1a3d; --navy-800:#102654;
    --navy-700:#1a356c; --navy-100:#e6ebf4; --navy-50:#f1f4f9;
    --red-700:#a8070f; --red-600:#c8101a; --red-500:#e0242d;
    --red-100:#fbe3e4; --red-50:#fdf1f1;
    --ink:#0d1b2e; --ink-2:#33425a; --muted:#64748b;
    --line:#e2e7ef; --line-2:#cfd7e3; --bg:#ffffff; --bg-2:#f3f5f9;
    --green-700:#166534; --green-100:#dcfce7;
    --radius:12px; --radius-sm:8px; --radius-lg:20px;
    --font:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --titre:"Barlow Condensed", "Barlow", system-ui, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; font-family:var(--font); font-size:17px; line-height:1.6;
       color:var(--ink); background:var(--bg); }
img { max-width:100%; display:block; height:auto; }
a { color:var(--red-600); text-decoration:none; }
a:hover { text-decoration:underline; }
p { margin:0 0 14px; } p:last-child { margin-bottom:0; }
button,input,select,textarea { font:inherit; color:inherit; }

h1,h2,h3,h4 { margin:0; line-height:1.1; color:var(--navy-900); font-family:var(--titre);
              font-weight:700; letter-spacing:-.01em; }
h1 { font-size:clamp(38px, 6vw, 62px); }
h2 { font-size:clamp(28px, 4vw, 42px); }
h3 { font-size:21px; font-family:var(--font); font-weight:700; letter-spacing:0; }

.conteneur { width:100%; max-width:1180px; margin:0 auto; padding:0 22px; }
.etroit { max-width:760px; }
.ic { width:20px; height:20px; flex:none; }
.saut { position:absolute; left:-9999px; }
.saut:focus { left:12px; top:12px; z-index:50; background:#fff; padding:10px 16px;
              border-radius:var(--radius-sm); }

/* ── En-tête ───────────────────────────────────────────────────── */
.tete { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96);
        backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.tete-barre { display:flex; align-items:center; justify-content:space-between;
              gap:20px; height:72px; }
.marque img { width:150px; height:auto; }
.marque:hover { text-decoration:none; }
.menu { display:flex; align-items:center; gap:4px; }
.menu > a:not(.btn) { padding:9px 14px; font-size:16px; font-weight:600;
            color:var(--ink-2); border-radius:var(--radius-sm); }
.menu > a:not(.btn):hover { background:var(--navy-50); color:var(--navy-900);
            text-decoration:none; }
.menu > a:not(.btn).actif { color:var(--red-600); }
.menu .btn { margin-left:8px; }
.menu-bascule, .menu-bouton { display:none; }

/* ── Boutons ───────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
       padding:12px 22px; border-radius:var(--radius-sm); border:1.5px solid transparent;
       font-size:16.5px; font-weight:700; line-height:1.25; cursor:pointer;
       text-align:center;
       background:var(--navy-900); color:#fff; }
.btn:hover { background:var(--navy-800); text-decoration:none; }
.btn-rouge { background:var(--red-600); } .btn-rouge:hover { background:var(--red-700); }
.btn-clair { background:#fff; color:var(--navy-900); border-color:var(--line-2); }
.btn-clair:hover { background:var(--navy-50); }
.btn-fantome { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-fantome:hover { background:rgba(255,255,255,.12); }
.btn-sm { padding:9px 16px; font-size:15px; }
.btn-lg { padding:15px 30px; font-size:18px; }

/* ── Bandeau d'accueil ─────────────────────────────────────────── */
.heros { background:var(--navy-950); color:#fff; padding:76px 0 86px;
         position:relative; overflow:hidden; }
.heros::after { content:""; position:absolute; right:-180px; top:-180px;
                width:620px; height:620px; border-radius:50%;
                background:radial-gradient(circle, rgba(200,16,26,.26), transparent 68%); }
.heros .conteneur { position:relative; z-index:1; }
.heros-grille { display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; }
.heros h1 { color:#fff; margin-bottom:20px; }
.heros h1 em { font-style:normal; color:var(--red-500); }
.heros-chapo { font-size:20px; line-height:1.55; color:#c3cfe3; margin-bottom:28px; max-width:30em; }
.heros-boutons { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.heros-note { font-size:15px; color:#8fa2c0; display:flex; align-items:center; gap:8px; }
.heros-note strong { color:#fff; }

.capture-tel { max-width:300px; margin:0 auto; border-radius:28px;
               border:9px solid #16233d; box-shadow:0 26px 60px rgba(0,0,0,.45);
               background:#16233d; }

/* ── Chiffres ──────────────────────────────────────────────────── */
.chiffres { background:var(--navy-900); color:#fff; padding:26px 0; }
.chiffres-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
                   gap:22px; text-align:center; }
.chiffre .n { font-family:var(--titre); font-size:42px; font-weight:700; line-height:1; }
.chiffre .l { font-size:14.5px; color:#9fb1cc; margin-top:4px; }

/* ── Sections ──────────────────────────────────────────────────── */
.section { padding:78px 0; }
.section-grise { background:var(--bg-2); }
.section-tete { max-width:760px; margin:0 auto 46px; text-align:center; }
.section-tete p { font-size:18.5px; color:var(--muted); margin-top:14px; }
.surtitre { display:inline-block; font-size:13.5px; font-weight:700; letter-spacing:.09em;
            text-transform:uppercase; color:var(--red-600); margin-bottom:12px; }

/* ── Cartes de modules ─────────────────────────────────────────── */
.grille { display:grid; gap:22px; }
.grille-2 { grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); }
.grille-3 { grid-template-columns:repeat(auto-fit,minmax(285px,1fr)); }

.carte { background:#fff; border:1px solid var(--line); border-radius:var(--radius);
         padding:26px; }
.carte-ico { width:46px; height:46px; border-radius:11px; background:var(--red-50);
             color:var(--red-600); display:grid; place-items:center; margin-bottom:16px; }
.carte-ico .ic { width:23px; height:23px; }
.carte h3 { margin-bottom:8px; }
.carte p { color:var(--muted); font-size:16px; }
.carte-lien { display:inline-flex; align-items:center; gap:6px; margin-top:14px;
              font-weight:600; font-size:15.5px; }

/* ── Fiche module détaillée ────────────────────────────────────── */
.module { display:grid; grid-template-columns:52px 1fr; gap:20px; padding:30px 0;
          border-bottom:1px solid var(--line); scroll-margin-top:90px; }
.module:last-child { border-bottom:none; }
.module .num { width:46px; height:46px; border-radius:11px; background:var(--navy-50);
               color:var(--navy-800); display:grid; place-items:center; }
.module h3 { margin-bottom:7px; }
.module .resume { font-weight:600; color:var(--ink-2); margin-bottom:9px; }
.module .detail { color:var(--muted); font-size:16.5px; }
.module .socle { display:inline-block; font-size:12.5px; font-weight:700; padding:2px 9px;
                 border-radius:20px; background:var(--navy-100); color:var(--navy-800);
                 margin-left:8px; vertical-align:middle; }

/* ── Tarifs ────────────────────────────────────────────────────── */
.offres { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
          gap:24px; align-items:start; }
.offre { background:#fff; border:1.5px solid var(--line); border-radius:var(--radius-lg);
         padding:30px; position:relative; }
.offre.phare { border-color:var(--red-600); box-shadow:0 18px 42px rgba(200,16,26,.13); }
.offre-ruban { position:absolute; top:-13px; left:50%; transform:translateX(-50%);
               background:var(--red-600); color:#fff; font-size:13px; font-weight:700;
               padding:4px 15px; border-radius:20px; white-space:nowrap; }
.offre h3 { font-family:var(--titre); font-size:28px; }
.offre .accroche { color:var(--muted); font-size:15.5px; margin:6px 0 20px; min-height:3em; }
.offre .prix { font-family:var(--titre); font-size:46px; font-weight:700;
               color:var(--navy-900); line-height:1; }
.offre .prix small { font-family:var(--font); font-size:16px; font-weight:500;
                     color:var(--muted); display:block; margin-top:5px; letter-spacing:0; }
.offre .mes { font-size:14.5px; color:var(--muted); margin-top:9px; }
.offre ul { list-style:none; padding:0; margin:22px 0; }
.offre li { display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:16px; }
.offre li .ic { color:var(--green-700); margin-top:3px; width:18px; height:18px; }
.offre .btn { width:100%; margin-top:4px; }
.offre-modules { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.offre-modules .t { font-size:13px; font-weight:700; text-transform:uppercase;
                    letter-spacing:.06em; color:var(--muted); margin-bottom:10px; }
.puce { display:inline-block; font-size:13.5px; padding:3px 10px; border-radius:20px;
        background:var(--navy-50); color:var(--ink-2); margin:0 5px 6px 0; }

/* ── Tableau comparatif ────────────────────────────────────────── */
.compare { width:100%; border-collapse:collapse; font-size:16px; background:#fff;
           border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.compare th { text-align:left; padding:14px 16px; background:var(--navy-900); color:#fff;
              font-size:15px; font-weight:700; }
.compare th.c, .compare td.c { text-align:center; width:130px; }
.compare td { padding:13px 16px; border-bottom:1px solid var(--line); }
.compare tr:last-child td { border-bottom:none; }
.compare tbody tr:nth-child(even) { background:var(--navy-50); }
.oui { color:var(--green-700); font-weight:700; }
.non { color:var(--line-2); }

/* ── Encarts ───────────────────────────────────────────────────── */
.encart { background:var(--navy-50); border-left:3px solid var(--navy-800);
          border-radius:var(--radius-sm); padding:20px 24px; margin:26px 0; }
.encart.rouge { background:var(--red-50); border-left-color:var(--red-600); }
.encart h3 { font-size:17px; margin-bottom:7px; }
.encart p { font-size:16px; color:var(--ink-2); }

/* ── Étapes ────────────────────────────────────────────────────── */
.etapes { counter-reset:etape; display:grid; gap:4px; }
.etape { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:20px 0;
         border-bottom:1px solid var(--line); }
.etape:last-child { border-bottom:none; }
.etape::before { counter-increment:etape; content:counter(etape);
                 width:40px; height:40px; border-radius:50%; background:var(--red-600);
                 color:#fff; display:grid; place-items:center;
                 font-family:var(--titre); font-size:21px; font-weight:700; }
.etape h3 { margin-bottom:5px; }
.etape p { color:var(--muted); font-size:16px; }

/* ── Appel à l'action ──────────────────────────────────────────── */
.bande-appel { background:var(--navy-950); color:#fff; padding:66px 0; text-align:center; }
.bande-appel h2 { color:#fff; margin-bottom:14px; }
.bande-appel p { font-size:18.5px; color:#b8c6dd; max-width:36em; margin:0 auto 28px; }
.appel-boutons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ── Formulaire ────────────────────────────────────────────────── */
.form-carte { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
              padding:34px; }
.champ { margin-bottom:17px; }
.champ label { display:block; font-size:15px; font-weight:600; color:var(--ink-2);
               margin-bottom:6px; }
.champ .aide { font-size:14px; color:var(--muted); margin-top:5px; }
.champ .obl { color:var(--red-600); }
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea {
    width:100%; padding:12px 14px; border:1.5px solid var(--line-2);
    border-radius:var(--radius-sm); background:#fff; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--navy-800);
    outline-offset:-1px; border-color:var(--navy-800); }
textarea { min-height:110px; resize:vertical; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.message { padding:14px 18px; border-radius:var(--radius-sm); margin-bottom:22px;
           font-size:16px; border:1px solid; display:flex; gap:10px; align-items:flex-start; }
.message.ok { background:var(--green-100); border-color:#bbf7d0; color:var(--green-700); }
.message.ko { background:var(--red-50); border-color:#fbd0d3; color:#9f1239; }
.message .ic { margin-top:3px; }

/* ── Questions fréquentes ──────────────────────────────────────── */
.faq details { border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary { padding:17px 0; font-weight:700; font-size:17.5px; cursor:pointer;
               color:var(--navy-900); list-style:none; display:flex;
               justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:25px; color:var(--red-600);
                      font-weight:400; line-height:1; flex:none; }
.faq details[open] summary::after { content:"−"; }
.faq .reponse { padding:0 0 18px; color:var(--muted); font-size:16.5px; max-width:70ch; }

/* ── Contenu long ──────────────────────────────────────────────── */
.texte h2 { font-size:28px; margin:34px 0 14px; }
.texte h3 { margin:24px 0 10px; }
.texte ul { padding-left:22px; color:var(--ink-2); }
.texte li { margin-bottom:8px; }
.texte .maj { font-size:15px; color:var(--muted); }

/* ── Pied de page ──────────────────────────────────────────────── */
.pied { background:var(--navy-950); color:#9fb1cc; padding:54px 0 28px; font-size:15.5px; }
.pied-grille { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
               padding-bottom:34px; border-bottom:1px solid #16294f; }
.pied h3 { color:#fff; font-size:15px; font-family:var(--font); margin-bottom:14px;
           text-transform:uppercase; letter-spacing:.06em; }
.pied a { display:block; color:#9fb1cc; padding:5px 0; }
.pied a:hover { color:#fff; }
.pied-nom { font-family:var(--titre); font-size:32px; font-weight:700;
             color:#fff; letter-spacing:-.01em; margin-bottom:12px; }
.pied-nom span { color:var(--red-500); }
.pied-marque p { color:#8094b4; font-size:15px; }
.pied-stores { display:flex; gap:10px; margin-top:14px; }
.pied-stores a { display:inline-block; padding:7px 14px; border:1px solid #1d3159;
                 border-radius:var(--radius-sm); font-size:14.5px; }
.pied-bas { display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
            padding-top:22px; font-size:14.5px; color:#74879f; }
.pied-bas strong { color:#9fb1cc; }

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width:940px) {
    .heros-grille { grid-template-columns:1fr; gap:40px; }
    .heros { padding:52px 0 60px; }
    .capture-tel { max-width:250px; }
    .pied-grille { grid-template-columns:1fr 1fr; gap:28px; }
}

@media (max-width:760px) {
    body { font-size:16.5px; }
    .section { padding:54px 0; }
    .menu-bouton { display:flex; flex-direction:column; justify-content:center; gap:5px;
                   width:42px; height:42px; cursor:pointer; padding:9px; }
    .menu-bouton span { display:block; height:2px; background:var(--navy-900);
                        border-radius:2px; }
    .menu { position:absolute; top:72px; left:0; right:0; background:#fff;
            border-bottom:1px solid var(--line); flex-direction:column;
            align-items:stretch; padding:12px 22px 20px; gap:2px; display:none; }
    .menu-bascule:checked ~ .menu { display:flex; }
    .menu > a { padding:12px 10px; }
    .menu .btn { margin:8px 0 0; }
    .duo { grid-template-columns:1fr; }
    .pied-grille { grid-template-columns:1fr; }
    .form-carte { padding:24px 20px; }
    .module { grid-template-columns:1fr; gap:12px; }
    .compare { font-size:15px; display:block; overflow-x:auto; }
}

/* ─────────────────────────────────────────────────────────────────
   Tarif unique
   ───────────────────────────────────────────────────────────────── */

.offre-unique { max-width: 520px; margin: 0 auto; background: #fff;
                border: 1px solid var(--trait, #e4e7ef); border-radius: 20px;
                padding: 36px 32px; box-shadow: 0 18px 50px rgba(10,26,61,.07); }

.offre-prix { text-align: center; padding-bottom: 24px;
              border-bottom: 1px solid var(--trait, #e4e7ef); }
.offre-prix .montant { display: block; font-size: 58px; font-weight: 800;
                       letter-spacing: -.03em; line-height: 1;
                       color: var(--ink, #0a1a3d); }
.offre-prix .periode { display: block; margin-top: 8px; color: var(--ink-2, #5b6680);
                       font-size: 15px; }

.offre-liste { list-style: none; margin: 24px 0 28px; padding: 0; }
.offre-liste li { display: flex; gap: 10px; align-items: flex-start;
                  padding: 7px 0; font-size: 16px; }
.offre-liste svg { flex: 0 0 auto; width: 20px; height: 20px;
                   color: var(--rouge, #d10714); margin-top: 2px; }

.offre-note { margin-top: 14px; text-align: center; font-size: 14px;
              color: var(--ink-2, #5b6680); }

.btn-bloc { display: block; width: 100%; text-align: center; }

/* Coût par membre */
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.par-membre .carte { padding: 22px 14px; }
.par-membre-n { font-size: 30px; font-weight: 800; letter-spacing: -.02em;
                color: var(--rouge, #d10714); }
.par-membre-l { margin-top: 6px; font-size: 14px; color: var(--ink-2, #5b6680);
                line-height: 1.5; }

.centre { text-align: center; }
.muet   { color: var(--ink-2, #5b6680); }

@media (max-width: 860px) {
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .offre-prix .montant { font-size: 46px; }
  .offre-unique { padding: 28px 20px; }
}

/* Le prix, dès le bandeau : c'est la première question posée. */
.heros-prix { margin-top: 18px; padding: 14px 18px; border-radius: 12px;
              background: rgba(255,255,255,.08); font-size: 15.5px;
              line-height: 1.6; }
.heros-prix strong { font-size: 17px; }
/* Le lien hérite sinon du rouge de la marque, illisible sur le fond
   marine du bandeau. On le force en blanc, souligné pour rester
   reconnaissable comme lien. */
.heros-prix a { color: #fff; margin-left: 6px; text-decoration: underline;
                text-underline-offset: 3px; font-weight: 600; }
.heros-prix a:hover { color: #fff; opacity: .85; }