/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */
/* Feuille commune des deux pages. Les couleurs variables sont injectées depuis
   config.js. Le bleu du logo et de son fichier SVG reste indépendant des thèmes.
   La composition sobre reprend les proportions de la maquette approuvée. */
@font-face{font-family:Encode;src:url('fonts/EncodeSansSemiExpanded-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}

@font-face{font-family:Encode;src:url('fonts/EncodeSansSemiExpanded-Bold.ttf') format('truetype');font-style:normal;font-weight:700 900;font-display:swap}
/* Fond et typographie de repli : contenu visible avant chargement du JavaScript. */
html:has(.crafteno-experience){scroll-behavior:smooth;scroll-padding-top:24px}

body:has(.crafteno-experience){margin:0;background:#fff}

.crafteno-experience *{box-sizing:border-box}

.crafteno-experience{--primary:#2044ed;--accent:#f5ff62;--pale:#edf3ff;--ink:#0b153b;--muted:#445475;--brand-blue:#2044ed;--line:#d4dbea;color:var(--ink);font-family:Encode,Helvetica,sans-serif;font-size:16px;line-height:1.5;background:var(--page-background,#FFFEFA);overflow-wrap:break-word}

.crafteno-experience ::selection{background:var(--accent);color:var(--ink)}

.crafteno-experience{scrollbar-color:var(--primary) var(--pale)}

.crafteno-experience input{caret-color:var(--primary)}

.crafteno-experience :focus-visible{outline:3px solid var(--primary);outline-offset:4px}

.crafteno-experience a{color:inherit;text-underline-offset:4px}

.crafteno-experience button,.crafteno-experience input{font:inherit}

.crafteno-experience button,.crafteno-experience a{touch-action:manipulation}

.crafteno-experience svg{width:22px;height:22px;flex:none;vertical-align:middle}

.crafteno-experience h1,.crafteno-experience h2,.crafteno-experience h3,.crafteno-experience p{margin:0}

.crafteno-experience h1,.crafteno-experience h2{font-weight:700;letter-spacing:-.035em;text-wrap:balance}

.crafteno-experience img{max-width:100%;display:block}

.crafteno-experience .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.crafteno-experience .skip-link{position:fixed;top:8px;left:8px;transform:translateY(-150%);padding:12px;background:white;z-index:10}

.crafteno-experience .skip-link:focus{transform:none}
/* Navigation et marque officielle. Aucun sélecteur de palette ne cible le SVG. */
.crafteno-experience .masthead{min-height:86px;padding:10px 4%;display:flex;align-items:center;gap:3vw;border-bottom:1px solid var(--line)}

.crafteno-experience .brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap;font-size:clamp(28px,2.9vw,48px);font-weight:700;letter-spacing:-.04em;color:#0b153b!important;line-height:1}

.crafteno-experience .brand img{width:clamp(34px,3.2vw,54px);height:auto}

.crafteno-experience .brand .brand-dot{color:var(--brand-blue);margin-left:-10px}

.crafteno-experience .masthead nav{display:flex;gap:3.2vw;margin-left:auto;align-items:center;font-size:clamp(14px,1.15vw,20px);font-weight:700}

.crafteno-experience .masthead nav a{text-decoration:none;padding:10px 0;white-space:nowrap}

.crafteno-experience .masthead nav a:hover{text-decoration:underline}

.crafteno-experience .button{min-height:48px;padding:12px 21px;display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid transparent;border-radius:12px;font-size:clamp(15px,1.12vw,20px);font-weight:700;text-decoration:none;cursor:pointer;line-height:1.3;text-align:center}

.crafteno-experience .button.primary{background:var(--primary);color:white}

.crafteno-experience .button.accent{background:var(--accent);color:var(--ink)}

.crafteno-experience .button.outline{border-color:var(--primary);color:var(--ink);background:white}

.crafteno-experience .button:hover{filter:brightness(.94)}

.crafteno-experience .button:disabled{opacity:.5;cursor:not-allowed}

.crafteno-experience .button.small{min-height:44px;padding:8px 16px;font-size:14px}

.crafteno-experience .contact-nav{margin-left:4vw;border-radius:14px;min-height:52px}
/* Bandeau : six choix visibles et état actif marqué à la fois par coche et contour. */
.crafteno-experience .palette-bar{margin:8px 2.2% 0;border-radius:15px;background:var(--pale);display:flex;align-items:center;gap:1.3vw;padding:10px 2%;min-height:65px}

.crafteno-experience .palette-bar>strong{font-size:clamp(14px,1.22vw,21px);white-space:nowrap}

.crafteno-experience .palette-note{font-size:clamp(11px,.95vw,16px);white-space:nowrap;border-left:1px solid var(--line);padding-left:1.2vw}

.crafteno-experience .palette-options{display:flex;align-items:center;justify-content:space-between;gap:.7vw;flex:1;min-width:0}

.crafteno-experience .palette-options button{display:flex;align-items:center;justify-content:center;gap:8px;background:white;color:var(--ink);border:1px solid #c6cfdf;border-radius:12px;padding:8px 12px;min-height:44px;font-size:clamp(11px,.96vw,16px);font-weight:700;white-space:nowrap;cursor:pointer;flex:1}

.crafteno-experience .palette-options button[aria-pressed=true]{border:2px solid var(--primary);color:var(--primary);padding:7px 11px}

.crafteno-experience .swatches{display:flex;gap:3px}

.crafteno-experience .swatches i{width:clamp(13px,1.2vw,21px);aspect-ratio:1;border-radius:50%;display:block}

.crafteno-experience .selected-check{width:17px;height:18px;display:none}

.crafteno-experience .selected-check svg{width:17px;height:17px}

.crafteno-experience .palette-options button[aria-pressed=true] .selected-check{display:inline-flex}
/* Premier écran sobre : titre à gauche, exemple et formulaire à droite. */
.crafteno-experience .hero{margin:25px 2.2% 0;display:grid;grid-template-columns:40% 58%;gap:2%;align-items:start}

.crafteno-experience .hero-copy{padding:8px 0 0 2vw;min-width:0}

.crafteno-experience .hero h1{font-size:clamp(43px,4.3vw,78px);line-height:1.08;white-space:nowrap;letter-spacing:-.035em}

.crafteno-experience .hero-intro{font-size:clamp(18px,1.72vw,29px);line-height:1.35;color:var(--muted);margin-top:25px!important}

.crafteno-experience .hero-actions{display:flex;gap:18px;margin-top:50px}

.crafteno-experience .hero-actions .button{min-height:64px;white-space:nowrap;font-size:clamp(14px,1.14vw,20px);padding:12px 22px}

.crafteno-experience .demo-scene{position:relative;min-height:calc(28.9vw + 24px);max-height:540px;min-width:0}

.crafteno-experience .sample-site{width:74%;border-radius:15px;background:white;overflow:hidden;box-shadow:0 12px 26px #0b153b12}

.crafteno-experience .sample-nav{height:3.5vw;max-height:64px;min-height:42px;background:var(--primary);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 2.5vw;gap:12px}

.crafteno-experience .sample-nav>strong{font-size:clamp(14px,1.33vw,23px);letter-spacing:-.025em;white-space:nowrap}

.crafteno-experience .sample-nav nav{display:flex;gap:1.3vw;font-size:clamp(9px,.76vw,13px)}

.crafteno-experience .sample-nav a{text-decoration:none;white-space:nowrap}

.crafteno-experience .sample-nav a:hover{text-decoration:underline}

.crafteno-experience .sample-photo{position:relative;height:16.1vw;max-height:295px;overflow:hidden;background:#756250}

.crafteno-experience .sample-photo>img{width:100%;height:100%;object-fit:cover}

.crafteno-experience .sample-photo-copy{position:absolute;inset:4.1vw auto auto 2.5vw;color:white}

.crafteno-experience .sample-photo-copy h2{font-size:clamp(23px,2.52vw,43px);line-height:1.15;letter-spacing:-.03em}

.crafteno-experience .sample-photo-copy p{font-size:clamp(12px,1.12vw,19px);margin-top:4px;text-shadow:0 1px 3px #0007}

.crafteno-experience .sample-book{display:inline-flex;min-height:44px;align-items:center;padding:9px 14px;background:#fff;color:var(--primary)!important;border-radius:10px;text-decoration:none;font-size:clamp(10px,.83vw,14px);font-weight:700;margin-top:20px}

.crafteno-experience .sample-services{padding:12px 2.5vw 20px}

.crafteno-experience .sample-services h3{font-size:clamp(16px,1.33vw,23px);margin:0 0 14px;letter-spacing:-.025em}

.crafteno-experience .service-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:84%}

.crafteno-experience .service-thumbs a{display:flex;align-items:center;gap:14px;min-width:0;background:var(--pale);border-radius:10px;text-decoration:none;font-size:clamp(12px,.98vw,17px);overflow:hidden}

.crafteno-experience .service-thumbs img{width:45%;height:4.2vw;max-height:80px;object-fit:cover}

.crafteno-experience .service-thumbs a:hover{text-decoration:underline}
/* Essai local : options radio natives, état sélectionné lisible, message explicite. */
.crafteno-experience .booking-panel{position:absolute;right:0;top:3vw;width:36.6%;background:white;border-radius:15px;padding:16px 20px 12px;box-shadow:0 12px 30px #0b153b18;z-index:1;color:var(--ink)}

.crafteno-experience .demo-caption{margin:-16px -20px 20px;padding:14px 20px 8px;background:var(--pale);border-radius:15px 15px 0 0;display:flex;flex-direction:column;line-height:1.35}

.crafteno-experience .demo-caption span{font-size:clamp(12px,1vw,17px);color:var(--muted)}

.crafteno-experience .demo-caption strong{font-size:clamp(17px,1.4vw,24px);letter-spacing:-.02em}

.crafteno-experience .booking-panel fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}

.crafteno-experience .booking-panel legend{padding:0;margin:0 0 10px;font-size:clamp(12px,1.03vw,18px);font-weight:700;white-space:nowrap}

.crafteno-experience .service-option{display:flex;gap:9px;align-items:center;padding:8px 9px;border:1px solid var(--line);border-radius:10px;min-height:42px;margin-top:8px;font-size:clamp(12px,1vw,17px);cursor:pointer;white-space:nowrap}

.crafteno-experience .service-option:has(input:checked){background:var(--pale);border-color:var(--primary)}

.crafteno-experience .service-option input{width:18px;height:18px;margin:0;accent-color:var(--primary);flex:none}

.crafteno-experience .time-options{display:flex;gap:12px}

.crafteno-experience .time-options label{position:relative;flex:1;min-width:0;cursor:pointer}

.crafteno-experience .time-options input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}

.crafteno-experience .time-options span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:10px;font-size:clamp(12px,1.04vw,18px);font-weight:700;font-variant-numeric:tabular-nums}

.crafteno-experience .time-options input:checked+span{background:var(--primary);border-color:var(--primary);color:white}

.crafteno-experience .time-options input:focus-visible+span{outline:3px solid var(--primary);outline-offset:3px}

.crafteno-experience .demo-submit{width:100%;min-height:52px}

.crafteno-experience .demo-notice{font-size:10px;color:var(--muted);line-height:1.35;margin-top:7px!important}

.crafteno-experience .demo-result{padding-top:12px;font-size:13px}

.crafteno-experience .demo-result p{margin-bottom:8px}

.crafteno-experience .text-link{font-weight:700}

.crafteno-experience .text-link svg{width:16px}

.crafteno-experience .reset-demo{border:0;background:none;text-decoration:underline;color:var(--muted);cursor:pointer;padding:10px 0;display:block;font-size:12px}
/* Offres sous le premier écran ; une illustration n’est jamais un contrôle actif. */
.crafteno-experience .offers{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin:24px 2.2% 20px}

.crafteno-experience .offers article{display:flex;align-items:center;gap:26px;background:var(--pale);padding:20px 28px;border-radius:15px;min-height:164px}

.crafteno-experience .offers img{width:34%;height:122px;object-fit:contain;flex:none}

.crafteno-experience .offers h2{font-size:clamp(18px,1.65vw,28px);line-height:1.16;margin-bottom:10px}

.crafteno-experience .offers p{font-size:clamp(13px,1.02vw,18px);line-height:1.45;color:var(--muted)}
/* Suite de lecture : étapes, exemples, réponses et contact ; même grammaire calme. */
.crafteno-experience .section{padding:70px 4%}

.crafteno-experience .section h2{font-size:clamp(30px,3vw,48px);line-height:1.1;margin-bottom:26px}

.crafteno-experience .how{background:var(--pale);padding-top:22px}

.crafteno-experience .how ol{list-style:none;counter-reset:steps;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;padding:0;margin:45px 0 0}

.crafteno-experience .how li{counter-increment:steps;position:relative;padding-top:18px;border-top:1px solid var(--line)}

.crafteno-experience .how li::before{content:counter(steps);font-size:16px;font-weight:700;color:var(--primary);display:block;margin-bottom:18px}

.crafteno-experience .how h3{font-size:22px;line-height:1.3;margin-bottom:12px}

.crafteno-experience .how p,.crafteno-experience .section-intro{max-width:68ch;color:var(--muted);font-size:17px}

.crafteno-experience .examples{padding-bottom:50px}

.crafteno-experience .profession-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}

.crafteno-experience .profession-cards article{border:1px solid var(--line);border-radius:15px;overflow:hidden;background:white;display:flex;flex-direction:column;align-items:stretch;padding-bottom:14px}

.crafteno-experience .profession-cards h3{font-size:clamp(20px,1.5vw,26px);display:flex;gap:14px;align-items:center;background:var(--primary);color:#fff;padding:15px 20px;margin-bottom:0}

.crafteno-experience .profession-cards article:nth-child(2) h3{background:var(--accent);color:var(--ink)}

.crafteno-experience .profession-cards img{width:100%;height:210px;object-fit:cover}

.crafteno-experience .profession-cards article>.button{margin:16px 16px 0}

.crafteno-experience .other-trade p{padding:30px 20px;margin:auto 0;color:var(--muted)}

.crafteno-experience .other-trade>.button{margin-top:auto}

.crafteno-experience .illustration-note{font-size:12px;color:var(--muted);margin-top:16px!important}

.crafteno-experience .faq{display:grid;grid-template-columns:38% 1fr;gap:6%;padding-top:30px}

.crafteno-experience .faq details{border-bottom:1px solid var(--line);padding:20px 0}

.crafteno-experience .faq summary{font-size:18px;font-weight:700;cursor:pointer;min-height:32px}

.crafteno-experience .faq details p{max-width:65ch;color:var(--muted);margin:18px 0 4px}

.crafteno-experience .project{background:var(--pale)}

.crafteno-experience .project>p{max-width:68ch;color:var(--muted);font-size:18px}

.crafteno-experience .project-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}

.crafteno-experience .footer{padding:36px 4%;font-size:13px;color:var(--muted)}

.crafteno-experience .footer>div{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-bottom:20px}

.crafteno-experience .footer .brand{font-size:30px}

.crafteno-experience .footer .brand img{width:34px}

.crafteno-experience .footer p{max-width:88ch;margin-bottom:14px}

.crafteno-experience .footer>a{font-size:12px}
/* Page expressive destinée à Sevy : composition approuvée, lien principal vers Crafteno. */
.crafteno-experience.presentation .promo-hero{position:relative;display:grid;grid-template-columns:62% 38%;min-height:320px;background:var(--accent);overflow:hidden}

.crafteno-experience .promo-copy{padding:36px 5% 32px 6.5%;position:relative;z-index:1}

.crafteno-experience .promo-copy h1{font-size:clamp(34px,3.6vw,60px);line-height:1.07;font-style:italic;max-width:22ch}

.crafteno-experience .promo-copy p{font-size:clamp(17px,1.55vw,26px);max-width:36ch;margin:22px 0}

.crafteno-experience .promo-photo{width:100%;height:100%;object-fit:cover;position:absolute;right:0;top:0;max-width:45%}

.crafteno-experience .promo-copy{background:var(--accent);border-radius:0 0 75% 0}

.crafteno-experience .promo-utilities{display:flex;gap:22px;align-items:center;margin:0 3% 20px;position:relative;margin-top:-5px}

.crafteno-experience .promo-utilities>span{font-size:13px;border:1px solid var(--primary);padding:8px 14px;border-radius:24px}

.crafteno-experience .promo-journey{display:grid;grid-template-columns:47% 29% 20%;gap:2%;padding:0 2.2% 20px;align-items:center}

.crafteno-experience .promo-journey .profession-cards{gap:20px;margin:0}

.crafteno-experience .promo-journey .profession-cards h3{font-size:clamp(14px,1.3vw,22px);padding:12px}

.crafteno-experience .promo-journey .profession-cards img{height:100px}

.crafteno-experience .promo-journey .profession-cards .button{font-size:clamp(10px,.8vw,14px);padding:8px 10px;margin:12px 10px 0;white-space:normal}

.crafteno-experience .promo-journey .other-trade p{font-size:clamp(12px,1vw,16px);padding:12px;min-height:100px}

.crafteno-experience .promo-example .sample-site{width:100%}

.crafteno-experience .promo-example .sample-nav{padding:0 15px;min-height:42px}

.crafteno-experience .promo-example .sample-nav>strong{font-size:18px}

.crafteno-experience .promo-example .sample-nav nav{display:none}

.crafteno-experience .promo-example .sample-photo{height:220px}

.crafteno-experience .promo-example .sample-photo-copy{inset:40px 16px auto}

.crafteno-experience .promo-example .sample-photo-copy h2{font-size:27px}

.crafteno-experience .promo-example .sample-photo-copy p{font-size:14px}

.crafteno-experience .promo-example .sample-book{font-size:12px}

.crafteno-experience .promo-example .sample-services{display:none}

.crafteno-experience .promo-booking .booking-panel{position:relative;top:auto;right:auto;width:100%;padding:15px}

.crafteno-experience .promo-booking .demo-caption{margin:-15px -15px 18px;padding:12px 15px}

.crafteno-experience .promo-booking .demo-caption strong{font-size:19px}

.crafteno-experience .promo-booking .booking-panel legend{font-size:13px}

.crafteno-experience .promo-booking .service-option{font-size:12px}

.crafteno-experience .promo-booking .time-options{gap:6px}

.crafteno-experience .promo-booking .time-options span{font-size:12px}

.crafteno-experience .promo-booking .demo-notice{font-size:10px}

.crafteno-experience .existing{padding-top:35px;display:grid;grid-template-columns:36% 1fr 23%;gap:4%;align-items:center}

.crafteno-experience .existing h2{font-size:clamp(27px,2.6vw,44px);font-style:italic;margin:0}

.crafteno-experience .existing p{font-size:17px;color:var(--muted);max-width:45ch}

.crafteno-experience .existing strong{display:block;padding:12px 20px;background:var(--accent);border-radius:26px;font-size:17px;overflow-wrap:anywhere}

.crafteno-experience .existing small{display:block;font-style:italic;text-align:center;margin-top:4px}
/* Adaptation : les contrôles gardent leur taille tactile ; aucune réduction globale en image. */
@media(min-width:1800px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience{max-width:1900px;margin:auto}

.crafteno-experience .demo-scene{min-height:520px}

.crafteno-experience .sample-photo{height:295px}

.crafteno-experience .hero h1{font-size:86px}

.crafteno-experience .sample-photo-copy{top:75px}

.crafteno-experience .hero-intro{font-size:29px}

.crafteno-experience .hero-actions{margin-top:55px}
}

@media(max-width:1200px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .palette-note{display:none}

.crafteno-experience .palette-bar{gap:15px}

.crafteno-experience .palette-options{gap:6px}

.crafteno-experience .palette-options button{padding-left:7px;padding-right:7px}

.crafteno-experience .hero-actions{gap:10px;margin-top:32px}

.crafteno-experience .hero-actions .button{padding:12px;font-size:13px;min-height:54px}

.crafteno-experience .hero-actions svg{display:none}

.crafteno-experience .booking-panel{padding:12px}

.crafteno-experience .demo-caption{margin:-12px -12px 14px;padding:11px 12px}

.crafteno-experience .booking-panel fieldset{margin-bottom:12px}

.crafteno-experience .booking-panel legend{font-size:12px;margin-bottom:7px}

.crafteno-experience .service-option{min-height:36px;padding:6px;font-size:12px}

.crafteno-experience .time-options{gap:5px}

.crafteno-experience .time-options span{min-height:38px;font-size:12px}

.crafteno-experience .demo-submit{min-height:44px;font-size:14px}

.crafteno-experience .sample-nav{padding-left:20px;padding-right:18px}

.crafteno-experience .sample-nav nav{gap:12px}

.crafteno-experience .sample-photo-copy{left:20px}

.crafteno-experience .sample-book{margin-top:12px;min-height:36px;padding:8px 12px}

.crafteno-experience .sample-services{padding:10px 20px 12px}

.crafteno-experience .sample-services h3{margin-bottom:9px}

.crafteno-experience .service-thumbs{gap:10px;width:85%}

.crafteno-experience .service-thumbs a{gap:8px}

.crafteno-experience .offers{margin-top:40px}

.crafteno-experience .offers article{gap:16px;padding:18px}

.crafteno-experience .promo-journey{grid-template-columns:1fr 1fr;gap:30px}

.crafteno-experience .promo-journey .profession-cards{grid-column:1/-1}

.crafteno-experience .promo-journey .profession-cards img{height:160px}

.crafteno-experience .promo-journey .profession-cards h3{font-size:22px}

.crafteno-experience .promo-example .sample-photo{height:260px}

.crafteno-experience .promo-booking .booking-panel legend{font-size:16px}

.crafteno-experience .promo-booking .service-option{font-size:16px}

.crafteno-experience .promo-booking .time-options span{font-size:16px;min-height:44px}

.crafteno-experience .existing{grid-template-columns:1fr 1fr}

.crafteno-experience .existing>div{grid-column:2}

.crafteno-experience .existing h2{grid-row:1/3}

.crafteno-experience .how h3{font-size:19px}
}

@media(max-width:1000px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .hero{display:block}

.crafteno-experience .hero-copy{padding:14px 2% 0}

.crafteno-experience .hero h1{font-size:clamp(44px,7.2vw,68px);line-height:1.03}

.crafteno-experience .hero-intro{font-size:22px;margin-top:22px!important}

.crafteno-experience .hero-actions{margin-top:25px;margin-bottom:35px}

.crafteno-experience .hero-actions .button{font-size:16px;min-height:52px;padding:14px 20px}

.crafteno-experience .demo-scene{width:94%;margin:0 auto;min-height:49vw;max-height:none}

.crafteno-experience .sample-nav{height:6vw}

.crafteno-experience .sample-nav>strong{font-size:clamp(17px,2.2vw,22px)}

.crafteno-experience .sample-nav nav{font-size:12px}

.crafteno-experience .sample-photo{height:27vw;max-height:none}

.crafteno-experience .sample-photo-copy{top:6vw}

.crafteno-experience .sample-photo-copy h2{font-size:clamp(25px,4vw,40px)}

.crafteno-experience .sample-photo-copy p{font-size:16px}

.crafteno-experience .sample-book{font-size:13px;min-height:42px}

.crafteno-experience .sample-services h3{font-size:20px}

.crafteno-experience .service-thumbs img{height:7.5vw}

.crafteno-experience .booking-panel{top:5vw;width:37%;padding:16px}

.crafteno-experience .demo-caption{margin:-16px -16px 18px;padding:12px 16px}

.crafteno-experience .demo-caption strong{font-size:21px}

.crafteno-experience .demo-caption span{font-size:13px}

.crafteno-experience .service-option{font-size:14px;min-height:44px}

.crafteno-experience .booking-panel legend{font-size:14px}

.crafteno-experience .time-options span{min-height:44px}

.crafteno-experience .booking-panel fieldset{margin-bottom:18px}

.crafteno-experience .offers{margin-top:32px}

.crafteno-experience .masthead{flex-wrap:wrap;gap:15px}

.crafteno-experience .masthead nav{gap:20px}

.crafteno-experience .contact-nav{margin-left:0}

.crafteno-experience .brand{font-size:33px}

.crafteno-experience .brand img{width:37px}

.crafteno-experience .palette-bar{align-items:flex-start;flex-direction:column;padding:12px 18px}

.crafteno-experience .palette-options{width:100%;overflow-x:auto;justify-content:flex-start;padding:2px 0 5px}

.crafteno-experience .palette-options button{flex:none;min-width:105px;font-size:13px}

.crafteno-experience .palette-bar>strong{font-size:15px}

.crafteno-experience .palette-note{display:none}

.crafteno-experience .section{padding:55px 5%}

.crafteno-experience .faq{display:block}

.crafteno-experience .how ol{gap:28px}

.crafteno-experience .how h3{font-size:18px}

.crafteno-experience .how p{font-size:15px}

.crafteno-experience .offers h2{font-size:21px}

.crafteno-experience .promo-copy h1{font-size:42px}

.crafteno-experience .promo-copy p{font-size:20px}

.crafteno-experience .promo-copy{padding:32px 5% 32px 8%}

.crafteno-experience.presentation .promo-hero{grid-template-columns:65% 35%}

.crafteno-experience .promo-photo{max-width:43%}
}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .masthead{padding:16px 5% 12px}

.crafteno-experience .brand{font-size:29px;gap:9px}

.crafteno-experience .brand img{width:34px}

.crafteno-experience .contact-nav{margin-left:auto;min-height:44px;padding:10px 13px;font-size:13px}

.crafteno-experience .contact-nav svg{width:18px;height:18px}

.crafteno-experience .masthead nav{order:3;width:100%;justify-content:space-between;font-size:13px;gap:15px}

.crafteno-experience .masthead nav a{padding:7px 0}

.crafteno-experience .palette-bar{margin:0 4%;border-radius:12px;gap:5px;padding:10px 12px}

.crafteno-experience .palette-options{gap:6px}

.crafteno-experience .palette-options button{min-width:105px}

.crafteno-experience .swatches i{width:16px}

.crafteno-experience .hero{margin:25px 4% 0}

.crafteno-experience .hero-copy{padding:0}

.crafteno-experience .hero h1{font-size:clamp(35px,9.3vw,56px);line-height:1.05;letter-spacing:-.035em}

.crafteno-experience .hero-intro{font-size:18px;line-height:1.45;margin-top:20px!important}

.crafteno-experience .hero-actions{flex-direction:column;align-items:stretch;margin:24px 0 30px;gap:10px}

.crafteno-experience .hero-actions .button{font-size:15px;white-space:normal;min-height:50px}

.crafteno-experience .demo-scene{width:100%;min-height:0;display:flex;flex-direction:column;gap:18px}

.crafteno-experience .sample-site{width:100%}

.crafteno-experience .sample-nav{height:48px;padding:0 17px}

.crafteno-experience .sample-nav>strong{font-size:18px}

.crafteno-experience .sample-nav nav{display:none}

.crafteno-experience .sample-photo{height:210px}

.crafteno-experience .sample-photo-copy{top:32px;left:20px}

.crafteno-experience .sample-photo-copy h2{font-size:29px}

.crafteno-experience .sample-photo-copy p{font-size:14px}

.crafteno-experience .sample-book{font-size:12px;margin-top:20px}

.crafteno-experience .sample-services{padding:16px}

.crafteno-experience .sample-services h3{font-size:18px}

.crafteno-experience .service-thumbs{width:100%;gap:12px}

.crafteno-experience .service-thumbs img{height:68px}

.crafteno-experience .service-thumbs a{font-size:13px;gap:10px}

.crafteno-experience .booking-panel{position:static;width:100%;padding:18px;box-shadow:none;border:1px solid var(--line)}

.crafteno-experience .demo-caption{margin:-18px -18px 20px;padding:14px 18px}

.crafteno-experience .demo-caption span{font-size:13px}

.crafteno-experience .demo-caption strong{font-size:22px}

.crafteno-experience .booking-panel legend{font-size:15px;white-space:normal}

.crafteno-experience .service-option{font-size:16px;min-height:48px;padding:10px}

.crafteno-experience .time-options{gap:12px}

.crafteno-experience .time-options span{font-size:16px;min-height:48px}

.crafteno-experience .demo-submit{min-height:50px;font-size:16px}

.crafteno-experience .demo-notice{font-size:12px}

.crafteno-experience .demo-result{font-size:14px}

.crafteno-experience .offers{grid-template-columns:1fr;gap:14px;margin:26px 4% 30px}

.crafteno-experience .offers article{padding:18px;gap:16px;min-height:145px}

.crafteno-experience .offers img{width:31%;height:90px}

.crafteno-experience .offers h2{font-size:20px;line-height:1.2}

.crafteno-experience .offers p{font-size:13px}

.crafteno-experience .section{padding:45px 5%}

.crafteno-experience .section h2{font-size:31px;margin-bottom:20px}

.crafteno-experience .how ol{display:block;margin:24px 0 0}

.crafteno-experience .how li{margin-top:25px;padding-top:14px}

.crafteno-experience .how li::before{margin-bottom:10px}

.crafteno-experience .how h3{font-size:20px}

.crafteno-experience .how p{font-size:16px}

.crafteno-experience .profession-cards{grid-template-columns:1fr;gap:20px;margin-top:25px}

.crafteno-experience .profession-cards img{height:210px}

.crafteno-experience .profession-cards h3{font-size:24px}

.crafteno-experience .other-trade p{padding:22px}

.crafteno-experience .profession-cards article>.button{min-height:48px}

.crafteno-experience .faq summary{font-size:16px}

.crafteno-experience .faq details p{font-size:15px}

.crafteno-experience .project>p{font-size:16px}

.crafteno-experience .project-actions{display:grid;grid-template-columns:1fr}

.crafteno-experience .footer>div{display:grid;gap:18px}

.crafteno-experience .footer p{font-size:12px}

.crafteno-experience.presentation .promo-hero{display:block;min-height:0}

.crafteno-experience .promo-copy{padding:30px 5%;border-radius:0;background:var(--accent)}

.crafteno-experience .promo-copy h1{font-size:37px}

.crafteno-experience .promo-copy p{font-size:18px;margin:20px 0}

.crafteno-experience .promo-copy .button{width:100%;font-size:16px}

.crafteno-experience .promo-photo{position:static;max-width:none;height:180px;width:100%;object-position:center 38%}

.crafteno-experience .promo-utilities{margin:18px 5% 22px;gap:10px;flex-wrap:wrap}

.crafteno-experience .promo-utilities>span{font-size:11px}

.crafteno-experience .promo-journey{display:block;padding:0 5% 20px}

.crafteno-experience .promo-journey .profession-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.crafteno-experience .promo-journey .profession-cards h3{font-size:18px;gap:7px}

.crafteno-experience .promo-journey .profession-cards img{height:120px}

.crafteno-experience .promo-journey .profession-cards .button{font-size:12px;min-height:46px;margin:10px 8px 0}

.crafteno-experience .promo-journey .other-trade{grid-column:1/-1}

.crafteno-experience .promo-journey .other-trade p{min-height:0;padding:18px;font-size:15px}

.crafteno-experience .promo-example{margin-top:25px}

.crafteno-experience .promo-example .sample-photo{height:220px}

.crafteno-experience .promo-booking{margin-top:22px}

.crafteno-experience .promo-booking .booking-panel{padding:18px}

.crafteno-experience .promo-booking .demo-caption{margin:-18px -18px 20px;padding:14px 18px}

.crafteno-experience .existing{display:block}

.crafteno-experience .existing h2{font-size:30px;margin-bottom:22px}

.crafteno-experience .existing p{font-size:16px}

.crafteno-experience .existing>div{margin-top:20px}

.crafteno-experience .existing strong{font-size:16px;display:inline-block}

.crafteno-experience .existing small{text-align:left;margin:6px 20px 0}
}
/* Réduction des animations : le contenu est toujours visible par défaut. */
@media(prefers-reduced-motion:reduce){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

html:has(.crafteno-experience){scroll-behavior:auto}

.crafteno-experience *{animation:none!important;transition:none!important}
}
/* Réservation sobre : espacement rétabli après comparaison avec la maquette.
   La mention fictive allonge le panneau ; le conteneur réserve sa hauteur. */
@media(min-width:1001px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .booking-panel{padding:20px 20px 14px}

.crafteno-experience.commercial .demo-caption{margin:-20px -20px 22px;padding:16px 20px 12px;line-height:1.3}

.crafteno-experience.commercial .demo-caption span{font-size:clamp(12px,1vw,17px)}

.crafteno-experience.commercial .demo-caption strong{font-size:clamp(18px,1.4vw,24px)}

.crafteno-experience.commercial .booking-panel fieldset{margin-bottom:24px}

.crafteno-experience.commercial .booking-panel legend{line-height:1.3;font-size:clamp(12px,1.03vw,18px);margin-bottom:10px}

.crafteno-experience.commercial .service-option{min-height:44px;margin-top:8px;padding:8px 9px}

.crafteno-experience.commercial .time-options span{min-height:46px}

.crafteno-experience.commercial .demo-submit{min-height:52px}

.crafteno-experience.commercial .demo-scene{min-height:max(30vw,515px);max-height:none}

.crafteno-experience.commercial .demo-scene:has(.demo-result:not([hidden])){min-height:max(30vw,690px)}

}
/* Un changement de palette anime seulement ses surfaces, sans cacher le contenu. */
.crafteno-experience.motion-ready,.crafteno-experience.motion-ready .button,.crafteno-experience.motion-ready .palette-bar,.crafteno-experience.motion-ready .offers article{transition:background-color .22s cubic-bezier(.16,1,.3,1),color .22s cubic-bezier(.16,1,.3,1)}
/* Corrections de revue : vrais liens utilisables au toucher, y compris dans
   l’exemple et le pied. Une cible conserve 44 px, même si son texte est petit. */
.crafteno-experience .masthead nav a,.crafteno-experience .sample-nav a,.crafteno-experience .footer a{min-height:44px;display:inline-flex;align-items:center}

.crafteno-experience .masthead nav a{padding:10px 0}

.crafteno-experience .sample-nav .sample-active{position:relative}

.crafteno-experience .sample-active::after{content:"";position:absolute;bottom:4px;left:0;right:0;height:2px;background:var(--accent)}

.crafteno-experience .demo-notice,.crafteno-experience .promo-booking .demo-notice{font-size:12px}
/* Signature Sevy : courbe géométrique continue, fond photo réel et bord oblique.
   Les SVG sont des aplats de fond ; les ordinateurs restent des images raster. */
.crafteno-experience.presentation .promo-hero{display:block;min-height:350px;background:white}

.crafteno-experience.presentation .promo-photo{max-width:none;width:65%;height:100%;position:absolute;right:0;top:0;object-fit:cover}

.crafteno-experience .promo-sweep{position:absolute;inset:0;width:100%;height:100%;fill:var(--accent)}

.crafteno-experience .promo-edge{position:absolute;bottom:-1px;left:0;width:100%;height:42px;fill:white}

.crafteno-experience.presentation .promo-copy{width:62%;padding:26px 4% 38px;background:none;border-radius:0}

.crafteno-experience .promo-copy h1{font-size:clamp(34px,3.6vw,60px);position:relative;padding-bottom:10px}

.crafteno-experience .promo-copy h1::after{content:"";position:absolute;width:135px;height:7px;bottom:-2px;left:22%;background:var(--ink);border-radius:60% 50%;transform:rotate(-4deg)}

.crafteno-experience .promo-copy .button{min-width:350px;min-height:54px;border-radius:40px;font-size:clamp(17px,1.5vw,25px)}

.crafteno-experience .promo-copy p{margin:26px 0 20px;max-width:36ch}

.crafteno-experience .promo-utilities{margin-top:-4px;z-index:1}

.crafteno-experience .promo-utilities .button{border-radius:30px}
/* Les enseignes et leur store dessinent une rue : ce motif géométrique
   reprend le montage validé, sans remplacer les photographies des métiers. */
.crafteno-experience .promo-journey{grid-template-columns:46% 3% 28% 3% 20%;gap:0;align-items:center;margin-top:22px}

.crafteno-experience .promo-journey .profession-cards{gap:18px}

.crafteno-experience .promo-journey .profession-cards h3{font-style:italic;position:relative;margin-bottom:12px}

.crafteno-experience .promo-journey .profession-cards h3::after{content:"";position:absolute;bottom:-11px;left:0;right:0;height:12px;background:radial-gradient(circle at 10px 0,var(--accent) 10px,transparent 10.5px) 0 0/20px 12px repeat-x}

.crafteno-experience .promo-journey .profession-cards article:nth-child(2) h3::after{background:radial-gradient(circle at 10px 0,var(--primary) 10px,transparent 10.5px) 0 0/20px 12px repeat-x}

.crafteno-experience .journey-arrow{display:flex;align-items:center;justify-content:center;color:var(--primary)}

.crafteno-experience .journey-arrow svg{width:32px;height:32px}

.crafteno-experience .promo-example{text-align:center;position:relative}

.crafteno-experience .promo-example .journey-computer{width:100%;height:auto;max-height:300px;object-fit:contain}

.crafteno-experience .computer-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:8px;font-weight:700;font-size:14px;color:var(--primary)!important}

.crafteno-experience .existing{grid-template-columns:36% 30% 26%;gap:4%}

.crafteno-experience .existing h2{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:5px;text-underline-offset:9px}

.crafteno-experience .dedicated-address{position:relative;min-height:145px;display:flex;align-items:center}

.crafteno-experience .dedicated-address .address-computer{width:65%;height:auto}

.crafteno-experience .dedicated-address>div{position:relative;width:75%;margin-left:-40%;margin-top:48px}

.crafteno-experience .dedicated-address strong{font-size:15px;padding:10px 16px;white-space:nowrap}
/* Tablette : les panneaux participent à la hauteur du flux pour ne jamais
   recouvrir les offres. Les flèches passent entre métiers et essai. */
@media(min-width:651px) and (max-width:1000px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .demo-scene{display:grid;grid-template-columns:63% 37%;align-items:start;min-height:0}

.crafteno-experience.commercial .sample-site{width:115%}

.crafteno-experience.commercial .booking-panel{position:relative;top:32px;right:auto;width:100%;margin-bottom:32px}

.crafteno-experience.commercial .sample-nav nav{display:none}

.crafteno-experience.commercial .service-thumbs{width:85%}

}

@media(max-width:1200px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .promo-journey{grid-template-columns:47% 6% 47%;gap:0;row-gap:22px}

.crafteno-experience .promo-journey .profession-cards{grid-column:1/-1}

.crafteno-experience .promo-journey>.journey-arrow:first-of-type{display:none}

.crafteno-experience .promo-example{grid-column:1}

.crafteno-experience .promo-booking{grid-column:3}

.crafteno-experience .existing{grid-template-columns:1fr 1fr}

.crafteno-experience .existing>.dedicated-address{grid-column:2}

}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .masthead nav a{padding:10px 0}

.crafteno-experience.presentation .promo-hero{min-height:0;padding-top:0}

.crafteno-experience.presentation .promo-copy{width:100%;padding:28px 5% 38px;background:var(--accent)}

.crafteno-experience.presentation .promo-copy h1{font-size:36px;line-height:1.2}

.crafteno-experience.presentation .promo-copy .button{min-width:0;width:100%;font-size:16px}

.crafteno-experience.presentation .promo-photo{position:static;width:100%;height:190px;max-width:none}

.crafteno-experience.presentation .promo-sweep{display:none}

.crafteno-experience.presentation .promo-edge{height:24px}

.crafteno-experience .promo-journey{display:block}

.crafteno-experience .promo-journey>.journey-arrow{display:none}

.crafteno-experience .promo-journey .profession-cards{gap:14px}

.crafteno-experience .promo-example{margin:30px 0 0}

.crafteno-experience .promo-example .journey-computer{max-height:260px}

.crafteno-experience .promo-booking .booking-panel{padding:18px}

.crafteno-experience .promo-booking .booking-panel legend{font-size:15px;white-space:normal}

.crafteno-experience .promo-booking .service-option{font-size:16px;min-height:48px}

.crafteno-experience .promo-booking .time-options span{font-size:16px;min-height:48px}

.crafteno-experience .existing{display:block}

.crafteno-experience .existing h2{text-decoration-thickness:4px}

.crafteno-experience .dedicated-address{margin-top:24px;min-height:160px}

.crafteno-experience .dedicated-address .address-computer{max-width:230px}

.crafteno-experience .dedicated-address strong{font-size:14px;white-space:normal}

.crafteno-experience .dedicated-address>div{width:75%}

}
/* Réserve indépendante tablette : le texte doit rester entièrement sur le fond
   de lecture. La photo participe au flux sous le texte jusqu’au petit bureau. */
@media(min-width:651px) and (max-width:1000px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.presentation .promo-hero{display:grid;grid-template-columns:60% 40%;min-height:390px;background:var(--accent)}

.crafteno-experience.presentation .promo-copy{width:100%;padding:28px 6%;grid-column:1;grid-row:1;background:var(--accent)}

.crafteno-experience.presentation .promo-copy h1{font-size:clamp(34px,4.2vw,42px)}

.crafteno-experience.presentation .promo-copy p{font-size:18px}

.crafteno-experience.presentation .promo-copy .button{min-width:0;width:100%;font-size:17px}

.crafteno-experience.presentation .promo-photo{position:static;width:100%;height:100%;grid-column:2;grid-row:1}

.crafteno-experience.presentation .promo-sweep{display:none}

.crafteno-experience.presentation .promo-edge{height:30px}

}
/* Catalogue demandé par Yves : cinq choix, chaque choix propose les deux métiers.
   Les aperçus sont de vraies captures ; la disposition garde des liens de 44 px. */
.crafteno-experience .catalog{background:var(--pale)}

.crafteno-experience .catalog-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:35px}

.crafteno-experience .catalog-entry h3{font-size:24px;margin-bottom:10px}

.crafteno-experience .catalog-entry>p{font-size:14px;color:var(--muted);min-height:90px}

.crafteno-experience .catalog-versions{display:grid;gap:18px}

.crafteno-experience .catalog-versions a{text-decoration:none;display:block;background:white;border-radius:12px;overflow:hidden}

.crafteno-experience .catalog-versions img{width:100%;height:auto;aspect-ratio:1280/900;object-fit:cover}

.crafteno-experience .catalog-versions span{min-height:48px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;gap:8px}

.crafteno-experience .model-reference{margin-top:55px;padding-top:32px;border-top:1px solid var(--line)}

.crafteno-experience .model-reference h2{font-size:32px}

.crafteno-experience .model-reference p{max-width:70ch;color:var(--muted);margin-bottom:20px}

@media(max-width:1200px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.crafteno-experience .catalog-entry>p{min-height:70px}
}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .catalog-grid{grid-template-columns:1fr;gap:32px}

.crafteno-experience .catalog-entry>p{min-height:0;margin-bottom:16px}

.crafteno-experience .catalog-versions{grid-template-columns:1fr;gap:16px}

.crafteno-experience .catalog-versions span{font-size:12px}

.crafteno-experience .catalog-versions svg{width:16px}

.crafteno-experience .model-reference h2{font-size:28px}
}
/* Page explicative : même identité et mêmes variables de palette. Les sections
   alternent texte, capture réelle et tableau illustratif pour expliquer les accès.
   Les tableaux gardent leur sémantique ; le défilement reste dans leur conteneur. */
