/* =============================================================================
   home.css : mise en forme de la page d'accueil (app/Views/home/index.php).

   Textes et structure : docs/seoHome.md (v3, 2 novembre 2026).
   Chargée par la section « head » de home/index.php, APRÈS main.css :
   elle réutilise les variables de la charte (--accent, --orange, --card-bg…),
   donc le mode sombre et la bascule clair/sombre fonctionnent sans rien ajouter.

   Toutes les classes commencent par « home- » : aucun conflit avec Tailwind
   (app.min.css) ni avec main.css. Fichier écrit à la main, hors compilation Tailwind.
   ============================================================================= */

.home-wrap{max-width:72rem; margin:0 auto; padding:0 1.25rem}
.home-section{padding:4rem 0}
.home-alt{background:var(--card-bg); border-block:1px solid var(--border)}
.home-muted{color:var(--muted)}

/* ---------- Boutons ---------- */
.home-btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:var(--rayon-bouton); padding:.8rem 1.4rem; font-weight:700; text-decoration:none; border:1px solid transparent; transition:transform .2s, box-shadow .2s, border-color .2s; line-height:1.3}
.home-btn:hover{transform:translateY(-2px)}
.home-btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.home-btn-primaire{background:var(--accent); color:#fff; box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
.home-btn-secondaire{background:var(--card-bg); border-color:var(--border); color:var(--fg)}
.home-btn-secondaire:hover{border-color:var(--orange)}
.home-btn-blanc{background:#fff; color:#1e3a8a}
.home-btn-blanc:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 70%,transparent)}

/* ---------- Hero (QUOI) : texte aligné à gauche, aperçus à droite sur ordinateur ---------- */
.home-hero{padding:3rem 0 3.5rem}
.home-hero .home-wrap{display:grid; gap:2.5rem; align-items:center}
@media (min-width:960px){ .home-hero .home-wrap{grid-template-columns:1.15fr .85fr} .home-hero{padding:4.5rem 0 5rem} }
.home-badge{display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.35rem .8rem; font-size:.75rem; font-weight:700; background:var(--accent-soft); color:var(--titre-bleu); border-bottom:1px solid var(--orange)}
.home-h1{font-family:var(--font-titles); font-size:clamp(1.8rem,4.4vw,3rem); font-weight:800; line-height:1.15; letter-spacing:-.01em; margin:1.1rem 0 1rem}
.home-h1 .home-accent{color:var(--accent)}
/* « gratuitement » : capitales par le CSS, le texte source reste en minuscules (Google, lecteurs d'écran) */
.home-h1 .home-majuscules{text-transform:uppercase; color:var(--orange-texte)}
.home-fusee{display:inline-block; width:.85em; height:.85em; vertical-align:-.05em; margin-left:.15em; fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; animation:home-decollage 2.8s ease-in-out infinite}
@keyframes home-decollage{0%,100%{transform:translate(0,0)}50%{transform:translate(.08em,-.12em)}}
@media (prefers-reduced-motion:reduce){ .home-fusee{animation:none} }
.home-sous-titre{font-size:clamp(1rem,1.6vw,1.15rem); color:var(--muted); max-width:38rem; line-height:1.65}
.home-actions{display:flex; flex-wrap:wrap; gap:.75rem; margin:1.75rem 0 1.25rem}
@media (max-width:520px){ .home-actions .home-btn{width:100%} }
/* La liste .reassurance (coches orange) vient de main.css ; ici on l'aligne à gauche */
.home-hero .reassurance{justify-content:flex-start; margin:0}

