/* Pages publiques — charte Happiness Communication */
:root{--or:#EB690B;--or-fonce:#C9580A;--noir:#1A171B;--or-clair:#FDF0E6;--or-mi:#F4A56C;--gris:#5C585D;--filet:#D9D7DA;--fond:#F6F5F6;--blanc:#FFFFFF;
  --f:"Helvetica Neue",Helvetica,Arial,sans-serif;--larg:1120px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.site{margin:0;background:var(--blanc);color:var(--noir);font-family:var(--f);font-size:17px;line-height:1.55}
a{color:var(--noir);text-decoration-color:var(--or);text-underline-offset:3px}
a:hover{color:var(--or-fonce)}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.evitement{position:absolute;left:-999px;top:8px;background:var(--noir);color:#fff;padding:8px 12px;z-index:10}
.evitement:focus{left:8px}
h1,h2,h3{font-weight:700;letter-spacing:-.015em;margin:0}
h2{font-size:34px;line-height:1.12}
h3{font-size:18px;line-height:1.3}
p{margin:0 0 14px}
.petit{font-size:14.5px;color:var(--gris)}

/* En-tête */
.s-top{max-width:var(--larg);margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:24px}
.s-logo img{display:block;height:46px;width:auto}
.s-top nav{margin-left:auto;display:flex;gap:26px;align-items:center;font-size:15px}
.s-top nav a{text-decoration:none}
.s-top nav a:hover{text-decoration:underline}
.s-espace{border:1.5px solid var(--noir);border-radius:999px;padding:7px 16px}
.s-espace:hover{background:var(--noir);color:#fff!important;text-decoration:none!important}

main{display:block}
.s-btn{display:inline-block;background:var(--or);color:#fff;border:0;border-radius:999px;padding:14px 26px;font:inherit;font-weight:700;font-size:16px;
  cursor:pointer;text-decoration:none;line-height:1.2}
.s-btn:hover{background:var(--or-fonce);color:#fff}
.s-btn-ligne{background:transparent;color:var(--noir);box-shadow:inset 0 0 0 1.5px var(--noir)}
.s-btn-ligne:hover{background:var(--noir);color:#fff}

/* Héros */
.hero{max-width:var(--larg);margin:0 auto;padding:40px 24px 88px;display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center}
.hero h1{font-size:58px;line-height:1.02;letter-spacing:-.03em;max-width:12.5em}
.hero-intro{font-size:20px;line-height:1.5;color:#3a363b;margin:26px 0 30px;max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.hero-note{font-size:14.5px;color:var(--gris);margin:0}

.conv{margin:0;background:var(--fond);border-radius:28px;padding:28px 26px 20px}
.bulle-q{background:var(--noir);color:#fff;border-radius:20px 20px 4px 20px;padding:13px 18px;margin:0 0 16px auto;width:fit-content;max-width:88%;font-size:17px;font-weight:500}
.bulle-r{background:var(--blanc);border-radius:20px 20px 20px 4px;padding:16px 20px 12px;font-size:15.5px}
.bulle-r p{margin:0 0 10px}
.bulle-r ol{margin:0;padding-left:22px}
.bulle-r li{margin:0 0 9px;padding-left:2px}
.bulle-r li.absent{list-style:none;margin:14px 0 6px -22px;border:2px dashed var(--or);border-radius:12px;padding:9px 14px;color:var(--or-fonce);font-weight:700}
.conv figcaption{font-size:13px;color:var(--gris);margin-top:14px}
/* Le seul mouvement de la page : la réponse s'écrit ligne après ligne au chargement */
@media (prefers-reduced-motion:no-preference){
  .bulle-r > p,.bulle-r li{opacity:0;transform:translateY(6px);animation:ligne .45s ease-out forwards}
  .bulle-r > p{animation-delay:.5s}
  .bulle-r li:nth-child(1){animation-delay:1s}
  .bulle-r li:nth-child(2){animation-delay:1.4s}
  .bulle-r li:nth-child(3){animation-delay:1.8s}
  .bulle-r li.absent{animation-delay:2.6s}
}
@keyframes ligne{to{opacity:1;transform:none}}

/* Blocs */
.bloc{max-width:var(--larg);margin:0 auto;padding:72px 24px;border-top:1px solid var(--filet)}
.bloc-tete{max-width:44em;margin-bottom:36px}
.bloc-tete p{font-size:18.5px;color:#3a363b;margin-top:14px}
.questions{display:grid;grid-template-columns:3fr 2fr;gap:56px}
.questions h3{margin-bottom:4px}
.q-liste{margin:18px 0 0;padding:0 0 0 28px;font-size:18.5px;line-height:1.45}
.q-liste li{margin:0 0 14px;padding-left:6px}
.q-liste li::marker{color:var(--gris);font-weight:700;font-size:15px}
.slot{background:var(--or-clair);color:var(--or-fonce);border-bottom:2px solid var(--or);padding:0 4px;border-radius:3px 3px 0 0;font-weight:700;white-space:nowrap}
.moteurs{margin-top:22px;padding-top:16px;border-top:1px solid var(--filet);font-size:16px}

/* Exemple de résultat */
.ex-cadre{display:grid;grid-template-columns:1.1fr 1.3fr 1fr 1fr;gap:34px;border:1.5px solid var(--noir);border-radius:22px;padding:30px 32px;margin-bottom:16px}
.ex-chiffre{font-size:76px;font-weight:700;line-height:.95;letter-spacing:-.04em;color:var(--or);margin:0 0 8px}
.ex-chiffre span{font-size:24px;letter-spacing:-.01em;color:var(--noir)}
.ex-score p:last-child{font-size:15.5px;margin:0}
.ex-cadre h3{font-size:15px;margin-bottom:12px}
.ex-ligne{display:grid;grid-template-columns:92px 1fr 40px;align-items:center;gap:10px;font-size:15px;margin-bottom:9px}
.ex-ligne span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.ex-piste{display:block;height:10px;background:var(--fond);border-radius:5px;overflow:hidden}
.ex-piste i{display:block;height:100%;background:var(--or);border-radius:5px}
.ex-liste ol,.classement{margin:0;padding-left:20px;font-size:15px}
.ex-liste li,.classement li{margin-bottom:7px}
.ex-liste li span,.classement li span{color:var(--gris);font-variant-numeric:tabular-nums}

/* Bande du formulaire */
.bande{background:var(--noir);color:#fff;margin-top:24px}
.bande-in{max-width:var(--larg);margin:0 auto;padding:80px 24px;display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start}
.bande h2{color:#fff}
.bande .petit{color:#BDBABE}
.etapes{list-style:none;counter-reset:e;margin:30px 0;padding:0}
.etapes li{counter-increment:e;position:relative;padding:0 0 22px 52px;font-size:18px}
.etapes li::before{content:counter(e);position:absolute;left:0;top:-3px;width:34px;height:34px;border-radius:50%;background:var(--or);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:16px}
.carte{background:var(--blanc);color:var(--noir);border-radius:22px;padding:30px 30px 28px}

/* Formulaires */
.s-form p{margin:0 0 16px}
.s-form label{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
.s-form label span{font-weight:400;color:var(--gris)}
.s-form input,.s-form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--filet);border-radius:12px;background:var(--blanc);color:var(--noir)}
.s-form input:focus,.s-form textarea:focus{border-color:var(--noir);outline:none;box-shadow:0 0 0 3px var(--or-clair)}
.s-form small{display:block;font-size:13.5px;color:var(--gris);margin-top:5px}
.s-form .s-case{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;color:var(--gris);margin:6px 0 20px;line-height:1.45}
.s-case input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--or)}
.s-grille2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.s-alerte{background:var(--or-clair);border-left:4px solid var(--or);padding:11px 14px;border-radius:0 10px 10px 0;font-size:15px;color:var(--noir)}
.s-merci{background:var(--or-clair);border-radius:14px;padding:18px 20px;font-weight:700}
.pdm{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
input.code{font-size:30px;letter-spacing:.3em;text-align:center;max-width:260px;font-variant-numeric:tabular-nums}

/* Suivi */
.suivi{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin:0}
.suivi div{border-top:3px solid var(--noir);padding-top:16px}
.suivi dt{font-weight:700;font-size:18px;margin-bottom:8px}
.suivi dd{margin:0;font-size:15.5px;color:#3a363b}

.demo .s-form{max-width:720px}

/* FAQ */
.faq{max-width:46em}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{cursor:pointer;font-weight:700;font-size:18.5px;padding:18px 34px 18px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font-size:26px;font-weight:400;color:var(--or)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px;color:#3a363b}

/* Pages étroites (code, attente, confidentialité) */
.etroit{max-width:640px;margin:0 auto;padding:56px 24px 96px}
.etroit h1{font-size:40px;line-height:1.08;letter-spacing:-.025em;margin-bottom:18px}
.texte h2{font-size:21px;margin:30px 0 8px}
.attente{text-align:left}
.sablier{width:56px;height:56px;border-radius:50%;border:5px solid var(--or-clair);border-top-color:var(--or);margin-bottom:28px}
@media (prefers-reduced-motion:no-preference){.sablier{animation:tour 1s linear infinite}}
@keyframes tour{to{transform:rotate(360deg)}}
.etat{font-size:19px}

/* Résultat */
.res{max-width:var(--larg);margin:0 auto;padding:24px 24px 40px}
.res-tete{max-width:50em;padding:24px 0 8px}
.res-qui{font-size:16px;color:var(--gris);margin-bottom:12px}
.res h1{font-size:52px;line-height:1.04;letter-spacing:-.03em}
.res-sous{font-size:18px;color:#3a363b;margin-top:18px}
.res-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1.5px solid var(--noir);border-bottom:1px solid var(--filet);margin:30px 0 10px}
.res-chiffres div{padding:20px 22px 20px 0}
.res-chiffres div+div{border-left:1px solid var(--filet);padding-left:22px}
.res-chiffres b{display:block;font-size:44px;line-height:1;color:var(--or);letter-spacing:-.03em;margin-bottom:8px;font-variant-numeric:tabular-nums}
.res-chiffres span{font-size:15px;color:#3a363b}
.res-bloc{padding:40px 0 8px}
.res-bloc h2{font-size:26px;margin-bottom:18px}
.res-bloc .ex-ligne{max-width:620px;grid-template-columns:110px 1fr 46px;font-size:16px}
.res-deux{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.grille{border-collapse:collapse;width:100%;font-size:15px;min-width:720px}
.grille th{text-align:left;font-size:14px;color:var(--gris);padding:10px 10px;border-bottom:1.5px solid var(--noir);white-space:nowrap}
.grille td{padding:12px 10px;border-bottom:1px solid var(--filet);vertical-align:top;overflow-wrap:anywhere}
.grille td:first-child{min-width:300px}
.grille tr.marque td{background:var(--fond)}
.grille span{display:inline-block;font-size:13.5px;border-radius:999px;padding:2px 10px;white-space:nowrap}
.etat-lien{background:var(--or);color:#fff;font-weight:700}
.etat-cite{background:var(--or-clair);color:var(--or-fonce);font-weight:700}
.etat-absent{color:var(--gris)}
.etat-na{color:var(--filet)}
.extraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.extraits blockquote{margin:0;background:var(--fond);border-radius:16px;padding:16px 18px;font-size:15px;min-width:0;overflow-wrap:anywhere}
.extraits blockquote p{margin:0 0 8px}
.extraits footer{font-size:13px;color:var(--gris)}
.limites p{max-width:46em}
.res .demo{border-top:1px solid var(--filet);margin-top:32px}

/* Pied */
.s-pied{border-top:1px solid var(--filet);margin-top:40px}
.s-pied-in{max-width:var(--larg);margin:0 auto;padding:30px 24px 40px;display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:start;font-size:14px;color:var(--gris)}
.s-pied p{margin:0}
.s-liens{display:flex;gap:18px}

@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:40px;padding-bottom:64px}
  .hero h1{font-size:44px}
  .questions,.bande-in,.res-deux{grid-template-columns:1fr;gap:36px}
  .ex-cadre{grid-template-columns:1fr 1fr}
  .suivi{grid-template-columns:1fr 1fr}
  .extraits{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.site{font-size:16px}
  .s-top{padding:14px 16px;flex-wrap:wrap;gap:12px}
  .s-logo img{height:38px}
  .s-top nav{gap:14px;font-size:14px;width:100%;margin-left:0;justify-content:space-between}
  .s-top nav a:not(.s-espace){display:none}
  .s-top nav .s-espace{margin-left:auto}
  .hero{padding:20px 16px 52px}
  .hero h1{font-size:36px}
  .hero-intro{font-size:17.5px}
  .bloc{padding:52px 16px}
  h2{font-size:28px}
  .ex-cadre{grid-template-columns:1fr;padding:22px 20px;gap:26px}
  .suivi{grid-template-columns:1fr}
  .bande-in{padding:56px 16px}
  .carte{padding:22px 18px}
  .s-grille2{grid-template-columns:1fr}
  .q-liste{font-size:17px}
  .slot{white-space:normal}
  .res{padding:16px 16px 32px}
  .res h1{font-size:34px}
  .res-chiffres{grid-template-columns:1fr}
  .res-chiffres div+div{border-left:0;padding-left:0;border-top:1px solid var(--filet)}
  .etroit{padding:36px 16px 72px}
  .etroit h1{font-size:30px}
  .s-pied-in{grid-template-columns:1fr;padding:24px 16px 32px}
}