/* LUBELIO : site vitrine, version claire */
:root{
  --fond:#F9FAFC;
  --marine:#152A4A;
  --texte:#4A5568;
  --vert:#059669;       /* bouton principal : le vert menthe, un peu plus foncé pour rester lisible */
  --vert-clair:#10B981;
  --vert-fond:#E7F8F1;
  --saumon:#E88279;
  --saumon-texte:#C8584E; /* titres saumon, plus foncés pour la lisibilité */
  --saumon-fond:#FDEEEC;
  --bord:#E6EAF0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);color:var(--texte);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:inherit}
h1,h2,h3{color:var(--marine);margin:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

/* En-tête */
header.haut{position:relative;padding:18px 24px 0}
nav.menu{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:center;font-size:15px}
nav.menu a{color:var(--texte);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent}
nav.menu a:hover,nav.menu a.actif{color:var(--marine);border-bottom-color:var(--saumon)}
.langue{display:inline-block;margin-left:8px}
.connexion-haut{position:absolute;right:20px;top:9px}
.btn.connexion-haut{padding:7px 20px;font-size:14px}
.langue select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid var(--bord);border-radius:999px;color:var(--marine);font-size:14px;padding:7px 30px 7px 14px;cursor:pointer}
@media(max-width:760px){.btn.connexion-haut{position:static;display:block;width:max-content;margin:10px auto 0}}

/* Hero */
.hero{text-align:center;padding:44px 24px 56px}
.hero .logo{width:132px;height:auto;margin:0 auto 22px;display:block}
.hero h1{font-size:2.25rem;line-height:1.2;font-weight:800;max-width:780px;margin:0 auto 16px}
.hero p.sous{max-width:620px;margin:0 auto 30px;font-size:1.1rem}
.btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:13px 30px;border-radius:999px;transition:transform .12s,box-shadow .12s,background .12s}
.btn.vert{background:var(--vert);color:#fff;box-shadow:0 8px 20px rgba(5,150,105,.25)}
.btn.vert:hover{background:#047857;transform:translateY(-1px)}
.btn.contour{border:1.5px solid var(--saumon);color:var(--saumon-texte);background:transparent}
.btn.contour:hover{background:var(--saumon-fond)}
.commencer{margin:16px 0 0;font-size:14px;color:#6B7686}
.lien-tarif{margin:10px 0 0;font-size:15px}
.lien-tarif a{color:var(--marine);text-decoration:underline;text-decoration-color:var(--saumon);text-underline-offset:4px}

/* Cartes */
.carte{background:#fff;border:1px solid var(--bord);border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.05)}
section.f{padding:20px 24px 64px}
section.f h2{text-align:center;font-size:1.75rem;font-weight:800;margin:0 0 34px}
.grille{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:700px){.grille{grid-template-columns:1fr}.hero h1{font-size:1.75rem}}
.avantage{padding:26px 26px 28px}
.pastille{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pastille svg{width:26px;height:26px}
.pastille.v{background:var(--vert-fond);color:var(--vert)}
.pastille.s{background:var(--saumon-fond);color:var(--saumon)}
.avantage h3{font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;margin-bottom:8px}
.avantage h3.v{color:var(--vert)}
.avantage h3.s{color:var(--saumon-texte)}
.avantage p{margin:0}
p.ia{text-align:center;color:#6B7686;font-size:13px;margin:26px 0 0}

/* Tarifs */
.entete{text-align:center;padding:30px 24px 8px}
.entete h1{font-size:2.1rem;font-weight:800;margin-bottom:10px}
.entete p{max-width:660px;margin:0 auto}
.offre{max-width:440px;margin:28px auto 0;padding:30px 28px;border:2px solid var(--vert-clair)}
.offre h2{font-size:1.4rem;margin-bottom:4px}
.prix{font-size:2.8rem;font-weight:800;color:var(--marine);margin:6px 0 0}
.prix small{font-size:1rem;font-weight:500;color:var(--texte)}
.an{font-size:14px;color:var(--vert);font-weight:600;margin:2px 0 18px}
ul.liste{list-style:none;padding:0;margin:0 0 22px}
ul.liste li{padding:6px 0 6px 28px;position:relative;font-size:15px}
ul.liste li::before{content:"✓";position:absolute;left:0;color:var(--vert);font-weight:800}
.offre .btn{display:block;text-align:center}
.note{text-align:center;color:#6B7686;font-size:13px;max-width:680px;margin:22px auto 48px;padding:0 24px}

/* Mentions légales */
.texte{max-width:760px;margin:10px auto 56px;padding:0 24px}
.texte h1{font-size:2rem;font-weight:800;margin:26px 0 14px;text-align:center}
.texte h2{font-size:1.15rem;margin:26px 0 6px}
.texte p{margin:0 0 8px}

/* Pied de page */
footer.pied{margin-top:auto;border-top:1px solid var(--bord);background:#fff;padding:30px 24px;text-align:center;font-size:14px}
footer.pied .ident{color:var(--marine);font-weight:600;margin:0 0 12px}
footer.pied .ident a{text-decoration:none}
footer.pied .embleme{width:46px;height:46px;border-radius:12px;border:1px solid var(--bord);padding:4px;background:#fff;display:block;margin:0 auto 12px;object-fit:contain}
footer.pied .liens{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
footer.pied .liens a{text-decoration:none;color:var(--texte)}
footer.pied .liens a:hover{color:var(--marine);text-decoration:underline}

/* Tarifs : deux options côte à côte */
.tarifs{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:760px;margin:28px auto 0;padding:0 24px}
.tarifs .offre{margin:0;max-width:none;position:relative;display:flex;flex-direction:column}
.tarifs .offre .btn{margin-top:auto}
.tarifs .offre:not(.vedette){border:1px solid var(--bord)}
.tarifs .an{min-height:3.2em}
.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--vert);color:#fff;font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px;white-space:nowrap}
.inclus{max-width:712px;width:calc(100% - 48px);margin:22px auto 0;padding:26px 28px}
.inclus h2{font-size:1.15rem;margin-bottom:12px}
.inclus ul.liste{margin:0}
@media(max-width:700px){.tarifs{grid-template-columns:1fr;gap:26px}.tarifs .an{min-height:0}}

/* Accueil sur UN SEUL écran : tout tient dans la hauteur de la fenêtre (ordinateur) */
body.accueil{height:100vh;min-height:0}
body.accueil header.haut{padding:12px 24px 0}
body.accueil .centre{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
body.accueil .hero{padding:10px 24px 14px}
body.accueil .hero .logo{width:92px;margin-bottom:12px}
body.accueil .hero h1{font-size:2rem;margin-bottom:10px}
body.accueil .hero p.sous{margin-bottom:18px;font-size:1.05rem}
body.accueil .commencer{margin-top:12px}
body.accueil .lien-tarif{margin-top:6px}
body.accueil section.f{padding:6px 24px 14px}
.grille.quatre{grid-template-columns:repeat(4,1fr);gap:16px}
.grille.quatre .avantage{padding:16px 18px 18px}
.grille.quatre .pastille{width:38px;height:38px;border-radius:11px;margin-bottom:10px}
.grille.quatre .pastille svg{width:21px;height:21px}
.grille.quatre .avantage h3{font-size:.8rem;margin-bottom:5px}
.grille.quatre .avantage p{font-size:.88rem;line-height:1.45}
footer.pied.compact{padding:12px 24px}
footer.pied.compact .ligne{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:center}
footer.pied.compact .embleme{width:30px;height:30px;margin:0;border-radius:9px;padding:3px}
footer.pied.compact .ident{margin:0;color:var(--marine);font-weight:600}
footer.pied.compact .ident a{text-decoration:none}
footer.pied.compact .liens{gap:6px 18px}
footer.pied.compact .ia{margin:6px 0 0;font-size:12px;color:#6B7686}
@media(max-width:900px){.grille.quatre{grid-template-columns:repeat(2,1fr)}body.accueil{height:auto;min-height:100vh}}
@media(max-width:560px){.grille.quatre{grid-template-columns:1fr}}
@media(max-height:680px) and (min-width:901px){
 body.accueil .hero .logo{width:70px;margin-bottom:8px}
 body.accueil .hero h1{font-size:1.7rem}
 body.accueil .hero p.sous{margin-bottom:12px}
 .grille.quatre .avantage{padding:12px 14px}
 .grille.quatre .avantage p{font-size:.82rem}
}
@media(max-height:600px) and (min-width:901px){
 body.accueil .hero .logo{width:54px;margin-bottom:6px}
 body.accueil .hero h1{font-size:1.45rem;margin-bottom:6px}
 body.accueil .hero p.sous{margin-bottom:8px;font-size:.95rem}
 body.accueil .commencer{margin-top:8px;font-size:13px}
 body.accueil .btn{padding:10px 26px}
 body.accueil .lien-tarif{display:none}
 .grille.quatre .pastille{display:none}
}

/* Formulaire de contact */
.formulaire{max-width:560px;width:calc(100% - 48px);margin:24px auto 0;padding:26px 28px}
.formulaire label{display:block;font-weight:600;color:var(--marine);margin:14px 0 6px;font-size:14.5px}
.formulaire input[type=text],.formulaire input[type=email],.formulaire textarea{width:100%;font:inherit;color:var(--marine);background:#fff;border:1.5px solid var(--bord);border-radius:12px;padding:11px 14px}
.formulaire input:focus,.formulaire textarea:focus{outline:none;border-color:var(--vert-clair);box-shadow:0 0 0 3px rgba(16,185,129,.15)}
.formulaire textarea{resize:vertical;min-height:140px}
.formulaire label.consent{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--texte);margin:16px 0 4px}
.formulaire label.consent input{margin-top:4px;flex:none}
.formulaire .btn{border:0;cursor:pointer;margin-top:12px;width:100%}
.formulaire .btn:disabled{opacity:.6;cursor:default}
.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.retour-message{min-height:1.4em;margin:10px 0 0;font-size:14.5px}
.retour-message.ok{color:#047857;font-weight:600}
.retour-message.erreur{color:#B42318;font-weight:600}

/* Accueil : cartes avec titre, texte et mots-clés */
body.accueil section.f .wrap{max-width:1240px}
.grille.quatre{gap:14px}
.grille.quatre .avantage{padding:14px 16px 16px}
.grille.quatre .pastille{width:34px;height:34px;margin-bottom:8px}
.grille.quatre .pastille svg{width:19px;height:19px}
.grille.quatre .avantage h3{font-size:.78rem;line-height:1.3;margin-bottom:6px}
.grille.quatre .avantage p{font-size:.84rem;line-height:1.42}
.grille.quatre .avantage p.tags{margin:8px 0 0;font-size:.72rem;line-height:1.4;font-weight:600;color:#6B7686}
@media(max-height:760px) and (min-width:901px){
 .grille.quatre .pastille{display:none}
 .grille.quatre .avantage{padding:12px 14px 14px}
 .grille.quatre .avantage p{font-size:.8rem}
 .grille.quatre .avantage p.tags{font-size:.7rem;margin-top:6px}
 body.accueil .hero .logo{width:64px;margin-bottom:6px}
 body.accueil .hero h1{font-size:1.6rem;margin-bottom:6px}
 body.accueil .hero p.sous{margin-bottom:10px;font-size:.98rem}
 body.accueil .commencer{margin-top:8px;font-size:13px}
 body.accueil .lien-tarif{margin-top:2px}
}
@media(max-height:650px) and (min-width:901px){
 body.accueil .lien-tarif{display:none}
 body.accueil .hero .btn{padding:9px 26px}
 .grille.quatre .avantage p{font-size:.78rem;line-height:1.38}
}

/* Accueil : cartes interactives. Seul le titre est visible ; le texte se révèle au survol
   (ordinateur), au toucher (téléphone) ou au clavier. */
.cellule{position:relative}
.grille.quatre .avantage{cursor:pointer;transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease}
.grille.quatre .avantage:focus-visible{outline:2px solid var(--vert-clair);outline-offset:2px}
.avantage .detail{max-height:0;opacity:0;overflow:hidden;margin-top:0;transition:max-height .38s ease,opacity .28s ease,margin-top .28s ease}
.avantage:hover .detail,.avantage:focus .detail,.avantage:focus-within .detail,.avantage.ouverte .detail{max-height:420px;opacity:1;margin-top:10px}
.grille.quatre .avantage .detail p{font-size:.96rem;line-height:1.5;color:#161B26}
.grille.quatre .avantage .detail p.tags{margin:10px 0 0;font-size:.8rem;line-height:1.4;font-weight:700;color:#3A4350}
.grille.quatre .avantage:hover,.grille.quatre .avantage.ouverte,.grille.quatre .avantage:focus{border-color:var(--vert-clair);box-shadow:0 18px 40px rgba(21,42,74,.18)}
@media(min-width:901px){
 /* la case ouverte s'étend vers le bas SANS pousser le reste de la page */
 .cellule{min-height:116px}
 .grille.quatre .avantage{position:absolute;top:0;left:0;right:0;z-index:1}
 .grille.quatre .avantage:hover,.grille.quatre .avantage.ouverte,.grille.quatre .avantage:focus{z-index:10}
}
@media(max-width:900px){.cellule{min-height:0}}

/* Accueil : gros logos centrés dans les 4 cartes */
:root{--ico:clamp(56px,11vh,104px)}
.logo-carte{width:var(--ico);height:var(--ico);margin:0 auto 10px;border-radius:calc(var(--ico) * .25);overflow:hidden;background:#E6F7F1}
.logo-carte.s{background:#FDE9E7}
.logo-carte img{display:block;width:100%;height:100%}
.grille.quatre .avantage{text-align:center}
.grille.quatre .avantage h3{margin-bottom:0}
@media(min-width:901px){
 .cellule{min-height:calc(var(--ico) + 78px)}
}
@media(max-width:900px){:root{--ico:92px}}
/* Les cartes ouvertes restent dans l'écran : le contenu se cale en haut et le logo suit la hauteur */
:root{--ico:clamp(54px,9.5vh,104px)}
@media(min-width:901px){body.accueil .centre{justify-content:flex-start;padding-top:2vh}}
/* Accueil : en-tête plus compact pour laisser la place aux cartes ouvertes */
@media(min-width:901px){
 body.accueil .hero{padding-top:4px;padding-bottom:10px}
 body.accueil .hero .logo{width:56px;margin-bottom:4px}
 body.accueil .hero h1{font-size:1.7rem;margin-bottom:6px}
 body.accueil .hero p.sous{margin-bottom:12px;font-size:1rem}
 body.accueil .hero .btn{padding:10px 28px}
 body.accueil .commencer{margin-top:8px}
 body.accueil .lien-tarif{margin-top:2px}
 body.accueil section.f{padding-top:2px}
}

/* Le contour de la carte ouverte suit sa couleur : vert pour les cartes vertes, saumon pour les saumon */
.grille.quatre .avantage.v:hover,.grille.quatre .avantage.v.ouverte,.grille.quatre .avantage.v:focus{border-color:var(--vert-clair);box-shadow:0 18px 40px rgba(5,150,105,.20)}
.grille.quatre .avantage.s:hover,.grille.quatre .avantage.s.ouverte,.grille.quatre .avantage.s:focus{border-color:var(--saumon);box-shadow:0 18px 40px rgba(232,130,121,.28)}
.grille.quatre .avantage.v:focus-visible{outline-color:var(--vert-clair)}
.grille.quatre .avantage.s:focus-visible{outline-color:var(--saumon)}
/* écran bas : texte dévoilé un peu plus serré, pour que la carte ouverte reste dans l'écran */
@media(min-width:901px) and (max-height:660px){
 .grille.quatre .avantage .detail p{font-size:.88rem;line-height:1.42}
 .grille.quatre .avantage .detail p.tags{font-size:.74rem;margin-top:6px}
 .avantage:hover .detail,.avantage:focus .detail,.avantage:focus-within .detail,.avantage.ouverte .detail{margin-top:6px}
}

/* « Commencer maintenant » et « Voir le tarif » sous les 4 cartes ; l'ensemble est centré dans la page */
.suite{text-align:center;padding:0 24px 10px}
body.accueil .suite .commencer{margin:8px 0 0}
body.accueil .suite .lien-tarif{margin:2px 0 0}
@media(min-width:901px){body.accueil .centre{justify-content:center;padding-top:0}}

/* Accueil : logo + titre en haut, les 4 cartes AU MILIEU de l'écran, tout le reste (sous-titre, bouton vert,
   « Commencer maintenant », « Voir le tarif ») en dessous des cartes */
@media(min-width:901px){
 body.accueil .centre{display:grid;grid-template-rows:1fr auto 1fr;justify-content:stretch;padding-top:0}
 body.accueil .hero{align-self:start;padding-bottom:12px}
 body.accueil .suite{align-self:start;padding-top:10px}
 body.accueil .suite .sous{max-width:640px;margin:0 auto 12px;font-size:1.02rem}
 body.accueil .suite .btns{margin:0}
}
.suite .sous{max-width:620px;margin:6px auto 18px}
.suite .btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* les 4 cartes exactement au milieu de la hauteur de l'écran (le pied de page est plus haut que l'en-tête) */
@media(min-width:901px){body.accueil .centre{padding-top:30px}}

/* Accueil : logo de l'application et textes plus grands (la position des blocs ne change pas) */
@media(min-width:901px){
 body.accueil .hero .logo{width:clamp(60px,13vh,150px);margin-bottom:10px}
 body.accueil .hero h1{font-size:clamp(1.5rem,4vh,2.7rem);max-width:none}
 body.accueil .suite .sous{max-width:820px;font-size:clamp(1rem,2.4vh,1.45rem)}
 body.accueil .suite .btn{font-size:clamp(.95rem,2vh,1.2rem);padding:clamp(9px,1.6vh,15px) clamp(26px,4vh,40px)}
 body.accueil .suite .commencer{font-size:clamp(.8rem,1.8vh,1.05rem)}
 body.accueil .suite .lien-tarif{display:block;font-size:clamp(.85rem,2vh,1.1rem)}
}