/* Aperçus décoratifs (CV + vitrine) */
.home-apercus{position:relative; min-height:20rem; max-width:28rem; width:100%; justify-self:center}
@media (max-width:959px){ .home-apercus{min-height:17rem; max-width:24rem} }
.home-fenetre{position:absolute; background:var(--bg); border:1px solid var(--border); border-radius:1rem; box-shadow:0 24px 48px -24px rgba(15,23,42,.35); overflow:hidden}
.home-barre{display:flex; align-items:center; gap:.35rem; padding:.55rem .8rem; background:var(--card-bg); border-bottom:1px solid var(--border); font-size:.68rem; color:var(--muted)}
.home-barre i{width:.5rem; height:.5rem; border-radius:50%; background:var(--border); display:inline-block}
.home-barre span{margin-left:.4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.home-fen-cv{top:0; left:0; width:78%; padding-bottom:1rem}
.home-fen-vitrine{bottom:0; right:0; width:72%; border-top:2px solid var(--orange)}
.home-cv-tete{display:flex; gap:.75rem; align-items:center; padding:1rem}
.home-avatar{width:2.6rem; height:2.6rem; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); flex:none}
.home-ligne{height:.5rem; border-radius:99px; background:var(--border); margin:.35rem 0}
.home-ligne-bleue{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.home-cv-corps{padding:0 1rem}
.home-flex1{flex:1}
.home-l45{width:45%} .home-l60{width:60%} .home-l70{width:70%} .home-l88{width:88%} .home-l95{width:95%}
.home-puces{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.6rem}
.home-puces b{font-size:.62rem; font-weight:700; padding:.15rem .5rem; border-radius:99px; background:var(--accent-soft); color:var(--titre-bleu)}
.home-vit-couv{height:4.2rem; background:linear-gradient(120deg,color-mix(in srgb,var(--orange) 55%,transparent),color-mix(in srgb,var(--accent) 45%,transparent))}
.home-vit-corps{padding:.8rem 1rem 1rem; font-size:.72rem}
.home-vit-corps strong{display:block; font-size:.85rem}
.home-vit-info{display:flex; gap:.8rem; margin-top:.5rem; color:var(--muted)}
.home-vit-wa{display:inline-block; margin-top:.6rem; font-weight:700; font-size:.68rem; padding:.3rem .65rem; border-radius:.5rem; background:#16a34a; color:#fff}

/* ---------- En-têtes de section ---------- */
.home-entete{max-width:44rem; margin-bottom:2.25rem}
.home-surtitre{font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-texte)}
.home-h2{font-family:var(--font-titles); font-size:clamp(1.6rem,3.2vw,2.25rem); font-weight:800; line-height:1.2; letter-spacing:-.01em; margin:.4rem 0 .6rem}
.home-entete p{color:var(--muted); font-size:1.05rem}

/* ---------- Grilles et cartes ---------- */
.home-grille{display:grid; gap:1.25rem}
@media (min-width:700px){ .home-g2{grid-template-columns:repeat(2,1fr)} .home-g3{grid-template-columns:repeat(3,1fr)} .home-g4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1080px){ .home-g4{grid-template-columns:repeat(4,1fr)} }
.home-carte{background:var(--card-bg); border:1px solid var(--border); border-radius:1rem; padding:1.5rem; display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s}
.home-alt .home-carte{background:var(--bg)}
.home-carte:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(15,23,42,.35); border-color:color-mix(in srgb,var(--orange) 45%,var(--border))}
@media (prefers-reduced-motion:reduce){ .home-carte:hover,.home-btn:hover{transform:none} }
.home-h3{font-family:var(--font-titles); font-size:1.08rem; font-weight:700; line-height:1.3; color:var(--titre-bleu); margin:.9rem 0 .5rem}
.home-carte p{font-size:.94rem; color:var(--muted)}
.home-lien{margin-top:auto; padding-top:1rem; font-weight:700; font-size:.9rem; color:var(--titre-bleu); text-decoration:none; display:inline-flex; gap:.35rem; align-items:center}
.home-lien:hover{color:var(--orange-texte)}
.home-icone{width:2.6rem; height:2.6rem; border-radius:.75rem; display:flex; align-items:center; justify-content:center; background:var(--orange-soft); color:var(--orange-texte); flex:none}
.home-icone svg{width:1.35rem; height:1.35rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.home-vedette{border-top:3px solid var(--orange)}
.home-carte-tete{display:flex; align-items:flex-start; gap:.75rem}
.home-etiquette{margin-left:auto; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:.2rem .55rem; border-radius:99px; background:var(--orange-soft); color:var(--orange-texte); border:1px solid color-mix(in srgb,var(--orange) 50%,transparent)}

/* ---------- Pourquoi : chapeau mis en valeur ---------- */
.home-chapeau{border-left:3px solid var(--orange); padding:1rem 1.25rem; background:var(--accent-soft); border-radius:0 var(--rayon-bouton) var(--rayon-bouton) 0; font-size:1.05rem; max-width:52rem; margin:0 0 2.25rem}
.home-chapeau strong{color:var(--titre-bleu)}

/* ---------- Comment : étapes ---------- */
.home-etapes{list-style:none; margin:0; padding:0}
.home-etape{display:flex; gap:1rem}
.home-num{flex:none; width:2.4rem; height:2.4rem; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center}
.home-etape .home-h3{color:var(--fg); margin:0 0 .35rem; font-size:1.05rem}
.home-etape p{color:var(--muted); font-size:.95rem}
.home-inclus{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:2.25rem 0 0; padding:1.25rem 1.5rem; list-style:none; border:1px dashed var(--border); border-radius:1rem; font-size:.92rem; font-weight:600}

/* Coche orange (même dessin que .reassurance de main.css) */
.home-coche{display:inline-flex; align-items:flex-start; gap:.5rem}
.home-coche::before{content:""; width:.95rem; height:.95rem; flex:none; margin-top:.25rem; background:var(--orange-puce);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- Quand : maintenant / bientôt ---------- */
.home-colonne .home-h3{color:var(--fg); display:flex; align-items:center; gap:.6rem; margin:0 0 1rem}
.home-colonne ul{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.home-colonne li{font-size:.95rem}
.home-pionnier{background:var(--bg); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--rayon-bouton); padding:1rem 1.1rem}
.home-pionnier strong{color:var(--titre-bleu)}
.home-bientot{font-size:.62rem; font-weight:800; padding:.15rem .5rem; border-radius:99px; background:var(--orange-soft); color:var(--orange-texte); border:1px solid color-mix(in srgb,var(--orange) 50%,transparent)}
.home-liste-bientot li{display:flex; gap:.6rem; color:var(--muted)}
.home-liste-bientot li::before{content:"○"; color:var(--orange-puce); font-weight:800; flex:none}

/* ---------- FAQ ---------- */
.home-faq{max-width:48rem}
.home-faq details{border:1px solid var(--border); border-radius:var(--rayon-bouton); background:var(--bg); padding:0 1.15rem; margin-bottom:.75rem}
.home-faq summary{cursor:pointer; list-style:none; font-weight:700; padding:1rem 0; display:flex; justify-content:space-between; gap:1rem}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary::after{content:"+"; color:var(--orange-texte); font-weight:800; font-size:1.2rem; line-height:1}
.home-faq details[open] summary::after{content:"–"}
.home-faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:.25rem}
.home-faq details p{padding:0 0 1rem; color:var(--muted)}

/* ---------- Appel final (même bandeau que .cta-band de main.css) ---------- */
.home-cta{background:var(--accent-dark); color:#fff}
.home-cta .home-wrap{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between}
.home-cta .home-entete{margin:0}
.home-cta .home-h2{color:#fff}
.home-cta p{color:#dbe4ff}