.crafteno-experience.fonctionnement .explain-hero{padding:70px 5%;display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center}

.crafteno-experience.fonctionnement h1{font-size:clamp(40px,4.6vw,72px);line-height:1.08;max-width:15ch}

.crafteno-experience.fonctionnement .explain-lead{font-size:20px;max-width:60ch;margin-top:28px}

.crafteno-experience.fonctionnement .explain-map{background:var(--primary);color:#fff;padding:34px;border-radius:15px}

.crafteno-experience.fonctionnement .explain-map h2{font-size:25px;max-width:25ch;line-height:1.25}

.crafteno-experience.fonctionnement .explain-map ol{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:20px}

.crafteno-experience.fonctionnement .explain-map li{display:flex;gap:16px;align-items:start}

.crafteno-experience.fonctionnement .map-index{font-weight:700;font-size:22px;color:var(--ink);background:var(--accent);width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:12px}

.crafteno-experience.fonctionnement .explain-section{padding:64px 5%}

.crafteno-experience.fonctionnement .explain-section h2{font-size:clamp(30px,3vw,46px);line-height:1.15;margin-bottom:24px;max-width:25ch}

.crafteno-experience.fonctionnement h3{font-size:23px;line-height:1.25;margin-bottom:16px}

.crafteno-experience.fonctionnement .explain-section p{max-width:68ch}

.crafteno-experience.fonctionnement .aside-copy{font-size:15px;margin-top:20px;color:var(--muted)}

.crafteno-experience.fonctionnement figure{margin:0;min-width:0}

.crafteno-experience.fonctionnement figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}

