/* =========================================================
   Pages intérieures : même charte Aeline que l'accueil.
   Les composants propres à ces pages (formulaires, estimateur,
   tunnel, kanban…) viennent de pages-old.css, habillés ici.
   ========================================================= */

:root{
  --r-panel:24px;--r-card:16px;--shadow-float:var(--shadow-card);--line-2:rgba(21,18,31,.2);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
}
.inner{padding-top:var(--frame)}

/* ---------- hero de page : ciel violet ---------- */
.phero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);color:#fff;
  padding:clamp(8rem,12vw,9.5rem) 0 clamp(3.2rem,6vw,5rem);
  background:linear-gradient(180deg,var(--violet-night) 0%,var(--violet-deep) 30%,var(--violet) 60%,var(--g4) 82%,var(--g5) 100%)}
.phero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
   radial-gradient(60% 30% at 10% 108%,rgba(255,255,255,.65),transparent 70%),
   radial-gradient(52% 28% at 90% 104%,rgba(255,255,255,.55),transparent 70%),
   radial-gradient(40% 20% at 50% 112%,rgba(255,255,255,.8),transparent 70%),
   radial-gradient(26% 14% at 4% 56%,rgba(255,255,255,.18),transparent 72%)}
.phero-mini{padding-block:clamp(6.5rem,9vw,8rem) clamp(2rem,4vw,3rem)}
.phero .wrap{position:relative}
.phero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:960px){.phero-grid{grid-template-columns:1.05fr .95fr}}
.phero.solo .phero-grid{grid-template-columns:minmax(0,54rem);justify-content:center;text-align:center}
.phero .t-h1{color:#fff}
.phero .t-h1 .mut{color:var(--mut)}
.phero .t-lead{color:rgba(255,255,255,.92)}
.phero.solo .t-lead{margin-inline:auto}
.phero .t-lead strong{color:#fff}
.phero .hero-ctas{justify-content:flex-start}
.phero.solo .hero-ctas{justify-content:center}
.phero .reassure{color:rgba(255,255,255,.85)}
.phero .meta-line{color:rgba(255,255,255,.8)}
.phero .meta-line b{color:#fff}
.phero.solo .meta-line{justify-content:center}
.phero .kick{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.crumb{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-family:var(--sans);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.85);background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:.55rem 1rem;border-radius:99px;margin-bottom:1.6rem}
.crumb a{color:#fff}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.crumb .s{width:5px;height:5px;border:1.5px solid var(--sun);background:transparent;border-radius:1px}
.crumb [aria-current]{color:var(--sun)}

.phero .faq-search{display:flex;align-items:center;gap:.7rem;max-width:30rem;margin:1.8rem auto 0;background:#fff;border-radius:99px;padding:.35rem 1.2rem;color:var(--ink)}
.phero .faq-search svg{width:18px;height:18px;color:var(--violet);flex:none}
.phero .faq-search input{border:0;background:none;font:inherit;padding:.8rem 0;width:100%;outline:none;color:var(--ink)}

/* visuels du hero (fenêtres de sites) */
.phero .shot-win,.phero .canvas .frame-box,.phero .serp{box-shadow:var(--shadow-card)}

/* ---------- titres de section ---------- */
.head-row{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.head-row .t-h2{max-width:24ch}
.head-row .t-lead{max-width:36rem}
.head-row>div{display:flex;flex-direction:column;align-items:center}
.head-row .more{margin-top:1rem}
.head-center{margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.inner .sec .hero-ctas{justify-content:flex-start}
.inner .sec .reassure{color:var(--ink-3)}
.inner .panel-violet .reassure,.inner .final .reassure{color:rgba(255,255,255,.85)}

/* ---------- plateaux et cartes ---------- */
.inner .metiers,.inner .svcs,.inner .versions,.inner .prices,.inner .works,.inner .tiles,.inner .stats,.inner .incl,.inner .guides,.inner .steps-big,.inner .contact-cards{
  background:var(--lilac);border-radius:var(--r-xl);padding:12px;gap:10px}
.inner .panel .tiles,.inner .panel .stats,.inner .panel .incl{background:none;padding:0;border-radius:0}
.inner .metier,.inner .svc,.inner .ver,.inner .price,.inner .work,.inner .tile,.inner .stats>div,.inner .incl li,.inner .guide,.inner .step-big,.inner .ccard{
  background:#fff;border-radius:var(--r-lg);border:0;padding:clamp(1.25rem,2.4vw,1.75rem)}
.inner .work{padding:10px}
.inner .work .work-stage{border-radius:var(--r-md)}
.inner .guide{padding:0;overflow:hidden}
.inner .guide .cov{border-radius:var(--r-md);margin:10px 10px 0}
.inner .incl li{padding:1.1rem 1rem 1.2rem}
.inner .step-big{border-radius:var(--r-lg)}
.inner .step-big.last{background:var(--violet);color:#fff}
.inner .step-big.last .ticks svg{background:var(--sun);color:var(--violet-night)}
.inner .step-big .when .tag{background:var(--violet);border-radius:99px;padding:5px 12px}
.inner .step-big.last .when .tag{background:var(--sun);color:var(--violet-night)}

.panel{border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,3.5rem)}
.panel-lilac{background:var(--lilac)}
.panel-sun{background:var(--sun);color:var(--ink)}
.panel-white{background:#fff}
.panel-violet{position:relative;isolation:isolate;overflow:hidden;background:var(--violet);color:#fff}
.panel-violet::before{content:"";position:absolute;inset:auto -20% -45% -20%;height:70%;z-index:-1;background:radial-gradient(50% 60% at 30% 100%,rgba(255,255,255,.5),transparent 70%),radial-gradient(40% 50% at 80% 100%,rgba(255,255,255,.35),transparent 70%)}
.panel-violet .t-h2,.panel-violet .t-h3,.panel-violet h2,.panel-violet h3{color:#fff}
.panel-violet .t-lead,.panel-violet p{color:rgba(255,255,255,.9)}
.panel-violet .mut{color:var(--mut)}
.panel-sun .mut{color:rgba(21,18,31,.5)}
.panel-sun .t-lead{color:#2E2A3B}
.panel-violet .tile,.panel-violet .tile h3{color:var(--ink)}
.panel-violet .tile p{color:var(--ink-3)}

.tile{border:0}
.tile .ic{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:var(--r-md);background:var(--sun);color:var(--violet-night)}
.tile .ic svg{width:1.25rem;height:1.25rem}
.tile.no{background:#fff;border:1.5px dashed rgba(21,18,31,.25)}
.tile.no .ic{background:var(--lilac);color:var(--ink)}
.ic{color:var(--violet-night)}
.ticks svg{width:1.35rem;height:1.35rem;padding:.25rem;border-radius:50%;background:var(--violet);color:#fff;margin-top:.1rem}
.incl svg{width:2.25rem;height:2.25rem;padding:.55rem;border-radius:var(--r-md);background:var(--sun);color:var(--violet-night);margin-bottom:.8rem}
.communes li{background:#fff;border:0;box-shadow:inset 0 0 0 1px var(--line)}
.stats b{color:var(--violet)}
.panel-violet .ticks svg,.panel-violet .chk svg{background:var(--sun);color:var(--violet-night)}

/* ---------- formulaires ---------- */
.form-card,.rdv-card,.est-main,.est-bill,.funnel-wrap{background:#fff;border-radius:var(--r-xl);border:0;box-shadow:inset 0 0 0 1px var(--line)}
.field label{font-weight:600;font-size:.9rem}
.field input,.field textarea,.field select{border-radius:var(--r-md);border:1.5px solid rgba(21,18,31,.14);background:#fff;font:inherit;padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(var(--violet-rgb),.14)}
.form-note svg{color:#fff;background:var(--violet);border-radius:50%;padding:.2rem}
.choice,.seg button,.optrow,.fnav a{border-radius:var(--r-md)}
.done-card{background:var(--lilac);border-radius:var(--r-lg)}
.faq-nav a{border-radius:99px}
.faq-group h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em}
.inner .faq-group .faq{background:var(--lilac);border-radius:var(--r-xl);padding:10px}

/* ---------- pages éditoriales ---------- */
.prose{color:#2A2638}
.prose h2,.prose h3{color:var(--ink)}
.prose thead th{background:var(--violet)}
.toc,.aside-cta{border-radius:var(--r-lg)}
.toc{border:0;background:var(--lilac)}
.aside-cta{background-color:var(--violet)}
.callout{border-radius:var(--r-lg)}

/* ---------- CTA final ---------- */
.inner .final .btn-sun{color:var(--violet-night)}
.inner .final{margin-top:0}

@media (max-width:959px){
  .phero.solo .phero-grid{text-align:center}
  .phero-grid{text-align:left}
  .phero:not(.solo) .phero-grid .rv:last-child{margin-top:1rem}
}

.inner .metiers,.inner .svcs,.inner .versions,.inner .prices,.inner .works{display:grid}
.inner .svc-site{background:var(--violet);color:#fff}
.inner .svc-site small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--sun);margin-bottom:.5rem}
.inner .svc-site b,.inner .svc-site p{color:#fff}
.inner .svc-site .go svg{background:var(--sun);color:var(--violet-night)}
.inner .svc-site .ic{background:var(--sun)}
@media (min-width:900px){.inner .svcs .svc-site{grid-column:1/-1;min-height:11rem}}
.phero + .sec{padding-top:clamp(2.5rem,5vw,4rem)!important}
.phero .t-h1{margin-bottom:1.3rem}
.phero:not(.solo) .phero-grid>*:last-child:not(:first-child){color:var(--ink)}
.phero:not(.solo) .phero-grid>*:last-child:not(:first-child) .cursor b{color:#fff}

/* panneau « Rapide, pas bâclé » des pages intérieures */
.panel .two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin-top:2rem}
.panel .two-col h3{margin-bottom:1rem}
.panel .chk li{color:inherit}
.panel .result{margin-top:2rem;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.03em;line-height:1.25}
@media (max-width:760px){.panel .two-col{grid-template-columns:1fr}}

/* pastilles de métiers / communes dans le hero violet */
.phero .communes li{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:600}
.phero.solo .communes{justify-content:center}

/* boutons secondaires sur fond violet */
.final .btn-line,.panel-violet .btn-line{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.final .btn-line .arr,.panel-violet .btn-line .arr{background:#fff;color:var(--violet)}
.final .btn-line:hover,.panel-violet .btn-line:hover{background:rgba(255,255,255,.3);box-shadow:none}
/* contenu juste après le hero (pages légales, guides) */
.phero + section{padding-top:clamp(2.5rem,5vw,4rem)!important}
.phero + section .prose{margin-top:0}

/* mobile : listes et grilles qui ne doivent jamais élargir la page */
.split>*,.hour>*,.phero-grid>*,.faq-grid>*,.google>*,.modifs>*{min-width:0}
@media (max-width:640px){
  .hour-list span:last-child{white-space:normal;text-align:right}
  .hour-list li{align-items:baseline}
}
.est>*,.est-main>*,.seg>*,.optrow>*{min-width:0}
@media (max-width:400px){
  .est-main{padding:1rem}
  .seg button{padding-inline:.35rem;font-size:.82rem}
  .optrow{padding-inline:.8rem}
}

/* =========================================================
   Palettes (sélecteur flottant). La palette « violet » = couleurs d'origine.
   ========================================================= */
:root{--violet-rgb:91,61,245;--sun-rgb:255,212,59;--g4:#8B77FB;--g5:#B7ABFF;--g6:#D8D1FF;--mut:#D5CCFF;--lilac-line:#C9C2E6}
/* palettes complètes v2 */
html[data-palette="ocean"]{--paper:#F6F8FB;--ink:#0E1A2B;--ink-2:#3A4A5E;--ink-3:#66758A;--ink-4:#66758A;--violet:#1F5EFF;--violet-deep:#1747C9;--violet-night:#0B2463;--violet-rgb:31,94,255;--violet-soft:rgba(31,94,255,.09);--g4:#5C8BFF;--g5:#A3BEFF;--g6:#DCE6FF;--mut:#BFD1FF;--lilac:#E7EEFF;--lilac-2:#D2DEFF;--lilac-3:#F3F6FF;--lilac-line:#C8D5F5;--sun:#FF7A3D;--sun-2:#FFB089;--sun-rgb:255,122,61;--line:rgba(14,26,43,.1)}
html[data-palette="marine"]{--paper:#FAF8F5;--ink:#111833;--ink-2:#3F4766;--ink-3:#565C7A;--ink-4:#565C7A;--violet:#22306E;--violet-deep:#1A2556;--violet-night:#0C122E;--violet-rgb:34,48,110;--violet-soft:rgba(34,48,110,.09);--g4:#4D5A99;--g5:#94A0D0;--g6:#D5DAF0;--mut:#C7CEF2;--lilac:#ECEEF6;--lilac-2:#D9DDEE;--lilac-3:#F5F6FA;--lilac-line:#C9CEE3;--sun:#FF6F59;--sun-2:#FFA394;--sun-rgb:255,111,89;--line:rgba(17,24,51,.1)}
html[data-palette="foret"]{--paper:#F7F6F1;--ink:#10231B;--ink-2:#3B5247;--ink-3:#66786F;--ink-4:#66786F;--violet:#135E46;--violet-deep:#0E4C38;--violet-night:#062A1F;--violet-rgb:19,94,70;--violet-soft:rgba(19,94,70,.09);--g4:#3B826A;--g5:#86BBA5;--g6:#CFE6DB;--mut:#BEE3D0;--lilac:#E7F0EA;--lilac-2:#CFE2D6;--lilac-3:#F2F7F3;--lilac-line:#BFD6C8;--sun:#E9B949;--sun-2:#F3D48A;--sun-rgb:233,185,73;--line:rgba(16,35,27,.1)}
html[data-palette="logo"]{--paper:#FBF8F4;--ink:#1B1714;--ink-2:#4A413A;--ink-3:#7A6F66;--ink-4:#7A6F66;--violet:#231E1A;--violet-deep:#2F2823;--violet-night:#0F0C0A;--violet-rgb:35,30,26;--violet-soft:rgba(35,30,26,.09);--g4:#5C4A3F;--g5:#C08B6E;--g6:#F2D7C4;--mut:#F7D365;--lilac:#F6EEE7;--lilac-2:#ECDDD0;--lilac-3:#FBF6F1;--lilac-line:#E2D0C1;--sun:#F4A97F;--sun-2:#F7D365;--sun-rgb:244,169,127;--line:rgba(27,23,20,.1)}
html[data-palette="ardoise"]{--paper:#F5F6F4;--ink:#15191C;--ink-2:#434C54;--ink-3:#6E7881;--ink-4:#6E7881;--violet:#2E3A46;--violet-deep:#232D37;--violet-night:#12181E;--violet-rgb:46,58,70;--violet-soft:rgba(46,58,70,.09);--g4:#55636F;--g5:#97A6B2;--g6:#D3DCE3;--mut:#C6F04D;--lilac:#E9EDF0;--lilac-2:#D4DCE2;--lilac-3:#F4F6F8;--lilac-line:#C4CED6;--sun:#C6F04D;--sun-2:#DDF78E;--sun-rgb:198,240,77;--line:rgba(21,25,28,.1)}