/* =====================================================================
   CoPil Solutions - Conseil Syndical · feuille de style du site
   ---------------------------------------------------------------------
   Extraite de index.html le 13/08/2026, pour être partagée par la page
   d'accueil et les deux formulaires. Une seule charte, un seul fichier.
   ===================================================================== */
:root{
    --bleu:#16324F; --bleu2:#2C5A82; --orange:#F1663D;
    --gris:#5C6B7A; --creme:#F7F5F0; --ligne:#E3E0DA; --texte:#20303F;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
       color:var(--texte);line-height:1.6;font-size:16px;background:#fff}
  .wrap{max-width:1060px;margin:0 auto;padding:0 24px}
  a{color:var(--bleu2)}

  /* --- barre --- */
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
         backdrop-filter:blur(8px);border-bottom:1px solid var(--ligne)}
  .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
  .bar img{height:38px}
  nav a{margin-left:26px;text-decoration:none;color:var(--gris);font-size:14.5px;font-weight:600}
  nav a:hover{color:var(--bleu)}
  .btn{display:inline-block;background:var(--orange);color:#fff!important;text-decoration:none;
       font-weight:700;padding:11px 22px;border-radius:30px;font-size:15px;border:0;cursor:pointer;
       transition:transform .12s ease,box-shadow .12s ease}
  .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(241,102,61,.32)}
  .btn.ghost{background:transparent;color:var(--bleu)!important;border:1.5px solid var(--bleu)}
  .btn.ghost:hover{background:var(--bleu);color:#fff!important;box-shadow:none}
  nav .btn{margin-left:26px;padding:9px 18px}
  .burger{display:none;background:0;border:0;font-size:24px;color:var(--bleu);cursor:pointer}

  /* --- héros --- */
  .hero{padding:74px 0 60px;background:linear-gradient(180deg,var(--creme),#fff)}
  .hero h1{font-size:clamp(30px,4.6vw,50px);line-height:1.12;color:var(--bleu);font-weight:800;
           letter-spacing:-.5px;max-width:16ch}
  .hero h1 .o{color:var(--orange)}
  .hero .lead{margin-top:20px;font-size:clamp(16.5px,2vw,19.5px);color:var(--gris);max-width:60ch}
  .hero .cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
  .chips{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;font-size:14px;color:var(--gris)}
  .chips b{color:var(--bleu)}

  /* --- sections --- */
  section{padding:66px 0}
  section.alt{background:var(--creme)}
  h2{font-size:clamp(23px,3vw,32px);color:var(--bleu);font-weight:800;letter-spacing:-.3px}
  h2 .bar-o{display:block;width:52px;height:4px;background:var(--orange);border-radius:3px;margin-bottom:16px}
  .sub{margin-top:12px;color:var(--gris);max-width:65ch;font-size:17px}

  .grid{display:grid;gap:20px;margin-top:38px}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}

  .pain{background:#fff;border-left:4px solid var(--orange);border-radius:6px;padding:20px 22px;
        box-shadow:0 1px 3px rgba(22,50,79,.06)}
  .pain b{display:block;color:var(--bleu);margin-bottom:6px;font-size:16.5px}
  .pain p{font-size:14.8px;color:var(--gris)}

  .feat{background:#fff;border:1px solid var(--ligne);border-radius:10px;padding:22px}
  .feat .ic{width:34px;height:34px;border-radius:9px;background:var(--creme);display:flex;
            align-items:center;justify-content:center;margin-bottom:12px}
  .feat .ic i{display:block;width:13px;height:13px;background:var(--orange);border-radius:3px}
  .feat b{display:block;color:var(--bleu);font-size:16.5px;margin-bottom:5px}
  .feat p{font-size:14.6px;color:var(--gris)}

  /* --- prix --- */
  .plans{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:38px;align-items:start}
  .plan{border:1px solid var(--ligne);border-radius:14px;overflow:hidden;background:#fff}
  .plan .ph{padding:26px 28px;color:#fff;background:var(--gris)}
  .plan.prem{border-color:var(--bleu);box-shadow:0 10px 34px rgba(22,50,79,.13)}
  .plan.prem .ph{background:linear-gradient(125deg,var(--bleu),var(--bleu2))}
  .plan .nom{font-size:20px;font-weight:800}
  .plan .prix{margin-top:12px;font-size:40px;font-weight:800;line-height:1}
  .plan .prix span{font-size:16px;font-weight:600;opacity:.9}
  .plan .mens{margin-top:9px;font-size:14px;opacity:.92}
  .plan .pb{padding:24px 28px 28px}
  .plan li{list-style:none;padding-left:26px;position:relative;margin-bottom:11px;font-size:15px}
  .plan li::before{content:"✓";position:absolute;left:0;color:var(--orange);font-weight:800}
  .plan li.h{font-weight:700;color:var(--bleu)}
  .plan li.h::before{content:"+";font-size:19px;top:-3px}
  .tag{display:inline-block;background:var(--orange);font-size:11.5px;font-weight:800;
       padding:3px 10px;border-radius:20px;letter-spacing:.5px;margin-left:9px;vertical-align:4px}
  .prix-note{margin-top:26px;font-size:14.6px;color:var(--gris);text-align:center}

  /* --- documents --- */
  .doc{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--ligne);
       border-radius:10px;padding:18px 20px;text-decoration:none;color:inherit;transition:.14s}
  .doc:hover{border-color:var(--bleu2);box-shadow:0 5px 18px rgba(22,50,79,.09);transform:translateY(-2px)}
  .doc .n{flex:0 0 38px;height:38px;border-radius:9px;background:var(--bleu);color:#fff;font-weight:800;
          display:flex;align-items:center;justify-content:center;font-size:16px}
  .doc.reg .n{background:var(--bleu2)}
  .doc b{display:block;color:var(--bleu);font-size:15.6px;margin-bottom:3px}
  .doc p{font-size:13.8px;color:var(--gris)}
  .doc .dl{font-size:12.5px;color:var(--orange);font-weight:700;margin-top:6px;display:block}
  .lot{margin-top:34px}
  .lot h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);
          font-weight:800;margin-bottom:16px}

  /* --- confiance --- */
  .tr{background:#fff;border-radius:10px;padding:20px 22px;border:1px solid var(--ligne)}
  .tr b{display:block;color:var(--bleu);margin-bottom:6px;font-size:16px}
  .tr p{font-size:14.5px;color:var(--gris)}

  /* --- étapes --- */
  .step{text-align:center}
  .step .n{width:44px;height:44px;line-height:44px;border-radius:50%;background:var(--bleu);color:#fff;
           font-weight:800;margin:0 auto 12px;font-size:18px}
  .step b{display:block;color:var(--bleu);margin-bottom:5px;font-size:16px}
  .step p{font-size:14.4px;color:var(--gris)}

  /* --- appel final --- */
  .final{background:linear-gradient(125deg,var(--bleu),var(--bleu2));color:#fff;text-align:center;
         padding:70px 0}
  .final h2{color:#fff}
  .final h2 .bar-o{margin:0 auto 16px}
  .final p{margin-top:14px;opacity:.93;font-size:17.5px;max-width:56ch;margin-left:auto;margin-right:auto}
  .final .cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .final .btn.ghost{color:#fff!important;border-color:rgba(255,255,255,.7)}
  .final .btn.ghost:hover{background:#fff;color:var(--bleu)!important}

  /* --- pied --- */
  footer{background:var(--bleu);color:#fff;padding:44px 0 30px;font-size:14px}
  footer img{height:40px;margin-bottom:16px}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
  footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;opacity:.75}
  footer a{color:#fff;text-decoration:none;opacity:.9;display:block;margin-bottom:7px}
  footer a:hover{opacity:1;text-decoration:underline}
  .legal{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
         font-size:12.2px;opacity:.72;line-height:1.7}

  @media(max-width:860px){
    .g3,.g4,.g2,.plans,.fgrid{grid-template-columns:1fr}
    nav{display:none}
    nav.open{display:block;position:absolute;top:66px;left:0;right:0;background:#fff;
             border-bottom:1px solid var(--ligne);padding:16px 24px}
    nav.open a{display:block;margin:0 0 14px}
    nav.open .btn{margin:6px 0 0;display:inline-block}
    .burger{display:block}
    section{padding:50px 0}
    .hero{padding:52px 0 44px}
  }

/* ---------------------------------------------------------------------
   FORMULAIRES
   --------------------------------------------------------------------- */
.form-wrap{max-width:760px;margin:0 auto}
.form-wrap .sub{margin-bottom:4px}
.fgroup{margin-bottom:22px}
.fgroup h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);
           font-weight:800;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--ligne)}
.frow{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.frow>div{flex:1;min-width:220px}
label{display:block;font-size:13.5px;font-weight:700;color:var(--bleu);margin-bottom:5px}
label .opt{font-weight:600;color:var(--gris);font-size:12.5px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border:1.5px solid var(--ligne);border-radius:8px;
  font-family:inherit;font-size:15px;color:var(--texte);background:#fff}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--bleu2);
  box-shadow:0 0 0 3px rgba(44,90,130,.12)}
textarea{resize:vertical;min-height:90px}
.hint{font-size:12.5px;color:var(--gris);margin-top:4px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--gris);
         background:var(--creme);border-radius:8px;padding:14px 16px}
.consent input{margin-top:3px;flex:0 0 auto;width:auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{background:#fee2e2;border-left:4px solid #dc2626;color:#991b1b;padding:14px 18px;
     border-radius:8px;margin-bottom:24px;font-size:14.5px}
.err ul{margin:6px 0 0 18px}
.ok-box{background:#dcfce7;border-left:4px solid #16a34a;color:#14532d;padding:24px 28px;
        border-radius:10px;font-size:15.5px;line-height:1.6;margin-top:26px}
.ok-box b{color:#14532d}
.retour{display:inline-block;margin-top:26px;font-weight:700}
.bandeau{background:var(--creme);border-left:4px solid var(--orange);border-radius:8px;
         padding:18px 22px;margin:26px 0 30px;font-size:15px;line-height:1.55}
.bandeau b{color:var(--bleu)}

/* --- champ en faute ---------------------------------------------------
   Le récapitulatif en haut de page dit ce qui manque, mais il faut
   remonter chercher le champ concerné. La couleur et le message sous le
   champ disent la même chose là où l'œil se trouve déjà. */
input.ko,select.ko,textarea.ko{border-color:#DC2626;background:#FEF2F2}
input.ko:focus,select.ko:focus,textarea.ko:focus{border-color:#DC2626;
  box-shadow:0 0 0 3px rgba(220,38,38,.15)}
label.consent.ko{background:#FEF2F2;border:1.5px solid #DC2626}
.msg-err{display:none;font-size:13px;font-weight:700;color:#B91C1C;margin-top:5px;line-height:1.4}
.msg-err.on{display:block}
.msg-err::before{content:"⚠ ";font-weight:800}

/* =====================================================================
   REPRISE DU DOCUMENT COMMERCIAL 1
   ---------------------------------------------------------------------
   Le prospect télécharge l'offre PDF après avoir lu la page d'accueil.
   Les deux doivent se ressembler, sinon il a l'impression de changer
   d'entreprise en cours de route. Les blocs ci-dessous sont la
   transposition web des éléments de « 0-descriptif » et « 1b-offre-tarifs ».
   ===================================================================== */

/* --- face-à-face « aujourd'hui / demain » ---
   ATTENTION : les largeurs de colonnes se déclarent sur la PREMIÈRE ligne
   quand table-layout est fixed. Sans elles, les colonnes se partagent la
   largeur à parts égales et la mise en page part en morceaux. */
.fa{width:100%;border-collapse:separate;border-spacing:0;margin-top:34px;table-layout:fixed;
    border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(22,50,79,.08)}
.fa col.ca,.fa col.cb{width:50%}
/* Code couleur repris tel quel du document commercial 1 : l'aujourd'hui en
   gris pâle, le demain en orange. C'est l'orange qui porte la promesse. */
.fa th{padding:13px 24px;font-size:12.5px;font-weight:800;text-align:left;
       letter-spacing:.05em;text-transform:uppercase}
.fa th.a{background:#EEF0F2;color:var(--gris)}
.fa th.b{background:var(--orange);color:#fff}
.fa td{padding:20px 24px;vertical-align:top;border-bottom:1px solid var(--ligne)}
.fa td.a{background:#F7F8F9}
.fa td.b{background:#FDF1EC}
.fa tr:last-child td{border-bottom:0}
.fa b{display:block;font-size:16.5px;line-height:1.35;margin-bottom:7px;color:var(--texte)}
.fa td.b b{color:var(--orange)}
.fa span{display:block;font-size:14.8px;color:var(--gris);line-height:1.55}

/* --- comparatif des deux offres --- */
.cmpo{width:100%;border-collapse:separate;border-spacing:0;margin-top:34px;table-layout:fixed;
      box-shadow:0 2px 10px rgba(22,50,79,.07);border-radius:12px}
.cmpo col.cl{width:52%}
.cmpo col.cv{width:24%}
.cmpo th{padding:16px 18px;font-size:19px;font-weight:800;line-height:1.25}
.cmpo th.lab{background:#fff;color:var(--bleu);text-align:left;font-size:16px;vertical-align:bottom;
             padding-left:0;box-shadow:none}
.cmpo th.ess{background:var(--gris);color:#fff;text-align:center;border-radius:12px 0 0 0}
.cmpo th.pre{background:linear-gradient(125deg,var(--bleu),var(--bleu2));color:#fff;text-align:center;
             border-radius:0 12px 0 0}
.cmpo th.pre .sub{display:block;font-weight:700;font-size:11px;color:#FF8659;margin-top:5px;
                  line-height:1.45;letter-spacing:.01em;max-width:none}
.cmpo td{padding:13px 20px;border-bottom:1px solid #E4E7EA;vertical-align:middle;
         font-size:15px;line-height:1.45}
.cmpo td.f{color:var(--texte);background:#fff;padding-left:0;border-bottom-color:#EDEAE4}
.cmpo td.f b{color:var(--bleu)}
.cmpo td.ok,.cmpo td.no{text-align:center;font-size:20px;font-weight:800}
.cmpo td.ok{color:#16A34A}
.cmpo td.no{color:#DC2626}
.cmpo td.ess{background:#EDEFF1}
.cmpo td.pre{background:#E3EAF1}
.cmpo tr:last-child td.ess{border-radius:0 0 0 12px;border-bottom:0}
.cmpo tr:last-child td.pre{border-radius:0 0 12px 0;border-bottom:0}
.cmpo tr:last-child td.f{border-bottom:0}

/* --- grille de prix, mêmes couleurs que le comparatif --- */
.tarif{width:100%;border-collapse:separate;border-spacing:0;margin-top:26px;table-layout:fixed;
       box-shadow:0 2px 10px rgba(22,50,79,.07);border-radius:12px}
.tarif col.cl{width:34%}
.tarif col.cv{width:33%}
.tarif th{padding:16px 18px;font-size:19px;font-weight:800;line-height:1.25}
.tarif th.lab{background:#fff;padding-left:0}
.tarif th.ess{background:var(--gris);color:#fff;text-align:center;border-radius:12px 0 0 0}
.tarif th.pre{background:linear-gradient(125deg,var(--bleu),var(--bleu2));color:#fff;text-align:center;
              border-radius:0 12px 0 0}
.tarif th.pre .sub{display:block;font-weight:700;font-size:11px;color:#FF8659;margin-top:5px;
                   line-height:1.45;max-width:none}
.tarif td{padding:18px;border-bottom:2px solid #fff;vertical-align:middle}
.tarif td.lab{background:var(--creme);color:var(--bleu);font-size:15.5px;font-weight:700}
.tarif .p2{text-align:center;color:var(--bleu);font-size:15.5px;line-height:1.3}
.tarif .p2 b{font-size:28px;font-weight:800;letter-spacing:-.5px}
.tarif .p2.ess{background:#EDEFF1}
.tarif .p2.pre{background:#E3EAF1}
.tarif .sc{font-size:13px;color:var(--gris);font-weight:600;margin-top:3px}
.tarif tr:last-child td.ess{border-radius:0 0 0 12px;border-bottom:0}
.tarif tr:last-child td.pre{border-radius:0 0 12px 0;border-bottom:0}
.tarif tr:last-child td.lab{border-bottom:0}

/* --- encadré crème à filet orange, comme dans le PDF --- */
.enc{background:var(--creme);border-left:4px solid var(--orange);border-radius:8px;
     padding:18px 22px;margin-top:24px;font-size:15px;line-height:1.6;color:var(--gris)}
.enc b{color:var(--bleu)}

/* --- bloc « option Premium » (l'assistant IA) --- */
.prembloc{border:1.5px solid var(--bleu);border-radius:12px;overflow:hidden;margin-top:34px}
.prembloc .ph{background:linear-gradient(125deg,var(--bleu),var(--bleu2));color:#fff;
              padding:14px 22px;font-weight:800;font-size:17px}
.prembloc .ph .tag{background:rgba(255,255,255,.22);vertical-align:2px}
.prembloc .pb{padding:20px 22px 22px;background:#fff}
.prembloc p{font-size:15px;color:var(--gris)}
.prembloc table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14.8px}
.prembloc th{background:var(--creme);color:var(--bleu);text-align:left;padding:9px 14px;font-size:14px}
.prembloc td{padding:9px 14px;border-bottom:1px solid #E9E6E0}
.prembloc tr:last-child td{border-bottom:0}
.prembloc td.q{text-align:center;font-weight:800;color:var(--orange);white-space:nowrap}

/* --- engagements, quatre en ligne, avec le ✓ orange du PDF --- */
.eng{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.eng > div{background:var(--creme);border-radius:10px;padding:20px 22px 20px 46px;position:relative;
           font-size:14.6px;color:var(--gris)}
.eng > div::before{content:"✓";position:absolute;left:20px;top:19px;color:var(--orange);
                   font-weight:800;font-size:18px;line-height:1}
.eng b{display:block;color:var(--bleu);font-size:16px;margin-bottom:6px}

@media(max-width:860px){
  .eng{grid-template-columns:1fr}
  /* Le face-à-face perd tout son sens empilé : on garde les deux colonnes
     mais on resserre, quitte à réduire le corps du texte. */
  .fa th,.fa td{padding:13px 14px}
  .fa b{font-size:14.5px;margin-bottom:5px}
  .fa span{font-size:13.2px}
  .cmpo td,.cmpo th{padding:10px 10px;font-size:13.4px}
  .cmpo td.f,.cmpo th.lab{padding-left:2px}
  .cmpo th.ess,.cmpo th.pre{font-size:15px}
  .cmpo th.pre .sub{font-size:9.6px}
  .cmpo td.ok,.cmpo td.no{font-size:17px}
  .cmpo col.cl{width:58%}
  .cmpo col.cv{width:21%}
  .tarif th,.tarif td{padding:12px 10px}
  .tarif td.lab{font-size:14px}
  .tarif .p2{font-size:13.5px}
  .tarif .p2 b{font-size:21px}
  .tarif th.ess,.tarif th.pre{font-size:15px}
  .tarif .sc{font-size:11.5px}
}


/* ---------------------------------------------------------------------
   BANDEAU EN DEUX COLONNES + PRÉSENTATION ANIMÉE          (ajout 14/08/26)
   --------------------------------------------------------------------- */
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
             gap:46px;align-items:center}
/* dans une demi-colonne, le titre du bandeau doit descendre d'un cran */
.hero-grille h1{font-size:clamp(28px,3.3vw,39px)}
.hero-grille .lead{margin-top:16px;font-size:clamp(15.5px,1.5vw,17.5px);max-width:none}
.hero-grille .cta{margin-top:26px}
.hero-grille .chips{margin-top:24px;gap:10px 22px;font-size:13.4px}

.anim-cadre{border-radius:14px;overflow:hidden;background:#12314a;line-height:0;
            box-shadow:0 18px 46px rgba(22,50,79,.24)}
.anim-cadre iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.anim-legende{margin-top:12px;text-align:center;font-size:13.5px;color:var(--gris);line-height:1.5}
.anim-legende b{color:var(--bleu)}

@media(max-width:980px){
  .hero-grille{grid-template-columns:1fr;gap:34px}
  .hero-grille .hero-anim{order:2}   /* sur mobile : le discours et les boutons d'abord */
  .hero-grille h1{font-size:clamp(30px,4.6vw,50px)}
  .hero-grille .lead{max-width:60ch}
}

/* =====================================================================
   Formulaire de préparation du contrat (preparer.php)
   ---------------------------------------------------------------------
   Des choix qu'on désigne du doigt plutôt qu'un petit rond à viser : sur
   un téléphone, une case à cocher de 14 px se rate une fois sur trois.
   Toute la carte est cliquable, et celle qui est choisie se voit.
   ===================================================================== */
.choix{gap:12px;margin-bottom:6px}
.choixc{flex:1;min-width:230px;display:flex;gap:10px;align-items:flex-start;
        border:1.5px solid var(--ligne);border-radius:10px;padding:13px 15px;
        background:#fff;cursor:pointer;font-weight:400;margin:0}
.choixc:hover{border-color:var(--bleu2)}
.choixc input{margin-top:3px;flex:0 0 auto}
.choixc:has(input:checked){border-color:var(--orange);border-width:2px;
                           background:#FFF8F5;padding:12px 14px}
.choixc b{color:var(--bleu);font-size:15px}
.montant{background:var(--creme);border-left:4px solid var(--orange);border-radius:8px;
         padding:12px 16px;margin:14px 0 18px;font-size:17px;font-weight:800;
         color:var(--bleu);display:none}