.crafteno-experience.fonctionnement .explain-client{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;background:var(--pale)}

.crafteno-experience.fonctionnement .explain-client .button{margin-top:25px}

.crafteno-experience.fonctionnement .explain-client img{width:100%;max-height:510px;object-fit:cover;object-position:top;border-radius:15px}

.crafteno-experience.fonctionnement .section-heading{max-width:850px;margin-bottom:38px}

.crafteno-experience.fonctionnement .app-overview{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:start}

.crafteno-experience.fonctionnement dl{margin:0}

.crafteno-experience.fonctionnement dl>div{border-top:1px solid var(--line);padding:18px 0}

.crafteno-experience.fonctionnement dt{font-weight:700;margin-bottom:5px}

.crafteno-experience.fonctionnement dd{margin:0;max-width:65ch}

.crafteno-experience.fonctionnement .app-capture img{width:100%;height:auto;border-radius:15px;box-shadow:0 14px 30px #0b153b12}

.crafteno-experience.fonctionnement .boundary-copy{background:var(--pale);padding:25px;margin-top:35px;border-radius:15px;display:grid;grid-template-columns:1fr 1fr;gap:30px}

.crafteno-experience.fonctionnement .explain-management{display:grid;grid-template-columns:1fr 1fr;gap:6%;background:var(--pale);align-items:start}

.crafteno-experience.fonctionnement .explain-management ul{padding-left:22px;margin:24px 0;display:grid;gap:10px}

.crafteno-experience.fonctionnement .table-scroll{overflow-x:auto;max-width:100%;border-radius:12px;background:white}

.crafteno-experience.fonctionnement table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}

