:root{
--navy:#0f1730;
--navy-2:#141c3a;
--indigo:#4f46e5;
--violet:#8b5cf6;
--cyan:#38bdf8;
--ink:#1b2140;
--muted:#5b6280;
--bg-soft:#f5f6fb;
--white:#ffffff;
--radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
font-family:'Segoe UI', Helvetica, Arial, sans-serif;
color:var(--ink);
background:var(--white);
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{
font-size:18px;letter-spacing:.14em;text-transform:uppercase;
color:var(--indigo);font-weight:700;
}
/* NOTE POUR MANU : le bandeau de commentaires HTML ci-dessous signale
chaque donnée à remplacer avant mise en ligne. */
/* ---------- HEADER ---------- */
header{
position:sticky;top:0;z-index:50;
background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
border-bottom:1px solid #eef0f7;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;}
.logo{font-size:22px;font-weight:800;color:var(--ink);display:flex;align-items:center;}
.logo span{color:var(--indigo);}
.logo img{display:block;height:34px;width:auto;}
.footer-logo{display:flex;align-items:center;margin-bottom:12px;}
.footer-logo img{display:block;height:32px;width:auto;}
nav ul{display:flex;gap:32px;list-style:none;font-size:15px;font-weight:600;color:var(--ink);}
.has-dropdown{position:relative;}
.dropdown-trigger{display:flex;align-items:center;gap:5px;cursor:pointer;}
.dropdown-trigger .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .15s;}
.has-dropdown:hover .dropdown-trigger .caret{transform:rotate(225deg);margin-top:3px;}
.dropdown-menu{
position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
background:#fff;border-radius:14px;padding:8px;min-width:170px;
box-shadow:0 20px 40px -16px rgba(20,25,60,.28);border:1px solid #eef0f7;
opacity:0;visibility:hidden;transform:translateX(-50%) translateY(6px);
transition:opacity .15s, transform .15s, visibility .15s;
}
.has-dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dropdown-menu li{list-style:none;}
.dropdown-menu a{
display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.dropdown-menu a:hover{background:var(--bg-soft);color:var(--indigo);}
.dropdown-menu .dot-ic{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dropdown-menu .dot-ic.d-claude{background:linear-gradient(135deg,#f97316,#f59e0b);}
.dropdown-menu .dot-ic.d-chatgpt{background:linear-gradient(135deg,#10a37f,#22d3ee);}
.dropdown-menu .dot-ic.d-gemini{background:linear-gradient(135deg,#6366f1,#8b5cf6);}
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:12px 22px;border-radius:999px;font-weight:700;font-size:14px;
cursor:pointer;border:none;
}
.btn-primary{background:linear-gradient(135deg,var(--indigo),var(--violet));color:#fff;box-shadow:0 10px 24px -8px rgba(99,102,241,.55);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid #dfe2ee;}
.btn-light{background:#fff;color:var(--indigo);}
.menu-toggle{
display:none;flex-direction:column;justify-content:center;gap:5px;
width:38px;height:38px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;
}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
header.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.nav-open .menu-toggle span:nth-child(2){opacity:0;}
header.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* ---------- HERO ---------- */
.hero{
position:relative;overflow:hidden;
padding:72px 24px 0;
background:radial-gradient(circle at 78% 20%, #eef0ff 0%, #ffffff 55%);
}
.hero-grid{
max-width:1180px;margin:0 auto;
display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
}
.hero h1{font-size:52px;line-height:1.08;margin:18px 0 20px;}
.hero p.lead{font-size:18px;color:var(--muted);max-width:540px;margin-bottom:28px;}
.hero-ctas{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:36px;}
.link-arrow{font-weight:700;font-size:15px;color:var(--ink);border-bottom:2px solid #dfe2ee;padding-bottom:2px;}
.hero-visual{position:relative;height:420px;}
.orb-big{
position:absolute;right:10%;top:8%;width:230px;height:230px;border-radius:50%;
background:radial-gradient(circle at 32% 28%, #a5b4fc, #6366f1 55%, #4338ca 100%);
display:flex;align-items:center;justify-content:center;
box-shadow:0 30px 60px -20px rgba(79,70,229,.55);
}
.orb-big span{font-family:Georgia, serif;font-style:italic;color:#fff;font-size:52px;}
.orb-small{
position:absolute;left:6%;bottom:6%;width:190px;height:190px;border-radius:50%;
background:radial-gradient(circle at 30% 30%, #d3f3ff, #7dd3fc 70%);opacity:.85;
}
.float-card{
position:absolute;background:#fff;border-radius:16px;padding:14px 18px;
box-shadow:0 18px 40px -16px rgba(20,25,60,.25);font-size:13px;
}
.float-card.stat1{left:0;top:0;}
.float-card.stat1 .big{font-size:22px;font-weight:800;color:var(--ink);}
.float-card.stat2{right:0;bottom:18%;display:flex;gap:10px;align-items:center;}
.float-card.stat3{left:34%;bottom:2%;display:flex;gap:10px;align-items:center;}
.dot{
width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--cyan));
display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;flex-shrink:0;
}
.dot.dot-alt{background:linear-gradient(135deg,#f97316,#fb7185);}
.orb-mini{
position:absolute;top:46%;right:-3%;width:74px;height:74px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,#fbcfe8,#ec4899 85%);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;
box-shadow:0 16px 32px -12px rgba(236,72,153,.55);
}
.orb-tiny{
position:absolute;top:2%;left:44%;width:40px;height:40px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,#fde68a,#f59e0b 85%);
box-shadow:0 10px 22px -8px rgba(245,158,11,.55);
}
.flow-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.flow-path{
fill:none;stroke:url(#flowGradient);stroke-width:2;stroke-linecap:round;
stroke-dasharray:2 8;animation:flowmove 12s linear infinite;
}
@keyframes flowmove{to{stroke-dashoffset:-200;}}
.flow-tag{
position:absolute;background:#fff;border:1px solid #eef0f7;border-radius:999px;
font-size:11px;font-weight:700;color:var(--indigo);padding:4px 10px;
box-shadow:0 8px 16px -8px rgba(20,25,60,.2);
}
/* trust / stats bar — remplit l'espace vide identifié dans l'audit */
.trust-bar{
margin-top:56px;padding:28px 0;border-top:1px solid #eef0f7;
}
.trust-inner{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center;
}
.trust-stat{text-align:left;}
.trust-stat .num{font-size:26px;font-weight:800;color:var(--ink);}
.trust-stat .lbl{font-size:13px;color:var(--muted);}
.badge-row{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.cert-badge{
display:flex;align-items:center;gap:8px;border:1px solid #e4e6f2;border-radius:999px;
padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--ink);
}
.cert-badge .ico{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--indigo),var(--violet));}
/* ---------- SECTIONS GÉNÉRIQUES ---------- */
section{padding:96px 0;}
.section-head{max-width:700px;margin-bottom:52px;}
/* Approche */
#approche{position:relative;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.35;z-index:0;}
.blob-a{width:260px;height:260px;top:-60px;right:6%;background:radial-gradient(circle,#c7d2fe,transparent 70%);}
.blob-b{width:220px;height:220px;bottom:-40px;left:2%;background:radial-gradient(circle,#bae6fd,transparent 70%);}
#approche .container{position:relative;z-index:1;}
.approach-head-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;margin-bottom:52px;}
.approach-head-grid .section-head{margin-bottom:0;}
.approach-illu{
position:relative;height:230px;border-radius:24px;
background:linear-gradient(135deg,#eef0ff 0%,#f5f6fb 100%);
display:flex;align-items:center;justify-content:center;overflow:visible;
}
.approach-illu .dot-float{
position:absolute;border-radius:50%;box-shadow:0 12px 24px -10px rgba(20,25,60,.3);
}
.approach-illu .dot-float.d1{width:22px;height:22px;top:8%;left:10%;background:radial-gradient(circle at 30% 30%,#fde68a,#f59e0b 85%);}
.approach-illu .dot-float.d2{width:16px;height:16px;bottom:12%;right:12%;background:radial-gradient(circle at 30% 30%,#fbcfe8,#ec4899 85%);}
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.approach-card{padding:32px 26px;border:1px solid #eef0f7;border-radius:var(--radius);background:#fff;transition:transform .2s, box-shadow .2s;}
.approach-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(20,25,60,.25);}
.approach-card .icon{
display:inline-flex;align-items:center;justify-content:center;
width:52px;height:52px;border-radius:14px;margin-bottom:18px;color:#fff;
}
.approach-card .icon svg{width:26px;height:26px;}
.icon.ic1{background:linear-gradient(135deg,#6366f1,#818cf8);}
.icon.ic2{background:linear-gradient(135deg,#8b5cf6,#c084fc);}
.icon.ic3{background:linear-gradient(135deg,#38bdf8,#22d3ee);}
.approach-card h3{font-size:19px;margin-bottom:10px;}
.approach-card p{color:var(--muted);font-size:15px;}
/* Formations */
.formations-bg{background:var(--bg-soft);}
.formations-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.form-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 30px -18px rgba(20,25,60,.25);}
.form-top{height:150px;position:relative;display:flex;align-items:center;justify-content:center;}
.form-top.g1{background:linear-gradient(135deg,#8b7bf5,#6d5ce8);}
.form-top.g2{background:linear-gradient(135deg,#233163,#141c3a);}
.form-top.g3{background:linear-gradient(135deg,#38bdf8,#6366f1);}
.form-tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.16);color:#fff;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:999px;backdrop-filter:blur(4px);}
.form-icon{color:#fff;font-size:34px;font-weight:800;}
.form-body{padding:22px 22px 24px;}
.form-body h3{font-size:18px;margin-bottom:8px;}
.form-body p{color:var(--muted);font-size:14.5px;margin-bottom:16px;}
.form-meta{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.pill{background:var(--bg-soft);color:var(--ink);font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;}
.form-cta{font-size:14px;font-weight:700;color:var(--indigo);border-top:1px solid #eef0f7;padding-top:14px;display:flex;justify-content:space-between;}
/* Pourquoi + témoignage */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.formation-images-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0;}
.formation-images-grid img{width:100%;height:auto;border-radius:12px;display:block;object-fit:cover;}
.why-grid p.desc{color:var(--muted);margin-bottom:26px;max-width:460px;}
.check-list{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:0;}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-weight:600;font-size:15px;}
.check-list .tick{
width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;margin-top:1px;
}
.testimonial{
background:linear-gradient(160deg,#1e2a63,#4338ca 60%,#6d28d9);
border-radius:28px;padding:40px 36px;color:#fff;position:relative;
}
.testimonial .quote-mark{font-size:44px;color:#a5b4fc;font-family:Georgia,serif;line-height:1;}
.testimonial p.quote{font-style:italic;font-size:20px;line-height:1.5;margin:14px 0 26px;}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.avatar-init{
width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;
}
.testimonial-author .name{font-weight:700;font-size:14.5px;}
.testimonial-author .role{font-size:12.5px;color:#c7cdf7;}
/* FAQ */
.faq-bg{background:var(--bg-soft);position:relative;overflow:hidden;}
.faq-bg .blob-c{width:300px;height:300px;top:-80px;left:-60px;background:radial-gradient(circle,#ddd6fe,transparent 70%);}
.faq-bg .blob-d{width:260px;height:260px;bottom:-80px;right:-40px;background:radial-gradient(circle,#a5f3fc,transparent 70%);}
.faq-bg .container{position:relative;z-index:1;}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.faq-item{background:#fff;border-radius:16px;padding:20px 24px;border:1px solid #eef0f7;}
.faq-item summary{cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;display:flex;gap:14px;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .q-txt{display:flex;gap:14px;align-items:center;}
.faq-dot{width:28px;height:28px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:800;}
.faq-item:nth-child(1) .faq-dot{background:linear-gradient(135deg,#6366f1,#818cf8);}
.faq-item:nth-child(2) .faq-dot{background:linear-gradient(135deg,#8b5cf6,#c084fc);}
.faq-item:nth-child(3) .faq-dot{background:linear-gradient(135deg,#38bdf8,#22d3ee);}
.faq-item:nth-child(4) .faq-dot{background:linear-gradient(135deg,#f472b6,#fb923c);}
.faq-item summary::after{content:'+';font-size:20px;color:var(--indigo);font-weight:800;flex-shrink:0;}
.faq-item[open] summary::after{content:'–';}
.faq-item p{color:var(--muted);font-size:14.5px;margin-top:12px;padding-left:42px;}
/* CTA + formulaire */
.cta-section{
background:linear-gradient(120deg,#4f46e5,#8b5cf6);
border-radius:32px;margin:0 24px;padding:64px 48px;color:#fff;
}
.cta-inner{max-width:1130px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.cta-inner p{color:#e5e2ff;max-width:400px;margin-bottom:24px;}
.contact-form{background:#fff;border-radius:20px;padding:28px;color:var(--ink);}
.contact-form label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px;margin-top:14px;}
.contact-form label:first-child{margin-top:0;}
.contact-form input,.contact-form textarea{
width:100%;border:1px solid #e4e6f2;border-radius:10px;padding:11px 13px;font-size:14px;font-family:inherit;
}
.contact-form textarea{resize:vertical;min-height:70px;}
.contact-form .btn-primary{width:100%;justify-content:center;margin-top:18px;}
.form-note{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;}
/* FOOTER */
footer{background:linear-gradient(160deg,#d8dcfb 0%,#e2e5f5 45%,#c7f2f7 100%);color:var(--ink);padding:64px 0 0;border-top:1px solid #d5d9ef;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:44px;border-bottom:1px solid #e4e6f2;}
.footer-logo span{color:var(--indigo);}
.footer-grid p.baseline{font-size:14px;color:#3a4166;max-width:230px;}
.footer-col h4{font-size:13px;color:var(--ink);margin-bottom:14px;letter-spacing:.04em;}
.footer-heading{display:block;font-size:13px;font-weight:700;color:var(--ink);margin:0 0 14px;letter-spacing:.04em;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px;font-weight:600;color:#2b3157;}
.footer-col a{color:#2b3157;}
.footer-col a:hover{color:var(--indigo);text-decoration:underline;}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:13px;color:#3a4166;font-weight:600;flex-wrap:wrap;gap:10px;
}
.footer-bottom .legal-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-bottom .legal-links a{color:#3a4166;}
.footer-bottom .legal-links a:hover{color:var(--indigo);text-decoration:underline;}
@media(max-width:900px){
.hero-grid{grid-template-columns:1fr;}
.hero-visual{height:280px;}
.trust-inner{grid-template-columns:repeat(2,1fr);}
.badge-row{justify-content:flex-start;margin-top:18px;}
.approach-head-grid{grid-template-columns:1fr;}
.approach-illu{margin-top:24px;}
.approach-grid,.form-grid{grid-template-columns:1fr;}
.why-grid{grid-template-columns:1fr;}
.formation-images-grid{grid-template-columns:1fr;}
.cta-inner{grid-template-columns:1fr;}
.footer-grid{grid-template-columns:1fr 1fr;}
/* ---- menu mobile ---- */
.menu-toggle{display:flex;order:-1;}
.nav-wrap{flex-wrap:wrap;row-gap:10px;justify-content:flex-start;gap:14px;}
.nav-wrap > .btn-primary{order:3;margin-left:auto;}
nav{order:4;width:100%;flex-basis:100%;}
nav ul{
display:none;flex-direction:column;gap:0;width:100%;
border-top:1px solid #eef0f7;padding-top:6px;
}
header.nav-open nav ul{display:flex;}
nav ul li{width:100%;}
nav ul > li > a{display:block;padding:13px 2px;border-bottom:1px solid #eef0f7;}
.has-dropdown .dropdown-trigger{
width:100%;justify-content:space-between;padding:13px 2px;border-bottom:1px solid #eef0f7;
}
.has-dropdown .dropdown-trigger a{padding:0;border:none;}
.dropdown-menu{
position:static;transform:none;box-shadow:none;border:none;
opacity:1;visibility:visible;display:none;width:100%;
padding:0 0 6px 14px;min-width:0;
}
.has-dropdown.dropdown-open .dropdown-menu{display:block;}
.has-dropdown.dropdown-open .dropdown-trigger .caret{transform:rotate(225deg);margin-top:3px;}
}
.qualiopi-wrap{display:flex;align-items:flex-start;gap:32px;flex-wrap:nowrap;}
.qualiopi-text{flex:0 0 calc(75% - 32px);max-width:calc(75% - 32px);box-sizing:border-box;}
.qualiopi-side{flex:0 0 25%;max-width:25%;text-align:left;box-sizing:border-box;}
.section-head{margin-bottom:0;}
.approach-head-grid.qualiopi-wrap{margin-bottom:0;}
.qualiopi-badge{display:inline-block;margin:0 0 12px;color:#fff;background:#0070C4;border-radius:10px;padding:8px 16px;font-family:'Verdana', Geneva, sans-serif;letter-spacing:0.03em;}
.qualiopi-logo{width:100%;display:block;max-height:170px;object-fit:contain;}
@media(max-width:900px){
.qualiopi-wrap{flex-wrap:wrap;}
.qualiopi-text,.qualiopi-side{flex:1 1 100%;max-width:100%;}
.qualiopi-side{margin-top:24px;}
}
.speech-bubble{
position:absolute;background:#fff;border-radius:16px;padding:12px 18px;
box-shadow:0 18px 40px -16px rgba(20,25,60,.25);font-size:13px;font-weight:600;
color:#1b2140;max-width:170px;line-height:1.35;
}
.speech-bubble:after{
content:'';position:absolute;bottom:-9px;left:26px;
border-width:9px 9px 0;border-style:solid;border-color:#fff transparent;
}
.visual-caption{
position:absolute;top:32%;left:47%;transform:translate(-50%,-50%);
z-index:5;text-align:center;font-size:34px;color:#ffffff;
background:#0078D4;padding:10px 28px;border-radius:14px;
box-shadow:0 18px 40px -16px rgba(20,25,60,.25);white-space:nowrap;
}
.h2bleu {
display: inline-block;
margin: 0 0 12px;
color: #fff;
background: #0070C4;
border-radius: 10px;
padding: 8px 16px;
font-family: 'Verdana', Geneva, sans-serif;
letter-spacing: 0.03em;
font-size: 18px;
}
.h3-souligne {
display: inline-block;
margin: 24px 0 16px;
padding-bottom: 8px;
color: #0f1730;
font-size: 19px;
font-weight: 700;
border-bottom: 3px solid #0078D4;
}
/* Correctif mobile : le bandeau-titre (ex. "Mentions Légales") débordait
de l'écran en dessous de 900px car .visual-caption est en white-space:nowrap
avec une taille de police pensée pour desktop. !important pour rester
prioritaire même si une règle .visual-caption dupliquée est réintroduite
plus loin dans la feuille de style. */
@media(max-width:900px){
.visual-caption{
font-size:22px !important;
padding:8px 16px !important;
white-space:normal !important;
max-width:82% !important;
line-height:1.25 !important;
overflow-wrap:break-word !important;
word-break:break-word !important;
box-sizing:border-box !important;
}
}
/* Bloc "Certifié Qualiopi" + "Devis" : en desktop il flotte en overlay
en haut à droite de la section #approche (positionnement absolu).
En dessous de 900px, il ne doit plus flotter en overlay : le script
en bas de page le déplace juste avant le footer dans le DOM, et cette
règle le fait passer en flux normal, centré, à cet endroit. */
#qualiopi-devis-block{
position:absolute;top:0;right:0;width:25%;
}
@media(max-width:900px){
#qualiopi-devis-block{
position:static;
width:100%;
max-width:320px;
margin:40px auto 0;
padding:0 24px;
text-align:center;
box-sizing:border-box;
}
#qualiopi-devis-block .qualiopi-logo{
margin:0 auto;
}
}
/* Le bloc #qualiopi-devis-block peut contenir plusieurs badges (Qualiopi,
Devis, Nos centres + recherche) et devenir plus haut que la 1re ligne
.qualiopi-wrap. Comme il est en position:absolute (hors flux), le texte
qui suit dans .approach-details ne réserve aucune marge pour lui et
finit par passer dessous/le toucher. On réserve donc la même largeur
que .qualiopi-text sur desktop pour que le texte ne le touche jamais. */
@media(min-width:901px){
.approach-details{
padding-right: calc(25% + 32px);
box-sizing: border-box;
}
}
.autocomplete-wrapper {
position: relative;
background: var(--bg-soft);
border-radius: 16px;
padding: 10px;
}
/* En dessous de 900px, la zone de recherche passe sur sa propre ligne
(sous le bouton "Nos centres" par ex.) au lieu de rester collée à côté. */
@media(max-width:900px){
.autocomplete-wrapper{
display:block;
width:100%;
flex:1 1 100%;
margin-top:14px;
}
}
/* Zone de texte de recherche (ex. "Nos centres") : reprend le style des
champs du formulaire de contact pour rester cohérent avec le reste du site. */
.autocomplete-wrapper input[type="text"],
.autocomplete-wrapper input[type="search"],
.autocomplete-wrapper input:not([type]){
width:100%;
box-sizing:border-box;
border:1px solid #e4e6f2;
border-radius:12px;
padding:13px 18px 13px 44px;
font-size:14.5px;
font-family:inherit;
color:var(--ink);
background-color:#fff;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:16px center;
background-size:18px 18px;
outline:none;
box-shadow:0 10px 24px -18px rgba(20,25,60,.25);
transition:border-color .15s, box-shadow .15s;
}
.autocomplete-wrapper input[type="text"]::placeholder,
.autocomplete-wrapper input[type="search"]::placeholder,
.autocomplete-wrapper input:not([type])::placeholder{
color:var(--muted);
}
.autocomplete-wrapper input[type="text"]:focus,
.autocomplete-wrapper input[type="search"]:focus,
.autocomplete-wrapper input:not([type]):focus{
border-color:var(--indigo);
box-shadow:0 0 0 4px rgba(99,102,241,.15);
}
.autocomplete-list {
display: none;
position: absolute;
left: 0;
right: 0;
border: 1px solid #eef0f7;
border-radius: 14px;
background: #ffffff;
color: var(--ink);
max-height: 220px;
overflow-y: auto;
margin-top: 8px;
padding: 8px;
list-style: none;
font-size: 0.9rem;
box-shadow: 0 20px 40px -16px rgba(20,25,60,.28);
z-index: 20;
}
.autocomplete-item {
display: block;
width: 100%;
text-align: left;
padding: 10px 12px;
border-radius: 9px;
border-bottom: none;
cursor: pointer;
background: transparent;
font-weight: 600;
transition: background .12s, color .12s;
}
.autocomplete-item:hover,
.autocomplete-item:focus { background: var(--bg-soft); color: var(--indigo); }
/* ====================================================================
CSS "Nos références" — grille 6 colonnes responsive
A AJOUTER DANS LA FEUILLE DE STYLE DU SITE (PAS dans le contenu de
la page) : soit dans le fichier CSS du thème, soit dans le