/* Homepage only — September 2026 */
body.home { --radius-lg:20px; }
body.home .container.header-inner { max-width:100%; gap:24px; }
body.home .header .logo { flex-shrink:0; }
body.home .header .nav-menu > li > a { padding:8px 11px; text-transform:none; letter-spacing:0; font-size:.92rem; }
@media(max-width:1150px) { body.home .header-inner nav { display:none; } body.home .header-right { margin-left:auto; } body.home .hamburger { display:flex; } }
@media(min-width:1200px) { body.home #methode .features-grid { grid-template-columns:repeat(5,1fr); gap:32px; } }
body.home .container:not(.header-inner) { max-width:none; padding-left:clamp(16px,3.5vw,56px); padding-right:clamp(16px,3.5vw,56px); }
body.home main > section { padding-top:96px; padding-bottom:96px; scroll-margin-top:85px; }
body.home .header { border-bottom:1px solid rgba(255,255,255,.12); box-shadow:none; }
body.home .hero { min-height:740px; padding:155px 0 90px; display:block; background:var(--primary-dark); }
body.home .hero-bg-gradient { background:radial-gradient(ellipse at 85% 30%,rgba(237,126,8,.15),transparent 52%),linear-gradient(120deg,var(--primary-dark),var(--primary)); animation:none; }
body.home #heroCanvas { opacity:.3; }
body.home .home-hero-grid { position:relative; z-index:10; display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:72px; }
body.home .hero-content { text-align:left; padding:0; max-width:none; }
body.home .hero-content > p,body.home .hero-content h1,body.home .hero-buttons { animation:none; }
body.home .hero-content h1 { font-size:clamp(3rem,5.4vw,4.9rem); font-weight:600; line-height:1.08; letter-spacing:-.055em; text-transform:none; text-shadow:none; margin:24px 0; }
body.home .hero-content h1 span { color:var(--orange); }
body.home .hero-content p { margin-left:0; font-size:1.04rem; line-height:1.85; color:#d2d9e8; }
body.home .hero-content .section-subtitle { font-size:.66rem; letter-spacing:.19em; color:var(--orange); }
body.home .hero-buttons { justify-content:flex-start; gap:12px; }
body.home .btn { border-radius:8px; text-transform:none; letter-spacing:0; font-size:.87rem; padding:15px 22px; font-weight:600; }
body.home .hero .btn-light { background:var(--orange); border-color:var(--orange); color:#08152e; }
body.home .hero .btn-outline { border-color:#65718a; color:#fff; }
body.home .hero .btn:hover { transform:translateY(-2px); }
body.home .hero-note { display:block; margin-top:24px; color:#acb8ce; font-size:.75rem; }
body.home .hero-services { border:1px solid #ffffff28; border-radius:22px; padding:28px; background:rgba(7,19,45,.83); color:white; box-shadow:0 24px 70px #0003; }
body.home .hero-services-label { display:flex; justify-content:space-between; gap:16px; font-size:.65rem; text-transform:uppercase; letter-spacing:.17em; color:#b7c3d8; margin-bottom:25px; }
body.home .hero-service { display:grid; grid-template-columns:32px 1fr 20px; gap:12px; padding:23px 0; border-top:1px solid #ffffff24; color:#fff; align-items:start; }
body.home .hero-service-number { color:var(--orange); font-size:.72rem; padding-top:5px; }
body.home .hero-service strong { display:block; font-size:1.16rem; font-weight:500; margin-bottom:7px; }
body.home .hero-service small { display:block; color:#b7c3d8; line-height:1.7; font-size:.77rem; }
body.home .hero-service:hover strong { color:var(--orange); }
body.home .hero-service-arrow { color:var(--orange); }
body.home .hero-services-foot { font-size:.7rem; color:#bac6da; padding-top:18px; border-top:1px solid #ffffff24; }
body.home .scroll-indicator { display:none; }
body.home #methode { padding:40px 0; background:var(--cream); border-bottom:1px solid var(--gray-light); }
body.home .feature-item { text-align:left; padding:12px 20px; }
body.home .feature-icon { margin:0 0 20px; width:44px; height:44px; border-radius:12px; }
body.home .feature-item h4 { font-size:1rem; letter-spacing:-.025em; }
body.home .feature-item p { font-size:.85rem; line-height:1.8; }
body.home .section-title { font-size:clamp(1.9rem,3.4vw,3rem); letter-spacing:-.045em; font-weight:600; line-height:1.18; text-transform:none; }
body.home .section-title::after { display:none; }
body.home .section-subtitle,body.home .section-eyebrow { letter-spacing:.16em; font-size:.66rem; }
body.home .section-desc { line-height:1.85; }
body.home .section-colored { background:var(--cream); }
body.home .illustration-card { border-radius:24px; overflow:hidden; box-shadow:none; border:1px solid var(--gray-light); }
body.home .tool-card { border:1px solid var(--gray-light); box-shadow:none; border-radius:16px; }
body.home .tool-card-header { background:transparent; padding:28px 28px 0; }
body.home .tool-card-header h3 { color:var(--text); font-size:1.2rem; letter-spacing:-.025em; }
body.home .tool-card-icon { background:var(--primary-light); width:44px; height:44px; }
body.home .tool-card-icon svg { stroke:var(--primary); width:23px; height:23px; }
body.home .tool-card-body { padding:22px 28px 28px; }
body.home .tool-card-body p { font-size:.9rem; }
body.home .tool-card:hover { box-shadow:0 12px 32px var(--shadow); }
body.home .pricing-card { text-align:left; border:1px solid var(--gray-light); border-radius:18px; box-shadow:none; display:flex; flex-direction:column; }
body.home .pricing-card .btn { margin-top:auto; text-align:center; }
body.home .pricing-card.featured { border:2px solid var(--orange); }
body.home .pricing-card.featured::after { background:var(--primary); letter-spacing:.08em; font-size:.62rem; }
body.home .domain-card,body.home .contact-form-card { border-radius:18px; box-shadow:none; }
body.home .directory { margin-top:64px; }
body.home a:focus-visible,body.home button:focus-visible { outline:3px solid #ed7e08; outline-offset:5px; }
@media(min-width:1000px) { body.home #competences .text-center,body.home #entreprises .text-center,body.home #tarifs .text-center { text-align:left; max-width:750px; } body.home .text-center .section-desc { margin-left:0; } }
@media(max-width:1000px) { body.home .home-hero-grid { gap:30px; } body.home .hero-services { padding:22px; } body.home .hero-content h1 { font-size:3.5rem; } }
@media(max-width:760px) { body.home main > section { padding:64px 0; } body.home .hero { padding:130px 0 50px; min-height:0; } body.home .home-hero-grid { grid-template-columns:1fr; gap:36px; } body.home .hero-content h1 { font-size:clamp(2.6rem,9vw,4rem); max-width:600px; } body.home .hero-content p { font-size:.95rem; margin-bottom:26px; } body.home .hero-buttons { flex-direction:row; } body.home .hero-buttons .btn { width:auto; } body.home .hero-services { padding:22px; } body.home .hero-service { padding:17px 0; } body.home .hero-service strong { font-size:1rem; } body.home .hero-services-label { margin-bottom:15px; } body.home .feature-item { padding:12px 0; } body.home .features-grid { gap:28px; } body.home .pricing-grid { max-width:none; } }
@media(max-width:400px) { body.home .hero-buttons .btn { width:100%; } body.home .hero-content .section-subtitle { letter-spacing:.09em; font-size:.6rem; } }
@media(prefers-reduced-motion:reduce) { body.home *,body.home *::before,body.home *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } body.home .fade-in,body.home .fade-in-left,body.home .fade-in-right { opacity:1; transform:none; } }

/* Full-height hero and clearer constellation. Content may grow on small screens. */
body.home main > section.hero {
 min-height:100vh;
 min-height:100svh;
 display:flex;
 align-items:center;
 padding:130px 0 70px;
}
body.home #heroCanvas { opacity:1; filter:brightness(1.35); }
body.home .home-hero-grid { width:100%; }
@media(max-width:760px) {
 body.home main > section.hero { padding:120px 0 48px; }
}

body.home .feature-item h3 { font-size:1rem; letter-spacing:-.025em; margin-bottom:12px; }
body.home .contact-item h3 { font-size:1rem; margin-bottom:6px; }
body.home .tdn-caption { font-size:.88rem; line-height:1.7; margin-bottom:12px; }
body.home .tdn-link-label { display:block; font-family:var(--font-body); font-size:.9rem; line-height:1.6; margin-top:8px; text-decoration:underline; text-underline-offset:4px; }
body.home .home-hero-grid > *,body.home .grid-2 > * { min-width:0; }
@media(max-width:760px) {
 body.home .contact-form input,body.home .contact-form select,body.home .contact-form textarea { font-size:16px; }
 body.home .contact-form-card { padding:24px 18px; }
 body.home .contact-item a,body.home .directory-list a { overflow-wrap:anywhere; }
 body.home .hero-content .section-subtitle { line-height:1.8; }
 body.home .tool-card-header { padding:22px 20px 0; gap:14px; }
 body.home .tool-card-body { padding:20px; }
 body.home .tool-features { gap:10px; }
 body.home .hero-services { padding:20px; }
 body.home .mobile-nav a { min-height:44px; display:flex; align-items:center; }
 body.home .hero-content h1 { font-size:clamp(2.3rem,8.5vw,3.6rem); }
 body.home .pricing-card { padding:32px 22px; }
}
/* Respect the selected palette, with the neutral default retained. */
html:not([data-theme]) body.home { --cream:#f6f5f1; --cream-warm:#f1efe9; }
body.home .hero-services { background:color-mix(in srgb,var(--primary-dark) 88%,transparent); }
body.home .hero .btn-light { background:var(--white); color:var(--primary-dark); border-color:var(--white); }
body.home .hero-content h1 span,body.home .hero-service-number,body.home .hero-service-arrow,
body.home .hero-content .section-subtitle { color:color-mix(in srgb,var(--orange) 60%,white); }
body.home .hero-bg-gradient { background:radial-gradient(ellipse at 85% 30%,color-mix(in srgb,var(--orange) 15%,transparent),transparent 52%),linear-gradient(120deg,var(--primary-dark),var(--primary)); }
body.home .theme-panel,body.home .tp-detail { font-family:Montserrat,sans-serif; }
body.home .theme-panel { width:min(360px,100vw); max-height:100dvh; }
body.home .tp-detail { right:min(360px,100vw); width:300px; max-height:100dvh; }
body.home .tp-detail:not(.open) { visibility:hidden; }
body.home .tp-detail-tag { color:#334155; background:#eef2f6; }
body.home .tp-color-hex,body.home .tp-font-type,body.home .tp-panel-footer { color:#526177; }
body.home .tp-detail-body,body.home .tp-panel-body { overscroll-behavior:contain; }
body.home .tp-color-card,body.home .tp-font-card { transform:none; }
@media(max-width:760px) {
 body.home .theme-panel { width:min(360px,100vw); }
 body.home .tp-detail { display:none; }
}

/* Téléphone : le contenu de l'accueil est centré (les champs du formulaire restent alignés à gauche) */
@media(max-width:600px) {
 body.home main { text-align:center; }
 body.home .hero-content,body.home .about-text,body.home .fade-in-left,body.home .fade-in-right,body.home .text-center,body.home .section-head { text-align:center; margin-left:auto; margin-right:auto; }
 body.home .section-desc,body.home .hero-content p { margin-left:auto; margin-right:auto; }
 body.home .hero-buttons,body.home .directory-actions,body.home .tool-features { justify-content:center; }
 body.home .hero-services-label { justify-content:center; flex-wrap:wrap; text-align:center; }
 body.home .hero-service { grid-template-columns:1fr; gap:6px; justify-items:center; text-align:center; }
 body.home .hero-service-number { padding-top:0; }
 body.home .hero-service-arrow { display:none; }
 body.home .feature-item { text-align:center; }
 body.home .feature-icon,body.home .domain-icon { margin-left:auto; margin-right:auto; }
 body.home .tool-card-header { flex-direction:column; text-align:center; }
 body.home .pricing-card { text-align:center; }
 body.home .pricing-features { text-align:center; }
 body.home .pricing-features li { display:block; text-align:center; }
 body.home .pricing-features svg { display:inline-block; vertical-align:-3px; margin-right:6px; }
 body.home .domain-card-top { align-items:center; }
 body.home .domain-list li { padding-left:0; }
 body.home .domain-list li::before { position:static; display:inline-block; vertical-align:middle; margin-right:10px; }
 body.home .domain-link { align-self:center; }
 body.home .directory-cat { justify-content:center; }
 body.home .directory-list li { flex-direction:column; align-items:center; gap:2px; text-align:center; }
 body.home .outils-gratuits-grille a { flex-direction:column; align-items:center; text-align:center; }
 body.home .contact-item { flex-direction:column; align-items:center; text-align:center; }
 body.home .contact-signature,body.home .contact-signature a { text-align:center; }
 body.home .contact-signature img { margin-left:auto; margin-right:auto; }
 body.home .contact-form-card { text-align:left; }
 body.home .contact-form-card > h3 { text-align:center; }
}

/* ---------- L'outil du moment (sous le bandeau d'accueil) ---------- */
.outil-moment { padding: clamp(40px, 6vw, 80px) 0; background: var(--white); }
.outil-moment-carte {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 4vw, 52px); border-radius: 28px; border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--orange) 9%, var(--white)), var(--white) 62%);
  box-shadow: 0 20px 50px var(--shadow-colored);
}
.outil-moment .section-title { margin-bottom: 14px; }
.outil-moment .section-desc { max-width: none; margin-bottom: 26px; }
.outil-moment-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.outil-moment-points { display: grid; gap: 16px; }
.outil-moment-point { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.outil-moment-icone { width: 44px; height: 44px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }
.outil-moment-point h3 { margin: 0 0 6px; font-size: 1.08rem; color: var(--dark); }
.outil-moment-point p { margin: 0; color: var(--text); line-height: 1.6; font-size: .97rem; }
@media (max-width: 900px) { .outil-moment-carte { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  body.home .outil-moment-tete { text-align: center; }
  body.home .outil-moment-boutons { justify-content: center; }
  body.home .outil-moment-point { flex-direction: column; align-items: center; text-align: center; }
}

/* Entreprises : nos outils gratuits, adaptés sur mesure */
.adapte-bande { margin-top: 44px; padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 30px var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.adapte-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; counter-reset: etape; }
.adapte-etapes li { counter-increment: etape; position: relative; padding-left: 50px; min-height: 36px; }
.adapte-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--white); background: var(--primary); }
.adapte-etapes strong { display: block; color: var(--dark); font-size: 1rem; line-height: 1.35; margin-bottom: 3px; }
.adapte-etapes span { display: block; color: var(--text); font-size: .9rem; line-height: 1.5; }
.adapte-boutons { display: flex; flex-direction: column; gap: 10px; }
.adapte-boutons .btn { text-align: center; justify-content: center; white-space: nowrap; }
@media (max-width: 1100px) { .adapte-bande { grid-template-columns: 1fr; } .adapte-boutons { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 760px) { .adapte-etapes { grid-template-columns: 1fr; } .adapte-boutons { justify-content: center; } .adapte-boutons .btn { white-space: normal; } }

/* ---------- L'outil du moment : la capture de l'outil, sous le texte ---------- */
.outil-moment-apercu { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 720px; margin: 0; }
.outil-moment-apercu a { display: block; border-radius: 14px; }
.outil-moment-apercu img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 10px 26px var(--shadow-colored); background: var(--white); transition: transform .3s ease, box-shadow .3s ease; }
.outil-moment-apercu a:hover img { transform: translateY(-3px); }

/* ---------- Les cinq repères (#methode) : des cartes de même hauteur, trois puis deux ---------- */
body.home #methode .features-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; align-items: stretch; text-align: left; }
body.home #methode .feature-item {
  grid-column: span 2; display: flex; flex-direction: column; text-align: left; padding: 28px 28px 30px; background: var(--white);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px var(--shadow-colored);
  transition: opacity .6s ease, transform .35s ease, box-shadow .25s ease, border-color .25s ease;
}
body.home #methode .feature-item:nth-child(n+4) { grid-column: span 3; }
body.home #methode .feature-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--orange) 45%, var(--line)); }
body.home #methode .feature-icon { margin: 0 0 18px; width: 48px; height: 48px; border-radius: 14px; flex: none; }
body.home #methode .feature-item h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 10px; color: var(--dark); }
body.home #methode .feature-item p { font-size: .95rem; line-height: 1.7; margin: 0; color: var(--text); }
@media (max-width: 1000px) {
  body.home #methode .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body.home #methode .feature-item, body.home #methode .feature-item:nth-child(n+4) { grid-column: span 1; }
  body.home #methode .feature-item:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body.home #methode .features-grid { grid-template-columns: 1fr; }
  body.home #methode .feature-item, body.home #methode .feature-item:last-child { grid-column: 1 / -1; padding: 22px; }
}

/* ---------- Outils gratuits : où vont vos données, et les pages qui encadrent l'usage ---------- */
body.home .outils-cadre { margin-top: 14px; font-size: .95rem; }
body.home .outils-cadre-liens { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; font-size: .9rem; }
body.home .outils-cadre-liens a { color: var(--dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.home .outils-cadre-liens a:hover { color: var(--orange); }
@media (max-width: 999px) { body.home .outils-cadre-liens { justify-content: center; } }
/* Notre méthode : le titre et l'introduction au-dessus des cinq repères */
body.home #methode .methode-tete { margin-bottom: 36px; }
body.home #methode .methode-tete .section-desc { max-width: 720px; margin-left: auto; margin-right: auto; }
body.home #methode > #comprendre { position: relative; top: -90px; display: block; height: 0; }