.crafteno-experience.fonctionnement th,.crafteno-experience.fonctionnement td{padding:16px;border-bottom:1px solid var(--line);font-size:14px}

.crafteno-experience.fonctionnement thead th{background:var(--ink);color:#fff;font-weight:700}

.crafteno-experience.fonctionnement .illustrative-planning{min-width:460px}

.crafteno-experience.fonctionnement .illustrative-planning td{background:var(--pale);border:4px solid white;vertical-align:top}

.crafteno-experience.fonctionnement .screen-toolbar{padding:18px 0;display:flex;gap:10px;align-items:center}

.crafteno-experience.fonctionnement .management-preview h3{margin-top:32px}

.crafteno-experience.fonctionnement .management-preview>p{margin-top:12px}

.crafteno-experience.fonctionnement .explain-team{display:grid;grid-template-columns:1fr 1fr;gap:6%;background:var(--accent)}

.crafteno-experience.fonctionnement .explain-team .aside-copy{color:var(--ink)}

.crafteno-experience.fonctionnement .price-pair{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:25px}

.crafteno-experience.fonctionnement .price-pair article{background:var(--pale);padding:30px;border-radius:15px}

.crafteno-experience.fonctionnement .price-pair article+article{background:var(--primary);color:#fff}

.crafteno-experience.fonctionnement .price-amount{font-size:clamp(28px,3vw,44px);font-weight:700;margin-top:25px;line-height:1.3}

.crafteno-experience.fonctionnement .price-amount small{font-size:16px;font-weight:400;display:block;margin-top:5px}

.crafteno-experience.fonctionnement .price-pending{margin-top:20px;font-size:14px}

.crafteno-experience.fonctionnement .setup-copy{margin-bottom:30px}

.crafteno-experience.fonctionnement .setup-copy p+p{margin-top:6px}

.crafteno-experience.fonctionnement .comparison{border:1px solid var(--line)}

.crafteno-experience.fonctionnement .comparison th:first-child{width:58%;min-width:210px}

.crafteno-experience.fonctionnement .comparison td{min-width:135px;white-space:nowrap}

.crafteno-experience.fonctionnement .comparison td svg{width:18px;margin-right:8px;color:var(--primary)}

.crafteno-experience.fonctionnement .extras{display:grid;grid-template-columns:1fr 1fr;gap:6%;margin-top:50px;border-top:1px solid var(--line);padding-top:35px}

.crafteno-experience.fonctionnement .extras ul{padding-left:22px;line-height:1.9}

.crafteno-experience .how-detail{margin-top:20px!important}
/* Sur téléphone les contenus suivent la lecture ; aucun élément ne déborde de la page. */
@media(max-width:850px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.fonctionnement .explain-hero,.crafteno-experience.fonctionnement .explain-client,.crafteno-experience.fonctionnement .app-overview,.crafteno-experience.fonctionnement .explain-management,.crafteno-experience.fonctionnement .explain-team{grid-template-columns:1fr;gap:32px}

.crafteno-experience.fonctionnement .explain-hero{padding:40px 5%}

.crafteno-experience.fonctionnement .explain-section{padding:45px 5%}

.crafteno-experience.fonctionnement .explain-map{padding:25px}

.crafteno-experience.fonctionnement .explain-lead{font-size:18px}

.crafteno-experience.fonctionnement .app-capture{max-width:650px}

.crafteno-experience.fonctionnement .boundary-copy,.crafteno-experience.fonctionnement .extras{grid-template-columns:1fr;gap:25px}

.crafteno-experience.fonctionnement .explain-client img{max-height:400px}

.crafteno-experience.fonctionnement .comparison th,.crafteno-experience.fonctionnement .comparison td{padding:13px 12px}

.crafteno-experience.fonctionnement .price-pair{grid-template-columns:1fr;gap:18px}

.crafteno-experience.fonctionnement .price-pair article{padding:24px}

.crafteno-experience.fonctionnement .explain-team h2{margin-bottom:0}

.crafteno-experience.fonctionnement .masthead nav{white-space:normal;font-size:12px;gap:14px}

.crafteno-experience.fonctionnement .masthead nav a{white-space:normal}
}
/* Les enfants d’une grille peuvent rétrécir jusqu’à la largeur de l’écran.
   Le tableau conserve son propre défilement, sans élargir le document. */
.crafteno-experience.fonctionnement .explain-section>*,.crafteno-experience.fonctionnement .app-overview>*,.crafteno-experience.fonctionnement .extras>*{min-width:0}

.crafteno-experience.fonctionnement .team-week{margin-top:28px}

.crafteno-experience.fonctionnement .team-week table{min-width:480px}

.crafteno-experience.fonctionnement .team-week td{vertical-align:top}
/* Une copie avec un nom de commerce plus long garde toute sa marque lisible. */
.crafteno-experience.fonctionnement .brand{max-width:100%;min-width:0;white-space:normal}

.crafteno-experience.fonctionnement .brand [data-brand]{min-width:0;overflow-wrap:anywhere}

.crafteno-experience.fonctionnement .brand img{flex-shrink:0}
/* La disponibilité de l’application est un argument principal, sous le titre,
 * avec les couleurs de la palette déjà choisie et une taille lisible sur mobile. */
.crafteno-experience.fonctionnement .app-platforms{color:var(--primary);font-weight:700;font-size:clamp(21px,2.2vw,28px);line-height:1.3;margin:0 0 20px}
/* Les deux groupes de prérequis reprennent la grille existante ; sous 850 px,
 * boundary-copy les empile dans l’ordre de lecture, sans nouveau défilement. */
.crafteno-experience.fonctionnement .explain-requirements .boundary-copy{margin-top:0}
/* Chaque prérequis garde sa propre ligne ; les explications facultatives restent
 * séparées pour être lisibles sur un petit écran comme sur un ordinateur. */
.crafteno-experience.fonctionnement .requirements-list{display:grid;gap:14px;padding-left:22px;margin:0;line-height:1.55}

.crafteno-experience.fonctionnement .explain-requirements .boundary-copy p+p{margin-top:18px}
/* Parcours commercial : une lecture avant les choix graphiques, tarifs issus du
 * comparatif unique. Les grilles se replient sans masquer les informations. */
.crafteno-experience.commercial .hero{margin-top:36px;grid-template-columns:43% 53%;gap:4%}

.crafteno-experience.commercial .hero h1{font-size:clamp(42px,4.1vw,70px)}

.crafteno-experience.commercial .hero-intro{font-size:clamp(17px,1.6vw,23px);max-width:47ch;margin-top:24px}

.crafteno-experience.commercial .hero-actions{margin-top:24px;gap:20px;flex-wrap:wrap}

.crafteno-experience.commercial .hero-secondary{font-size:16px;min-height:44px;display:inline-flex;align-items:center}

.crafteno-experience.commercial .hero-price{font-size:15px;line-height:1.6;margin-top:26px;max-width:48ch}

.crafteno-experience.commercial .hero-price a{display:inline-block;min-height:44px;padding-top:10px}

.crafteno-experience.commercial .hero-price p+p{margin-top:5px}

.crafteno-experience.commercial .example-context{font-size:13px;margin-top:14px;color:var(--muted)}

.crafteno-experience.commercial .customer-example{display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center;margin-top:40px;background:var(--pale)}

.crafteno-experience.commercial .customer-example p{max-width:55ch;font-size:18px}

.crafteno-experience.commercial .customer-example .booking-panel{position:static;width:100%;max-width:520px;margin:0;box-shadow:none;border:1px solid var(--line)}

.crafteno-experience.commercial .customer-example .demo-submit{background:white;color:var(--primary);border-color:var(--primary)}

.crafteno-experience.commercial .home-tools-copy{display:grid;grid-template-columns:1fr 1fr;gap:6%;margin:28px 0}

.crafteno-experience.commercial .home-tools p,.crafteno-experience.commercial .home-support p,.crafteno-experience.commercial .home-pricing>p{max-width:70ch;line-height:1.65}

.crafteno-experience.commercial .home-tools .text-link,.crafteno-experience.commercial .home-pricing .text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;font-weight:700}

.crafteno-experience.commercial .home-support{background:var(--pale)}

.crafteno-experience.commercial .home-support .aside-copy{margin-top:16px;font-size:14px;color:var(--muted)}

.crafteno-experience.commercial .home-price-pair{display:grid;grid-template-columns:1fr 1fr;gap:5%;margin:30px 0}

.crafteno-experience.commercial .home-price-pair article{padding:25px 0;border-top:1px solid var(--line)}

.crafteno-experience.commercial .home-price-pair h3{font-size:25px}

.crafteno-experience.commercial .home-amount{font-size:38px;font-weight:700;margin-top:12px}

.crafteno-experience.commercial .home-price-pair p:last-child{margin-top:16px;max-width:50ch}

.crafteno-experience.commercial .home-pricing>p+p{margin-top:12px}
/* Divulgation progressive native : tous les détails restent dans le document,
 * ouverts au clavier et imprimables. Aucun JavaScript requis pour les consulter. */
.crafteno-experience.fonctionnement .explain-details{border-top:1px solid var(--line);padding-top:18px}

.crafteno-experience.fonctionnement .explain-details summary{cursor:pointer;font-weight:700;min-height:48px;padding:10px 0;font-size:18px}

.crafteno-experience.fonctionnement .explain-details[open]>summary{margin-bottom:20px}

.crafteno-experience.fonctionnement .explain-team{padding:25px;margin-top:16px}

.crafteno-experience.fonctionnement .extra-details{margin-top:35px}

.crafteno-experience.fonctionnement .extra-details .extras{margin-top:0;border:0;padding-top:0}

.crafteno-experience.fonctionnement .setup-steps{display:grid;gap:25px;padding-left:24px;margin:28px 0 38px}

.crafteno-experience.fonctionnement .setup-steps h3{margin-bottom:8px}

@media(max-width:1000px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .hero{grid-template-columns:1fr;gap:30px}

.crafteno-experience.commercial .hero-copy{padding:0 2%}

.crafteno-experience.commercial .demo-scene{padding:0 2%}

.crafteno-experience.commercial .sample-site{max-width:750px}

.crafteno-experience.commercial .hero h1{font-size:clamp(40px,7vw,64px)}
}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .customer-example,.crafteno-experience.commercial .home-tools-copy,.crafteno-experience.commercial .home-price-pair{grid-template-columns:1fr;gap:24px}

.crafteno-experience.commercial .hero-actions{display:flex;align-items:flex-start;flex-direction:column}

.crafteno-experience.commercial .hero-actions .button{width:100%}

.crafteno-experience.commercial .customer-example{margin-top:28px}

.crafteno-experience.commercial .hero-intro{font-size:18px}

.crafteno-experience.commercial .customer-example p{font-size:16px}

.crafteno-experience.commercial .hero-price{font-size:14px}

.crafteno-experience.commercial .hero h1{font-size:42px}

.crafteno-experience.commercial .hero{margin-top:25px}
}
/* Le tarif journalier est l’accroche commerciale ; la facturation annuelle
 * et la mise en place restent immédiatement lisibles en dessous. */
