/* Projet Phénix, site vitrine (26/09/2026). S'ajoute à phenix.css, ne le modifie pas. */

/* ---------- barre du haut ---------- */
.v-hd{display:flex;align-items:center;gap:8px}
.v-cta-hd{font-family:Poppins,sans-serif;font-weight:700;font-size:15px;color:#fff;background:var(--orange);
  text-decoration:none;border-radius:10px;padding:10px 14px;min-height:44px;display:none;align-items:center;white-space:nowrap}
.v-cta-hd:hover{background:var(--orange-d)}
.v-menu-bt{font-family:Poppins,sans-serif;font-weight:600;font-size:16px;color:var(--ink);background:var(--blanc);
  border:1.5px solid var(--line);border-radius:10px;padding:10px 14px;min-height:48px;cursor:pointer;display:flex;align-items:center;gap:8px}
.v-menu-bt:hover{border-color:var(--orange)}
.v-menu-bt svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.v-nav{border-top:1px solid var(--line);background:var(--creme)}
.v-nav ul{list-style:none;margin:0 auto;padding:8px 20px 16px;max-width:600px}
.v-nav li a{display:flex;align-items:center;min-height:52px;font-family:Poppins,sans-serif;font-weight:600;font-size:18px;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.v-nav li a:hover,.v-nav li a[aria-current]{color:var(--orange-d)}
.v-nav li.v-nav-cta a{justify-content:center;border:0;margin-top:14px;background:var(--orange);color:#fff;border-radius:12px}
.v-liens-hd{display:none}
@media (min-width:430px){.v-cta-hd{display:flex}}
@media (min-width:960px){
  .v-menu-bt{display:none}
  .v-nav{display:none!important}
  .v-liens-hd{display:flex;gap:4px;margin-right:6px}
  .v-liens-hd a{font-family:Poppins,sans-serif;font-weight:600;font-size:16px;color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:8px}
  .v-liens-hd a:hover,.v-liens-hd a[aria-current]{color:var(--orange-d);background:var(--creme2)}
}
@media (max-width:380px){.brand span{font-size:17px}}

/* ---------- blocs communs ---------- */
.v-pastille{display:inline-block;background:#FFE3CC;color:#7A2E0E;font-weight:800;font-size:15px;padding:7px 15px;border-radius:999px;margin:0 0 14px}
.v-lede{font-size:19px;color:var(--ink2);margin:0 0 22px}
.v-sous{font-size:16px;color:var(--ink2);margin:12px 0 0;text-align:center}
.v-sec{padding:44px 0}
.v-sec.v-blanc{background:var(--blanc);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.v-sec h2{margin-bottom:14px}
.v-intro{color:var(--ink2);margin:0 0 20px}
.v-lien-fort{font-family:Poppins,sans-serif;font-weight:700;color:var(--orange-d);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.v-lien-fort:hover{text-decoration:underline}
.v-btn-sec{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:14px 20px;border-radius:12px;
  background:var(--blanc);color:var(--ink);border:2px solid var(--ink);font-family:Poppins,sans-serif;font-weight:700;font-size:18px;text-decoration:none}
.v-btn-sec:hover{border-color:var(--orange);color:var(--orange-d)}
.v-hero{padding:32px 0 36px;background:linear-gradient(180deg,#FFF6EC 0%,var(--creme) 80%)}
.v-hero .btn{max-width:440px}
.v-grille2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v-grille3{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:700px){.v-grille3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* cartes recette */
.v-carte{display:block;text-decoration:none;color:var(--ink);background:var(--blanc);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--ombre)}
.v-carte img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--creme2)}
.v-carte .t{padding:10px 12px 12px}
.v-carte b{display:block;font-family:Poppins,sans-serif;font-size:16px;line-height:1.3}
.v-carte span{display:block;font-size:14.5px;color:var(--ink2);margin-top:4px}
.v-carte:hover{border-color:var(--orange)}
@media (min-width:700px){.v-grille2.v-large{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.v-grille2.v-large{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* tuiles de navigation */
.v-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.v-tuile{display:flex;align-items:center;min-height:64px;padding:12px 14px;background:#FFF1E6;border-radius:12px;
  color:var(--ink);text-decoration:none;font-family:Poppins,sans-serif;font-weight:600;font-size:16px;line-height:1.3}
.v-tuile:hover{background:#FFE3CC}
@media (min-width:700px){.v-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* cartes de service */
.v-service{display:block;text-decoration:none;color:var(--ink);background:var(--blanc);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--ombre)}
.v-service b{display:block;font-family:Poppins,sans-serif;font-size:19px;margin:0 0 6px}
.v-service p{margin:0 0 8px;color:var(--ink2);font-size:16.5px}
.v-service span{font-family:Poppins,sans-serif;font-weight:700;color:var(--orange-d);font-size:16px}
.v-service:hover{border-color:var(--orange)}

/* chiffres et fonctions */
.v-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 22px}
.v-chiffres div{background:var(--blanc);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.v-chiffres b{display:block;font-family:Poppins,sans-serif;font-size:24px;color:var(--orange-d)}
.v-chiffres span{font-size:14.5px;color:var(--ink2)}
.v-fonctions{display:grid;gap:12px;margin:0 0 22px}
.v-fonction{display:flex;gap:14px;align-items:flex-start;background:var(--blanc);border:1px solid var(--line);border-radius:12px;padding:14px}
.v-fonction .ic{flex:none;width:44px;height:44px;border-radius:50%;background:#FFE3CC;display:flex;align-items:center;justify-content:center}
.v-fonction .ic svg{width:22px;height:22px;stroke:#9A3412;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-fonction b{display:block;font-family:Poppins,sans-serif;font-size:17px}
.v-fonction p{margin:4px 0 0;color:var(--ink2);font-size:16.5px}
@media (min-width:700px){.v-fonctions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* étapes de l'essai */
.v-etapes{counter-reset:e;display:grid;gap:12px;margin:0 0 20px;padding:0;list-style:none}
.v-etapes li{counter-increment:e;display:flex;gap:14px;background:var(--blanc);border:1px solid var(--line);border-radius:12px;padding:14px}
.v-etapes li::before{content:counter(e);flex:none;width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;
  font-family:Poppins,sans-serif;font-weight:700;display:flex;align-items:center;justify-content:center}
.v-etapes b{display:block;font-family:Poppins,sans-serif}
.v-etapes p{margin:2px 0 0;color:var(--ink2);font-size:16.5px}

/* prix */
.v-prix{display:grid;gap:12px;margin:0 0 18px}
.v-formule{background:var(--blanc);border:2px solid var(--line);border-radius:14px;padding:16px 18px}
.v-formule.v-mise{border-color:var(--orange)}
.v-formule .n{font-family:Poppins,sans-serif;font-weight:700;font-size:17px}
.v-formule .p{font-family:Poppins,sans-serif;font-weight:700;font-size:30px;color:var(--ink);margin:4px 0}
.v-formule .d{color:var(--ink2);font-size:16px;margin:0}
@media (min-width:700px){.v-prix{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* encadré vers l'application */
.v-encart{border:2px solid var(--orange);border-radius:16px;background:var(--blanc);padding:20px;margin:26px 0 0}
.v-encart b.t{display:block;font-family:Poppins,sans-serif;font-size:20px;margin:0 0 6px}
.v-encart p{margin:0 0 14px;color:var(--ink2);font-size:16.5px}
.v-encart .btn{max-width:440px}

/* bloc sombre */
.v-sombre{background:var(--ink);color:#fff;border-radius:16px;padding:26px 22px;text-align:center}
.v-sombre h2{color:#fff}
.v-sombre p{color:#D6C9BD;margin:0 0 18px}
.v-sombre .btn{max-width:440px;margin:0 auto}
.v-sombre .v-sous{color:#C8B8AA}

/* page recette */
.v-rec-hd{padding:22px 0 8px}
.v-rec-hd h1{font-size:clamp(28px,7.4vw,40px)}
.v-puces{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.v-puces li{background:var(--blanc);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700;font-size:15px}
.v-photo{margin:0 0 16px}
.v-photo img{width:100%;height:auto;border-radius:16px;aspect-ratio:3/2;object-fit:cover;background:var(--creme2)}
.v-photo figcaption{font-size:14px;color:#8A7C70;text-align:center;margin-top:6px}
.v-portions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.v-portions h2{margin:0}
.v-pers{display:flex;align-items:center;gap:8px}
.v-pers button{width:44px;height:44px;border-radius:10px;border:2px solid var(--line);background:var(--blanc);font-size:22px;font-weight:700;cursor:pointer;color:var(--ink)}
.v-pers button:hover{border-color:var(--orange)}
.v-pers output{min-width:108px;text-align:center;font-weight:800}
.v-ings{list-style:none;margin:0;padding:0}
.v-ings li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.v-ings li .q{flex:none;min-width:92px;font-weight:800}
.v-ings li .n small{color:var(--ink2)}
.v-steps{list-style:none;counter-reset:s;margin:0;padding:0}
.v-steps li{counter-increment:s;display:flex;gap:14px;padding:10px 0}
.v-steps li::before{content:counter(s);flex:none;font-family:Poppins,sans-serif;font-weight:700;color:var(--orange-d);font-size:20px;width:26px}
.v-nutri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0}
.v-nutri div{background:var(--blanc);border:1px solid var(--line);border-radius:10px;padding:10px 4px;text-align:center}
.v-nutri b{display:block;font-family:Poppins,sans-serif;font-size:19px}
.v-nutri span{font-size:13.5px;color:var(--ink2)}
.v-astuce{background:#EEF5EE;border-radius:12px;padding:14px 16px;margin:16px 0 0}
.v-astuce b{color:#3E6B3E}
.v-auteur{display:flex;gap:12px;align-items:center;font-size:15.5px;color:var(--ink2)}
.v-auteur img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.v-auteur b{color:var(--ink)}
.v-disc{font-size:15px;color:var(--ink2);margin:14px 0 0}

/* recherche */
.v-cherche label{display:block;font-weight:800;margin:0 0 6px}
.v-cherche input{width:100%;font:inherit;font-size:18px;padding:14px;border-radius:12px;border:2px solid #C9B6A2;background:var(--blanc)}
.v-cherche input:focus{outline:3px solid rgba(232,98,26,.35);border-color:var(--orange)}
.v-rien{padding:16px;background:var(--blanc);border-radius:12px;border:1px dashed var(--line);color:var(--ink2)}

/* liste de courses */
.v-courses h3{font-size:18px;margin:18px 0 6px}
.v-courses ul{margin:0;padding-left:20px}
.v-courses li{padding:3px 0}
.v-jours{display:grid;gap:10px}
.v-jour{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--blanc);border:1px solid var(--line);border-radius:12px;padding:10px}
.v-jour img{width:96px;height:72px;object-fit:cover;border-radius:10px;flex:none}
.v-jour small{display:block;font-weight:800;color:var(--orange-d);font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
.v-jour b{display:block;font-family:Poppins,sans-serif;font-size:16px;line-height:1.3}
.v-jour span{display:block;font-size:14.5px;color:var(--ink2)}
@media print{header,footer,.v-encart,.v-sombre,.v-noprint{display:none!important}body{background:#fff}}

/* bloc Victor */
.v-victor{display:flex;gap:16px;align-items:flex-start}
.v-victor img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.v-victor p{margin:0 0 6px}

/* liste d'articles */
.v-articles{display:grid;gap:10px}
.v-article{display:block;text-decoration:none;color:var(--ink);background:var(--blanc);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.v-article b{display:block;font-family:Poppins,sans-serif;font-size:17px;line-height:1.3}
.v-article span{display:block;font-size:15px;color:var(--ink2);margin-top:4px}
.v-article:hover{border-color:var(--orange)}

/* pied de page : groupes */
footer .v-pied{display:grid;gap:4px 18px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 16px}
footer .v-pied a{color:var(--ink);font-size:16px;min-height:44px;display:flex;align-items:center}
@media (min-width:700px){footer .v-pied{grid-template-columns:repeat(4,minmax(0,1fr))}}