.crafteno-experience.commercial .hero-price>p:nth-child(2){font-size:clamp(19px,1.65vw,24px);font-weight:700;line-height:1.4;margin:8px 0}
/* Garder chaque montant et sa devise ensemble, même avec le texte agrandi. */
.crafteno-experience.commercial .hero-price [data-function-copy^="daily"]{white-space:nowrap}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .hero h1{font-size:clamp(35px,10vw,42px)}

.crafteno-experience.commercial .masthead nav{gap:12px;flex-wrap:wrap}

.crafteno-experience.commercial .masthead nav a{white-space:normal}
}
/* MOUVEMENT — le site exemple se compose, les actions répondent.
 * Les styles de base restent entièrement visibles. JavaScript joue les entrées
 * ponctuelles ; ici les retours de souris/clavier restent courts et interrompables.
 * Portée commerciale stricte : aucune animation ajoutée aux 24 modèles. */
.crafteno-experience.commercial{--motion-ease:cubic-bezier(.16,1,.3,1)}

.crafteno-experience.commercial .sample-site{transform:perspective(1100px) rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg));transform-origin:center;transition:transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease)}

.crafteno-experience.commercial .sample-photo{overflow:hidden}

.crafteno-experience.commercial .sample-photo img{width:100%;height:100%;object-fit:cover}

.crafteno-experience.commercial .example-context{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.crafteno-experience.commercial .motion-replay{font:inherit;font-size:13px;color:var(--primary);background:none;border:0;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:10px 0;min-height:44px}

.crafteno-experience.commercial .reading-rail{position:fixed;inset:0 0 auto;height:3px;background:var(--primary);transform-origin:left;transform:scaleX(0);z-index:20;pointer-events:none}

.crafteno-experience.commercial .button{transition:background-color .2s var(--motion-ease),color .2s var(--motion-ease),box-shadow .25s var(--motion-ease),transform .25s var(--motion-ease)}

.crafteno-experience.commercial .button.primary:hover,.crafteno-experience.commercial .button.primary:focus-visible{box-shadow:0 8px 20px #0b153b1c}

.crafteno-experience.commercial .button svg{transition:transform .25s var(--motion-ease)}

.crafteno-experience.commercial.spatial-motion .button:hover svg,.crafteno-experience.commercial.spatial-motion .button:focus-visible svg{transform:translateX(4px)}

.crafteno-experience.commercial.spatial-motion .button:active{transform:scale(.98)}

.crafteno-experience.commercial .service-option,.crafteno-experience.commercial .time-options span{transition:background-color .22s var(--motion-ease),border-color .22s var(--motion-ease),color .22s var(--motion-ease)}
/* La ligne relie les étapes dans leur ordre de lecture. Aucun texte n’est caché. */
.crafteno-experience.commercial .how li::after{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left}

.crafteno-experience.commercial .how li.step-seen::after{transform:scaleX(1)}

.crafteno-experience.commercial.spatial-motion .how li::after{transition:transform .75s var(--motion-ease)}
/* Le cadre du catalogue retient l’image ; le mouvement indique le lien pointé
 * et s’applique aussi au focus clavier. Les textes et libellés restent immobiles. */
.crafteno-experience.commercial .catalog-versions a{overflow:hidden}

.crafteno-experience.commercial .catalog-versions img{transition:transform .55s var(--motion-ease),filter .3s var(--motion-ease);transform-origin:center}

.crafteno-experience.commercial.spatial-motion .catalog-versions a:hover img,.crafteno-experience.commercial.spatial-motion .catalog-versions a:focus-visible img{transform:scale(1.035)}

.crafteno-experience.commercial .catalog-versions a:hover img,.crafteno-experience.commercial .catalog-versions a:focus-visible img{filter:brightness(1.035)}
/* Réduction système : ni inclinaison, ni zoom, ni déplacement automatique.
 * Les informations de sélection et de progression restent disponibles. */
@media(prefers-reduced-motion:reduce){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .sample-site{transform:none!important;transition:none!important}

.crafteno-experience.commercial .catalog-versions img,.crafteno-experience.commercial .button,.crafteno-experience.commercial .button svg{transform:none!important;transition:none!important}

}
/* USAGES QUOTIDIENS — trois messages courts, sur une surface claire du système.
 * La mise en page respire sans effet d’affiche. Une seule action conduit aux détails. */
.crafteno-experience.commercial .hero-title-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}

.crafteno-experience.commercial .hero-title-line>span{display:block;transform-origin:left bottom}

.crafteno-experience.commercial .tools-impact{background:var(--pale);color:var(--ink);padding:56px 5% 40px}

.crafteno-experience.commercial .tools-impact>h2{font-size:clamp(28px,3vw,40px);margin-bottom:34px}

.crafteno-experience.commercial .tools-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%}

.crafteno-experience.commercial .tools-beat{min-width:0;padding:0;display:block}

.crafteno-experience.commercial .tools-beat h3{font-size:clamp(25px,2.5vw,34px);letter-spacing:-.025em;line-height:1.15;font-weight:700;margin:0 0 14px;max-width:16ch;text-wrap:balance}

.crafteno-experience.commercial .tools-beat:nth-child(2) h3{color:var(--primary)}

.crafteno-experience.commercial .beat-side{display:block}

.crafteno-experience.commercial .tools-beat p{font-size:16px;line-height:1.55;max-width:30ch;color:var(--muted)}

.crafteno-experience.commercial .tools-impact>.text-link{display:inline-flex;gap:12px;padding:12px 0;margin-top:25px;min-height:48px;color:var(--ink)}

.crafteno-experience.commercial .tools-impact>.text-link svg{transition:transform .25s var(--motion-ease)}

.crafteno-experience.commercial.spatial-motion .tools-impact>.text-link:hover svg{transform:translateX(4px)}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .tools-impact{padding:38px 6% 26px}

.crafteno-experience.commercial .tools-beats{grid-template-columns:1fr;gap:24px}

.crafteno-experience.commercial .tools-impact>h2{font-size:29px;margin-bottom:28px}

.crafteno-experience.commercial .tools-beat h3{font-size:25px;max-width:none;margin-bottom:8px}

.crafteno-experience.commercial .tools-beat p{max-width:34ch}

.crafteno-experience.commercial .tools-impact>.text-link{margin-top:18px}

.crafteno-experience.commercial .hero h1{font-size:clamp(30px,9.8vw,42px)}
}

@media(prefers-reduced-motion:reduce){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.commercial .hero-title-line>span,.crafteno-experience.commercial .tools-beat h3{transform:none!important;clip-path:none!important;opacity:1!important}
}
/* Choix du membre fictif : deux options lisibles, cibles tactiles de44px minimum.
 * La grille s’adapte au panneau ; les noms restent configurés dans demoPeople. */
.crafteno-experience .person-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

.crafteno-experience .person-options .person-option{min-height:44px;margin:0;padding:9px 10px}

.crafteno-experience .person-options .person-option span{overflow-wrap:anywhere}
/* Exemples métiers et réservation fictive : palette douce issue de config.js.
   Ces variables locales évitent le contraste citron/bleu sans recolorer le logo. */
.crafteno-experience[data-example-color-mode="doux"] .profession-cards,.crafteno-experience[data-example-color-mode="doux"] .sample-site,.crafteno-experience[data-example-color-mode="doux"] .booking-panel{
 --primary:var(--example-primary);--accent:var(--example-accent);--pale:var(--example-pale);
 --ink:var(--example-ink);--muted:var(--example-muted);color:var(--ink)
}

.crafteno-experience .profession-cards{grid-template-columns:repeat(4,minmax(0,1fr))}

.crafteno-experience .profession-cards article{min-width:0}

.crafteno-experience .profession-cards h3{font-size:clamp(18px,1.4vw,24px);min-height:82px}

.crafteno-experience[data-example-color-mode="doux"] .profession-cards h3,.crafteno-experience[data-example-color-mode="doux"] .profession-cards article:nth-child(2) h3{background:var(--example-other);color:var(--example-ink)}

.crafteno-experience[data-example-color-mode="doux"] .profession-cards article[data-example-trade="coiffure"] h3{background:var(--example-hair)}

.crafteno-experience[data-example-color-mode="doux"] .profession-cards article[data-example-trade="beaute"] h3{background:var(--example-beauty)}

.crafteno-experience[data-example-color-mode="doux"] .profession-cards article[data-example-trade="onglerie"] h3{background:var(--example-nails)}

.crafteno-experience .profession-cards article>.button{margin-top:auto}

.crafteno-experience .profession-cards article img{margin-bottom:16px}

.crafteno-experience .profession-cards .other-trade p{flex:1}
/* Les deux présentations restent lisibles à quatre, deux puis une colonne. */
@media(max-width:1150px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .profession-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .profession-cards{grid-template-columns:1fr}

.crafteno-experience .profession-cards h3{min-height:68px}

.crafteno-experience .promo-journey .profession-cards .other-trade{grid-column:auto}
}
/* Bouton en haut de la présentation ; fenêtre fixe indépendante du défilement.
   Pas de voile ni de verrouillage de la page : l’effet des couleurs reste visible. */
.crafteno-experience .public-colors-trigger{white-space:nowrap;min-height:44px}

.crafteno-experience .public-colors-trigger[hidden],.crafteno-experience .public-colors-popup[hidden]{display:none!important}

.crafteno-experience .public-colors-popup{position:fixed;z-index:120;width:min(370px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;background:#fff;color:#26312b;padding:18px;border-radius:14px;box-shadow:0 10px 38px #18211c29;font-size:14px}

.crafteno-experience .public-colors-header{display:flex;align-items:center;justify-content:space-between;gap:14px}

.crafteno-experience .public-colors-header h2{font-size:20px;line-height:1.2;margin:0}

.crafteno-experience .public-colors-close{border:1px solid #c8d0ca;background:#fff;color:#26312b;min-height:44px;padding:8px 10px;border-radius:8px;cursor:pointer}

.crafteno-experience .public-colors-popup>p{font-size:13px;line-height:1.5;margin:12px 0}

.crafteno-experience .public-colors-popup .palette-bar{margin:0;padding:0;border:0;background:transparent;display:block;color:#26312b}

.crafteno-experience .public-colors-popup .palette-bar>strong{display:none}

.crafteno-experience .public-colors-popup .palette-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible;padding:0}

.crafteno-experience .public-colors-popup .palette-options button{min-width:0;width:100%;min-height:64px;white-space:normal;font-size:12px;padding:8px 4px;flex-direction:column;gap:5px;color:#26312b;background:#f5f6f4;border:1px solid #d7ddd7;border-radius:9px;position:relative}

.crafteno-experience .public-colors-popup .palette-options button[aria-pressed="true"]{border-color:#26312b;outline:1px solid #26312b}

.crafteno-experience .public-colors-popup .swatches i{width:18px;height:18px}

.crafteno-experience .public-colors-popup .selected-check{position:absolute;top:3px;right:3px}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .masthead{gap:8px}

.crafteno-experience .masthead .brand{font-size:24px;gap:6px}

.crafteno-experience .masthead .brand img{width:28px}

.crafteno-experience .masthead .contact-nav,.crafteno-experience .public-colors-trigger{padding:8px 10px;font-size:12px;min-height:44px}

.crafteno-experience .public-colors-popup{padding:14px}

.crafteno-experience .public-colors-popup .palette-options button{min-height:62px}

}
/* Sur téléphone, le contact garde son nom accessible et devient une icône de 44 px.
   Logo, Vos couleurs et contact tiennent sur la même ligne ; navigation en dessous. */
@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .masthead .contact-nav{min-width:44px;width:44px;padding:10px;margin-left:auto}

.crafteno-experience .masthead .contact-nav .contact-label{display:none}

.crafteno-experience .masthead .public-colors-trigger{order:1}

.crafteno-experience .masthead .contact-nav{order:2}

.crafteno-experience .masthead nav{order:3}

.crafteno-experience.commercial .masthead nav,.crafteno-experience.fonctionnement .masthead nav{display:grid;grid-template-columns:auto auto minmax(0,1fr);width:100%;gap:10px;font-size:12px}

.crafteno-experience .masthead nav a{min-height:44px;display:flex;align-items:center;padding:4px 0}

}
/* Fond blanc très légèrement crème de la présentation Crafteno, issu de config.js.
   Les boutons et titres colorés suivent le bleu officiel de la palette Cobalt. */
.crafteno-experience.commercial,.crafteno-experience.fonctionnement{background:var(--page-background)}
/* Catalogue unifié : huit styles pour le métier choisi, sans rangée redondante de cartes.
   Une forme radio native assure aussi les flèches du clavier et l’annonce de la sélection. */
.crafteno-experience .catalog-anchor{display:block;height:0}

.crafteno-experience .catalog-trade-picker{border:0;padding:0;margin:24px 0 0;max-width:620px}

.crafteno-experience .catalog-trade-picker[hidden]{display:none!important}

.crafteno-experience .catalog-trade-picker legend{font-size:14px;font-weight:700;margin-bottom:10px}

.crafteno-experience .catalog-trade-picker>div{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px}

.crafteno-experience .catalog-trade-picker label{position:relative;display:flex;min-width:0}

.crafteno-experience .catalog-trade-picker input{position:absolute;opacity:0;width:1px;height:1px}

.crafteno-experience .catalog-trade-picker span{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--page-background);font-size:14px;font-weight:700;text-align:center;cursor:pointer}

.crafteno-experience .catalog-trade-picker input:checked+span{background:var(--primary);border-color:var(--primary);color:#fff}

.crafteno-experience .catalog-trade-picker input:focus-visible+span{outline:3px solid var(--primary);outline-offset:3px}

.crafteno-experience .catalog-status{font-size:13px;margin-top:14px!important;color:var(--muted)}

.crafteno-experience .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:22px}

.crafteno-experience .catalog-entry{display:flex;flex-direction:column;min-width:0}

.crafteno-experience .catalog-entry>p{min-height:0;margin-bottom:14px}

.crafteno-experience .catalog-versions{margin-top:auto;display:block}

.crafteno-experience .catalog-versions a[hidden]{display:none!important}

.crafteno-experience .catalog-other{margin-top:28px!important;font-size:15px}

@media(max-width:1000px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}

.crafteno-experience .catalog-entry h3{font-size:19px;margin-bottom:8px}

.crafteno-experience .catalog-entry>p{font-size:12px;line-height:1.45;margin-bottom:12px}

.crafteno-experience .catalog-versions img{aspect-ratio:1280/900;object-fit:cover}

.crafteno-experience .catalog-versions span{padding:8px;min-height:44px;gap:4px;font-size:11px}

.crafteno-experience .catalog-trade-picker span{font-size:12px;padding:8px 5px;min-height:52px}

.crafteno-experience .catalog-other{font-size:14px}

}
/* La quatrième commande propose un contact ; elle ne prétend pas filtrer un métier
   sans démonstration. Le lien conserve un vrai nom, une ancre et une cible tactile. */
.crafteno-experience .catalog-trade-picker>div{grid-template-columns:repeat(4,minmax(0,1fr))}

.crafteno-experience .catalog-other-profession{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;border:1px solid var(--primary);border-radius:10px;color:var(--primary)!important;background:var(--page-background);font-size:13px;font-weight:700;text-align:center;text-decoration:none}

.crafteno-experience .catalog-other-profession:hover{background:var(--pale)}

.crafteno-experience .catalog-other-note{font-size:13px;color:var(--muted);margin-top:12px!important;max-width:65ch}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience .catalog-trade-picker>div{grid-template-columns:repeat(2,minmax(0,1fr))}

.crafteno-experience .catalog-other-profession{min-height:52px;padding:8px;font-size:12px}
}
/* Accompagnement : même palette publique, formulaire en deux colonnes sur bureau
   et une colonne sur téléphone. Les libellés restent visibles pendant la saisie. */
.crafteno-experience .other-project{background:var(--pale);scroll-margin-top:100px}

.crafteno-experience .other-project p{max-width:65ch;margin:20px 0 26px}

.crafteno-experience.accompagnement .enquiry-main{width:min(940px,100%);margin:0 auto;padding:64px 32px 80px}

.crafteno-experience.accompagnement .enquiry-intro{max-width:70ch;margin-bottom:36px}

.crafteno-experience.accompagnement h1{font-size:clamp(32px,4vw,52px);line-height:1.12;letter-spacing:-.03em;margin:0 0 24px}

.crafteno-experience.accompagnement .enquiry-intro>p{margin:0 0 16px;line-height:1.6}

.crafteno-experience .enquiry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

.crafteno-experience .enquiry-field{display:flex;flex-direction:column;gap:8px;min-width:0}

.crafteno-experience .enquiry-wide{grid-column:1/-1}

.crafteno-experience .enquiry-field label,.crafteno-experience .enquiry-summary>label{font-size:15px;font-weight:700;line-height:1.5}

.crafteno-experience .enquiry-optional{font-size:13px;font-weight:400;color:var(--muted)}

.crafteno-experience .enquiry-field input,.crafteno-experience .enquiry-field select,.crafteno-experience .enquiry-field textarea,.crafteno-experience .enquiry-summary textarea{font:inherit;font-size:16px;line-height:1.5;width:100%;min-width:0;min-height:48px;padding:12px;border:1px solid var(--muted);border-radius:8px;background:var(--page-background);color:var(--ink);caret-color:var(--primary);box-sizing:border-box}

.crafteno-experience .enquiry-field textarea,.crafteno-experience .enquiry-summary textarea{resize:vertical}

.crafteno-experience .enquiry-field :is(input,.crafteno-experience select,.crafteno-experience textarea):focus-visible,.crafteno-experience .enquiry-summary textarea:focus-visible{outline:3px solid var(--primary);outline-offset:3px}

.crafteno-experience .enquiry-notice{font-size:14px;max-width:70ch;line-height:1.6;margin:28px 0 20px}

.crafteno-experience .enquiry-summary{border-top:1px solid var(--muted);margin-top:32px;padding-top:28px}

.crafteno-experience .enquiry-summary h2{font-size:26px;line-height:1.25;margin:0 0 16px}

.crafteno-experience .enquiry-summary p{font-size:15px;line-height:1.6;overflow-wrap:anywhere}

.crafteno-experience .enquiry-summary textarea{display:block;margin:10px 0 22px}

.crafteno-experience .enquiry-direct{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:32px;border-top:1px solid var(--line);padding-top:20px}

.crafteno-experience .enquiry-direct a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}

.crafteno-experience [data-enquiry-status]{line-height:1.5;margin-top:16px}

.crafteno-experience .enquiry-field[hidden],.crafteno-experience .enquiry-summary[hidden],.crafteno-experience [data-enquiry-form][hidden]{display:none!important}

@media(max-width:650px){/* Styles isolés générés depuis shared/ui.css ; ne pas éditer cette copie. */

.crafteno-experience.accompagnement .masthead{gap:14px;flex-wrap:wrap}

.crafteno-experience.accompagnement .masthead>.text-link{order:3;flex-basis:100%;font-size:14px;min-height:44px}

.crafteno-experience.accompagnement .enquiry-main{padding:36px 20px 56px}

.crafteno-experience .enquiry-grid{grid-template-columns:minmax(0,1fr);gap:20px}

.crafteno-experience .enquiry-summary .project-actions{display:flex;flex-direction:column;align-items:stretch}

.crafteno-experience .enquiry-summary .button{white-space:normal;text-align:center}

}
/* Champ de protection laissé vide : hors parcours visuel et clavier, sans gêner
   la saisie normale. La validation est répétée côté serveur. */
.crafteno-experience .enquiry-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.crafteno-experience.accompagnement .button:disabled{cursor:wait;opacity:.65}