/* =====================================================================================================================
   YC Creations — styles propres à la page Contact (repris de la maquette ; les commentaires vNNN renvoient à ses versions)
   Autre feuille : commun.css (toutes les pages).
   ===================================================================================================================== */
/* Titres de bloc : badge flottant — pilule en verre, contour lumineux GoldYC/BleuYC qui tourne, point doré qui pulse,
     reflet champagne qui balaie le texte, léger flottement vertical. Tout en boucle douce (transform/opacity). */
@property --badge-angle{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@keyframes badgeSpin{to{--badge-angle:360deg;}}
/* Halos ambiants qui dérivent lentement, en fond de section */
@keyframes driftBlob{0%{transform:translate(0,0) scale(1);}50%{transform:translate(34px,-26px) scale(1.1);}100%{transform:translate(0,0) scale(1);}}
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:driftBlob 16s ease-in-out infinite;}
@keyframes ycGrad{from{background-position:0% 0;}to{background-position:200% 0;}}
/* halos "spot de scène" des sections sombres atténués, pour un fond plus sombre */
.yc-sky > .blob{filter:blur(70px) brightness(0.55);}
.nav-shell, .hero-in, .trust-head, .stats-light, .hx-section, .tl-section, .pf-head, .tm-section,
  .sv-hero, .sv-main, .sv-packs, .po-hero, .po-index, .po-cases, .po-m-shell, .pk-hero, .pk-process, .pk-faq,
  .ap-hero, .ap-manifesto, .ap-stats, .ap-story, .ap-team, .ap-values, .ct-hero{padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;}
/* Conteneurs : plus de centrage à largeur max, ils vont d'une marge à l'autre */
.hx-wrap, .sv-hero-grid, .sv-layout, .sv-packs-card, .po-hero-grid, .po-wrap, .po-m-bar, .po-m-panels, .po-m-nav,
  .pk-wrap, .pk-cards, .pk-flow, .ap-hero-grid, .ap-wrap, .ap-team-row, .ct-grid{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
/* ======================= STYLES PROPRES À LA PAGE ======================= */
/* =====================================================================
     PAGE CONTACT — reprend tout le système de l'accueil (fond continu, bulles, titreYC, CTA)
     Préfixe ct-. Formulaire en 3 étapes (besoin → projet → coordonnées) piloté par ctRef ;
     un lien Contact.dc.html#pack-presentation / #pack-creations / #pack-formation présélectionne le besoin, valide l'étape 1
     et ouvre directement l'étape 2 avec un rappel du pack (« Modifier » ramène à l'étape 1) (v472).
     ===================================================================== */
.ct-page{display:flex; flex-direction:column;}
.sv-line{display:block; width:fit-content; overflow:hidden; padding-bottom:0.1em; margin-bottom:-0.06em;}
.sv-line .sv-in{display:inline-block;}
.sv-in{animation:svIn 1s cubic-bezier(.22,1,.36,1) calc(.15s + var(--d, 0) * .12s) backwards;}
.sv-line .sv-in{animation-name:svLine; animation-duration:1.1s;}
@keyframes svIn{from{opacity:0; transform:translateY(26px); filter:blur(6px);}}
@keyframes svLine{from{transform:translateY(105%);}}
.ct-title .yc-grad.sv-in{animation:svLine 1.1s cubic-bezier(.22,1,.36,1) calc(.15s + var(--d, 0) * .12s) backwards, ycGrad 3.5s linear infinite;}
/* ---------- HERO : colonne de gauche (titre, accroche, e-mail) + formulaire ---------- */
.ct-hero{position:relative; padding:170px 64px 110px;}
.ct-grid{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(48px, 6vw, 96px); align-items:start; max-width:1240px; margin:0 auto;}
.ct-side{display:flex; flex-direction:column; gap:32px; padding-top:20px;}
.ct-title{font-size:clamp(52px, 6.2vw, 96px); margin:0;}
.ct-lead{margin:0; font-size:20px; line-height:1.7; color:rgba(255,255,255,0.72); max-width:470px;}
/* ---------- FORMULAIRE : carte vitrée, bordure animée or / bleu, barre de progression ---------- */
.ct-form{position:relative; margin:0; padding:40px 44px 36px; border-radius:var(--rayon-l); isolation:isolate;
    background:linear-gradient(170deg, rgba(31,110,145,0.16) 0%, rgba(18,24,32,0.85) 36%, rgba(12,16,21,0.92) 100%);
    box-shadow:0 50px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07); backdrop-filter:blur(12px);}
.ct-form::before{content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
    background:conic-gradient(from var(--badge-angle), rgba(217,169,79,0.08) 0%, rgba(217,169,79,0.55) 18%, rgba(217,169,79,0.08) 36%, rgba(110,193,228,0.08) 55%, rgba(110,193,228,0.55) 72%, rgba(110,193,228,0.08) 90%, rgba(217,169,79,0.08) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation:badgeSpin 9s linear infinite;}
.ct-form::after{content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:radial-gradient(500px circle at var(--mx, 70%) var(--my, 0%), rgba(110,193,228,0.10), transparent 60%);}
.ct-form-top{display:flex; flex-direction:column; gap:16px; margin-bottom:34px;}
.ct-steps-lab{display:flex; justify-content:space-between; align-items:baseline; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}
.ct-steps-lab b{color:#fff; font-weight:600;}
.ct-steps-lab span + span{color:var(--BleuYC); font-weight:600;}
.ct-bar{position:relative; height:3px; border-radius:3px; background:rgba(255,255,255,0.08); overflow:hidden;}
.ct-bar i{position:absolute; inset:0; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC)); transform:scaleX(var(--p, .3333)); transform-origin:left; transition:transform .8s cubic-bezier(.22,1,.36,1);}
.ct-bar i::after{content:''; position:absolute; right:0; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:#fff; box-shadow:0 0 14px 4px rgba(110,193,228,0.6);}
/* étapes : une seule visible, glissement latéral à chaque passage */
.ct-panes{position:relative; display:grid; min-height:400px;}
.ct-pane, .ct-done{grid-area:1 / 1; margin:0; padding:0; border:0; min-width:0; display:flex; flex-direction:column; gap:24px;
    opacity:0; visibility:hidden; transform:translateX(40px); transition:opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1), visibility 0s linear .5s;}
.ct-pane.is-prev{transform:translateX(-40px);}
.ct-pane.is-on, .ct-done.is-on{opacity:1; visibility:visible; transform:none; transition:opacity .6s ease .15s, transform .8s cubic-bezier(.22,1,.36,1) .15s, visibility 0s;}
.ct-h{padding:0; margin:0 0 26px; font-family:'Nohemi',sans-serif; font-weight:200; font-size:clamp(30px, 2.8vw, 40px); line-height:1.1; letter-spacing:-0.02em; color:#fff;}
.ct-h .yc-grad{font-weight:700;}
/* étape 1 : tuiles de besoin (choix unique) */
.ct-tiles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px;}
.ct-tile{position:relative; display:flex; align-items:center; gap:16px; min-height:124px; box-sizing:border-box; padding:20px 18px; border-radius:var(--rayon-m); cursor:pointer; text-align:left; color:#fff;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.10); transition:background .45s ease, border-color .45s ease, transform .6s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;}
.ct-tile:hover{border-color:rgba(110,193,228,0.45); transform:translateY(-3px);}
.ct-tile-ic{flex:0 0 50px; width:50px; height:50px; border-radius:var(--rayon-s); display:flex; align-items:center; justify-content:center; color:var(--BleuYC); background:rgba(110,193,228,0.10); transition:background .45s ease, color .45s ease, transform .6s cubic-bezier(.34,1.56,.64,1);}
.ct-tile-ic svg{width:24px; height:24px; flex-shrink:0;}
.ct-tile-t{display:flex; flex-direction:column; gap:4px; min-width:0;}
.ct-tile-t b{font-family:'Nohemi',sans-serif; font-weight:500; font-size:16px;}
.ct-tile-t small{font-size:14px; color:rgba(255,255,255,0.6); line-height:1.4;}
.ct-tile-ok{position:absolute; top:12px; right:12px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#0A0D10; background:var(--GoldYC); transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.ct-tile-ok svg{width:13px; height:13px; flex-shrink:0;}
.ct-tile.is-on{background:linear-gradient(140deg, rgba(110,193,228,0.16), rgba(217,169,79,0.06)); border-color:rgba(217,169,79,0.6); box-shadow:0 18px 40px rgba(0,0,0,0.35), 0 0 30px rgba(217,169,79,0.12);}
.ct-tile.is-on .ct-tile-ic{background:linear-gradient(140deg, var(--BleuYC), #A9DAEF); color:#0A0D10; transform:rotate(-6deg) scale(1.05);}
.ct-tile.is-on .ct-tile-ok{transform:scale(1);}
.ct-pane.is-on .ct-tile{animation:svIn .7s cubic-bezier(.22,1,.36,1) calc(.2s + var(--i) * .07s) backwards;}
/* étape 2 : pastilles, bascule Oui / Non, message */
.ct-group{display:flex; flex-direction:column; gap:16px;}
.ct-lab{font-size:14px; color:rgba(255,255,255,0.7);}
.ct-chips{display:flex; flex-wrap:wrap; gap:8px;}
.ct-chip{padding:10px 16px; border-radius:999px; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:rgba(255,255,255,0.78); cursor:pointer;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.12); transition:background .4s ease, border-color .4s ease, color .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);}
.ct-chip:hover{border-color:rgba(110,193,228,0.5); color:#fff;}
.ct-chip.is-on{background:var(--BleuYC); border-color:var(--BleuYC); color:#0A0D10; transform:scale(1.04);}
.ct-toggle{position:relative; display:inline-flex; align-self:flex-start; padding:5px; border-radius:999px; background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.10);}
.ct-toggle button{position:relative; z-index:1; width:84px; padding:9px 0; border:0; background:none; border-radius:999px; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:rgba(255,255,255,0.7); transition:color .4s ease;}
.ct-toggle button.is-on{color:#0A0D10;}
.ct-toggle-ind{position:absolute; top:5px; bottom:5px; left:5px; width:84px; border-radius:999px; background:linear-gradient(100deg, var(--BleuYC), #A9DAEF); opacity:0; transform:translateX(var(--tx, 0)); transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;}
.ct-toggle.has-v .ct-toggle-ind{opacity:1;}
/* champs : libellé flottant, soulignement qui se remplit en dégradé au focus */
.ct-fields{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 24px;}
.ct-field{position:relative; display:block;}
.ct-field input, .ct-field textarea{width:100%; box-sizing:border-box; padding:24px 16px 10px; border-radius:var(--rayon-s); border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.035); color:#fff;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; outline:none; transition:border-color .4s ease, background .4s ease; resize:none;}
.ct-field textarea{line-height:1.6; min-height:150px;}
.ct-field span{position:absolute; left:17px; top:17px; font-size:16px; color:rgba(255,255,255,0.5); pointer-events:none; transform-origin:left top; transition:transform .35s cubic-bezier(.22,1,.36,1), color .35s ease;}
.ct-field span i{font-style:normal; color:var(--GoldYC); margin-left:2px;}
.ct-field input:focus + span, .ct-field input:not(:placeholder-shown) + span,
  .ct-field textarea:focus + span, .ct-field textarea:not(:placeholder-shown) + span{transform:translateY(-10px) scale(.76); color:var(--BleuYC);}
.ct-field em{position:absolute; left:14px; right:14px; bottom:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC)); transform:scaleX(0); transition:transform .6s cubic-bezier(.22,1,.36,1);}
.ct-field input:focus, .ct-field textarea:focus{border-color:rgba(110,193,228,0.35); background:rgba(255,255,255,0.05);}
.ct-field input:focus ~ em, .ct-field textarea:focus ~ em{transform:scaleX(1);}
.ct-field.is-bad input, .ct-field.is-bad textarea{border-color:rgba(232,120,110,0.7); animation:ctShake .4s ease;}
@keyframes ctShake{25%{transform:translateX(-5px);} 50%{transform:translateX(4px);} 75%{transform:translateX(-2px);}}
.ct-count{position:absolute; right:14px; bottom:10px; font-size:12px; color:rgba(255,255,255,0.4);}
.ct-count b{font-weight:600; color:rgba(255,255,255,0.7);}
.ct-consent{display:flex; align-items:flex-start; gap:16px; cursor:pointer; font-size:14px; line-height:1.5; color:rgba(255,255,255,0.68);}
.ct-consent input{position:absolute; opacity:0; pointer-events:none;}
.ct-box{flex:0 0 22px; width:22px; height:22px; border-radius:7px; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; color:#0A0D10; transition:background .35s ease, border-color .35s ease;}
.ct-box svg{width:13px; height:13px; transform:scale(0); transition:transform .4s cubic-bezier(.34,1.56,.64,1); flex-shrink:0;}
.ct-consent input:checked + .ct-box{background:var(--BleuYC); border-color:var(--BleuYC);}
.ct-consent input:checked + .ct-box svg{transform:scale(1);}
.ct-consent.is-bad .ct-box{border-color:rgba(232,120,110,0.8); animation:ctShake .4s ease;}
.ct-err{margin:-8px 0 0; font-size:14px; color:#F0A79E; opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .4s ease; min-height:1.2em;}
.ct-err.is-on{opacity:1; transform:none;}
/* rappel du pack choisi depuis la page Packs (v472) : en haut de l'étape 2, lien « Modifier » vers l'étape 1 */
.ct-pick{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin:-6px 0 0; padding:14px 18px; border-radius:var(--rayon-s);
    background:rgba(255,255,255,0.03); border:1px solid rgba(217,169,79,0.32);}
.ct-pick[hidden]{display:none;}
.ct-pick-t{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-width:0; font-size:14px; color:rgba(255,255,255,0.6);}
.ct-pick-t b{font-family:'Nohemi',sans-serif; font-weight:500; font-size:16px; color:#fff;}
.ct-pick-sep{color:var(--GoldYC);}
.ct-pick-edit{padding:2px 0; border:0; background:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--BleuYC); text-decoration:underline; text-decoration-color:rgba(110,193,228,0.4); text-underline-offset:4px; transition:color .3s ease, text-decoration-color .3s ease;}
.ct-pick-edit:hover, .ct-pick-edit:focus-visible{color:#fff; text-decoration-color:currentColor;}
.ct-pick-edit:focus-visible{outline:2px solid var(--BleuYC); outline-offset:4px; border-radius:2px;}
.ct-h:focus{outline:none;}
/* ouverture directe sur l'étape 2 : aucun glissement visible */
.ct-form.is-instant .ct-pane, .ct-form.is-instant .ct-bar i, .ct-form.is-instant .ct-back{transition:none !important;}
/* boutons de navigation */
.ct-actions{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:30px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.08);}
.ct-back{display:inline-flex; align-items:center; gap:8px; padding:10px 4px; border:0; background:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:rgba(255,255,255,0.7);
    opacity:0; pointer-events:none; transform:translateX(8px); transition:opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), color .3s ease;}
.ct-back svg{width:18px; height:18px; transition:transform .4s ease; flex-shrink:0;}
.ct-back:hover{color:#fff;}
.ct-back:hover svg{transform:translateX(-4px);}
.ct-form.has-back .ct-back{opacity:1; pointer-events:auto; transform:none;}
.ct-next{border:0; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif;}
.ct-next .hero-cta-arrow svg{width:16px; height:16px; flex-shrink:0;}
.ct-form.is-sending .ct-next{pointer-events:none;}
.ct-form.is-sending .ct-next .hero-cta-arrow svg{animation:ctSpin .8s linear infinite;}
.ct-form.is-sending .ct-next .hero-cta-arrow svg{opacity:1;}
.ct-form.is-sending .ct-next .hero-cta-arrow::after{opacity:0;}
/* envoi : icône qui tourne inchangée, pas de flèche en dégradé (v484) */
@keyframes ctSpin{to{transform:rotate(360deg);}}
.ct-form.is-done .ct-actions{display:none;}
/* confirmation : coche dorée, éclat de particules, récapitulatif */
.ct-done .ct-h{margin-bottom:0;}
.ct-done{align-items:center; justify-content:center; text-align:center; gap:16px;}
.ct-done p{margin:0; font-size:16px; color:rgba(255,255,255,0.7);}
.ct-done-ic{position:relative; width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#0A0D10;
    background:linear-gradient(140deg, var(--GoldYC), #F1DDB0); box-shadow:0 0 50px rgba(217,169,79,0.5); margin-bottom:8px; transform:scale(0);}
.ct-done-ic > svg{width:40px; height:40px; flex-shrink:0;}
.ct-done.is-on .ct-done-ic{animation:ctPop .7s cubic-bezier(.34,1.56,.64,1) .3s forwards;}
@keyframes ctPop{to{transform:scale(1);}}
.ct-burst i{position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px; border-radius:50%; background:var(--GoldYC); box-shadow:0 0 10px var(--GoldYC); opacity:0;}
.ct-burst i:nth-child(even){background:var(--BleuYC); box-shadow:0 0 10px var(--BleuYC);}
.ct-done.is-on .ct-burst i{animation:ctBurst 1s ease-out .5s forwards;}
@keyframes ctBurst{0%{opacity:1; transform:rotate(var(--a)) translateX(20px);} 100%{opacity:0; transform:rotate(var(--a)) translateX(96px);}}
.ct-recap{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:6px;}
.ct-recap span{font-size:12px; padding:7px 13px; border-radius:999px; color:rgba(255,255,255,0.8); border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.03);}
.ct-again{margin-top:10px; padding:10px 4px; border:0; background:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; color:var(--BleuYC); border-bottom:1px solid rgba(110,193,228,0.4);}
/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .ct-grid{grid-template-columns:minmax(0,1fr);}
  .ct-side{padding-top:0;}
}
@media (max-width:640px){
  .ct-hero{padding:140px 20px 80px;}
  .ct-form{padding:30px 22px 26px; border-radius:var(--rayon-l);}
  .ct-tiles, .ct-fields{grid-template-columns:1fr;}
  .ct-panes{min-height:0;}
}
@media (prefers-reduced-motion: reduce){
  .sv-in, .sv-line .sv-in, .ct-form::before{animation:none !important;}
}
.nav-shell, .hero-in, .trust-head, .stats-light, .hx-section, .tl-section, .pf-head, .tm-section,
  .sv-hero, .sv-main, .sv-packs, .po-hero, .po-index, .po-cases, .po-m-shell, .pk-hero, .pk-process, .pk-faq,
  .ap-hero, .ap-manifesto, .ap-stats, .ap-story, .ap-team, .ap-values, .ct-hero{padding-left:var(--gutter) !important; padding-right:var(--gutter) !important;}
/* Conteneurs : plus de centrage à largeur max, ils vont d'une marge à l'autre */
.hx-wrap, .sv-hero-grid, .sv-layout, .sv-packs-card, .po-hero-grid, .po-wrap, .po-m-bar, .po-m-panels, .po-m-nav,
  .pk-wrap, .pk-cards, .pk-flow, .ap-hero-grid, .ap-wrap, .ap-team-row, .ct-grid{max-width:none !important; margin-left:0 !important; margin-right:0 !important;}
/* ===== CONTACT — HERO HARMONISÉ AVEC LES AUTRES PAGES =====
     Même logique que Services, Portfolio, À propos : sur ordinateur, le hero fait la hauteur de l'écran et son contenu
     est centré entre le bas de la nav (80 px) et le bas de l'écran (32 px d'air minimum de chaque côté si le contenu
     est plus haut que l'écran). Texte et formulaire sont centrés l'un par rapport à l'autre ; marge --gutter à gauche
     et à droite. Titre à l'échelle titre-hero de la charte (112 px au plus). */
.ct-hero{padding-top:144px; padding-bottom:96px;}
/* le halo doré du bas (bottom:-200px) ne dépasse plus sous le pied de page depuis la suppression de « Ce qui vous attend » */
.ct-hero.yc-sky{overflow:clip !important;}
.ct-grid{gap:clamp(48px, 6vw, 96px);}
@media (min-width:1051px){
  .ct-grid{grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); align-items:center;}
}
.ct-side{gap:32px; padding-top:0;}
.ct-title{font-size:clamp(56px, 6.2vw, 112px);}
.ct-lead{max-width:520px;}
@media (min-width:1051px){
  .ct-hero{min-height:100vh; min-height:100svh; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; padding-top:112px; padding-bottom:32px;}
}
@media (max-width:767px){
  .ct-hero{padding-top:140px; padding-bottom:80px;}
}
/* ===== E-MAIL : sans cadre =====
     Surtitre de la charte (précédé d'un trait Bleu YC → Or YC), adresse en Nohemi 300 traitée comme un lien de la
     charte (souligné Bleu YC 1 px, décalé ; au survol Bleu YC et trait de 2 px), flèche qui indique l'ouverture de la
     messagerie. À côté, le bouton « Copier » de la charte (voile bleu, puis Succès « Copié »). */
.ct-mail{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.ct-mail-k{display:inline-flex; align-items:center; gap:16px; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);}
.ct-mail-k::before{content:''; width:32px; height:1px; background:linear-gradient(90deg, var(--BleuYC), var(--GoldYC));}
.ct-mail-row{display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px;}
.ct-mail-a{display:inline-flex; align-items:center; gap:8px; font-family:'Nohemi',sans-serif; font-weight:300; font-size:clamp(24px, 2.2vw, 32px); line-height:1.2; letter-spacing:-0.01em; color:#fff;
    text-decoration:underline; text-decoration-color:var(--BleuYC); text-decoration-thickness:1px; text-underline-offset:8px; transition:color .2s ease, text-decoration-thickness .2s ease;}
.ct-mail-a svg{flex:none; width:24px; height:24px; color:var(--BleuYC); transition:transform .2s ease;}
.ct-mail-a:hover, .ct-mail-a:focus-visible{color:var(--BleuYC); text-decoration-thickness:2px;}
.ct-mail-a:hover svg, .ct-mail-a:focus-visible svg{transform:translate(2px, -2px);}
.ct-copy{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:999px; cursor:pointer; background:rgba(110,193,228,0.14); color:var(--BleuYC);
    font-family:'Plus Jakarta Sans',sans-serif; font-weight:500; font-size:14px; line-height:1; transition:background .2s ease, color .2s ease;}
.ct-copy:hover{background:rgba(110,193,228,0.24);}
.ct-copy svg{width:16px; height:16px; flex-shrink:0;}
.ct-copy-v, .ct-copy-d{display:none;}
.ct-mail.is-copied .ct-copy{background:rgba(143,214,176,0.14); color:#8FD6B0;}
.ct-mail.is-copied .ct-copy-i, .ct-mail.is-copied .ct-copy-t{display:none;}
.ct-mail.is-copied .ct-copy-v, .ct-mail.is-copied .ct-copy-d{display:inline;}
.ct-sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
/* ===== FORMULAIRE : recentré et plus compact pour tenir dans l'écran ===== */
.ct-form{padding:40px;}
.ct-form-top{margin-bottom:32px;}
.ct-panes{min-height:0;}
.ct-h{margin-bottom:24px;}
.ct-tile{min-height:104px; padding:16px;}
.ct-pane{gap:16px;}
.ct-field textarea{min-height:0; height:128px;}
@media (min-width:1051px) and (max-height:880px){
  .ct-form{padding:32px;}
  .ct-form-top{margin-bottom:24px;}
  .ct-pane, .ct-done{gap:16px;}
  .ct-h{font-size:32px; margin-bottom:8px;}
  .ct-tile{min-height:88px;}
  .ct-field textarea{height:104px;}
}
@media (min-width:1051px) and (max-height:800px){
  .ct-form{padding:24px 32px;}
  .ct-form-top{margin-bottom:16px;}
  .ct-group{gap:8px;}
  .ct-field textarea{height:88px;}
  .ct-actions{margin-top:16px; padding-top:16px;}
}
/* ===== BOUTONS DU FORMULAIRE — les trois niveaux de la charte =====
     Retour = secondaire (contour blanc, voile bleu au survol) ; il n'existe pas à l'étape 1 (ni visible ni atteignable au clavier).
     Suivant / Envoyer = principal (hero-cta) ; son libellé annonce l'étape suivante.
     Nouvelle demande = tertiaire (texte Bleu YC + icône). Anneau de focus Bleu YC 2 px sur tous les éléments cliquables. */
.ct-actions{margin-top:24px; padding-top:24px;}
.ct-back{gap:8px; padding:12px 20px 12px 16px; border:1px solid rgba(255,255,255,0.35); border-radius:999px; background:transparent; color:#fff;
    font-size:14px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; line-height:1.2; visibility:hidden;
    transition:opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .2s ease, background .2s ease, visibility 0s linear .4s;}
.ct-back svg{width:16px; height:16px; flex-shrink:0;}
.ct-form.has-back .ct-back{visibility:visible; transition:opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1), border-color .2s ease, background .2s ease, visibility 0s;}
.ct-back:hover, .ct-back:focus-visible{border-color:var(--BleuYC); background:rgba(110,193,228,0.14); color:#fff;}
.ct-back:hover svg{transform:translateX(-3px);}
.ct-next{margin-left:auto; letter-spacing:0.04em;}
.ct-again{display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:8px 0; border:0; background:none; cursor:pointer;
    font-family:'Plus Jakarta Sans',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--BleuYC); transition:color .2s ease;}
.ct-again svg{width:16px; height:16px; transition:transform .4s cubic-bezier(.22,1,.36,1); flex-shrink:0;}
.ct-again:hover{color:#fff;}
.ct-again:hover svg{transform:rotate(-90deg);}
.ct-back:focus-visible, .ct-copy:focus-visible, .ct-again:focus-visible, .ct-mail-a:focus-visible, .ct-tile:focus-visible, .ct-chip:focus-visible, .ct-toggle button:focus-visible{outline:2px solid var(--BleuYC); outline-offset:3px;}
.ct-consent input:focus-visible + .ct-box{outline:2px solid var(--BleuYC); outline-offset:3px;}
/* ===== PETITS ÉCRANS : une colonne, rien ne se chevauche ===== */
@media (max-width:640px){
  .ct-form{padding:24px;}
  .ct-form-top{margin-bottom:24px;}
  .ct-steps-lab{flex-wrap:wrap; gap:8px 16px;}
  .ct-tiles{gap:8px;}
  .ct-tile{min-height:0; padding:16px; padding-right:48px;}
  .ct-tile-ic{flex-basis:44px; width:44px; height:44px; flex-shrink:0;}
  .ct-actions{flex-direction:column-reverse; align-items:stretch; gap:16px;}
  .ct-next{margin-left:0; width:100%; justify-content:space-between;}
  .ct-back{justify-content:center;}
  .ct-form:not(.has-back) .ct-back{display:none;}
  .ct-mail-row{flex-direction:column; align-items:flex-start;}
}
/* ===== HERO : TITRE À L'ÉCHELLE « titre-hero » DE LA CHARTE (comme Services, Portfolio, Packs) =====
     112 px au plus, 56 px au moins. Sur ordinateur, chaque ligne du titre reste entière (au besoin elle mord de
     quelques pixels sur l'espace entre le texte et le formulaire). */
.ct-title{font-size:clamp(56px, 7.4vw, 112px);}
@media (min-width:1051px){
  .ct-title .sv-line{white-space:nowrap;}
}
@media (min-width:2000px){
  .ct-hero{min-height:calc(100svh / var(--xl));}
}
/*=====BLOCK=====*/
/* ===== v505 — MOBILE (≤ 767 px) : MÉMOIRE ET FLUIDITÉ — tablette, ordinateur et grands écrans inchangés =====
     Cause du rechargement de l'Accueil sur iPhone : trop de grandes couches graphiques actives en même temps (halos de fond
     animés avec will-change, halos flous, avis flous), plus des images de 2 400 px décodées pour des vignettes. Ici :
     halos figés et sans flou, plus de verre dépoli, animations en pause hors écran, images de 800 px sur mobile. */
@media (max-width:767px){
  /* départ commun des hero : nav (80 px) + 40 px — badge, ou titre s'il n'y a pas de badge */
  .ct-hero{padding-top:var(--hero-top-m) !important;}
  /* halos « spot de scène » : figés, flou remplacé par un masque radial (aucun filter:blur) */
  .blob{animation:none !important; translate:none !important; filter:none !important;
        -webkit-mask-image:radial-gradient(closest-side, #000 18%, transparent 100%); mask-image:radial-gradient(closest-side, #000 18%, transparent 100%);}
  .yc-sky > .blob{filter:brightness(0.55) !important;}
}
/*=====BLOCK=====*/
/* ===== v506 — HERO MOBILE (≤ 767 px) : même paragraphe que Services (16 px, interligne 1,7) sur les 6 pages ;
     titre agrandi : sa ligne la plus longue (« votre projet ») occupe ≈ 98 % de la largeur utile, à toute largeur de mobile
     (taille proportionnelle à 100vw − 2 gouttières), plafonnée à 112 px. Tablette et ordinateur inchangés. ===== */
@media (max-width:767px){
  h1.ct-title{font-size:min(calc((100vw - 2 * var(--gutter, 24px)) * 0.1805), 112px) !important;}
  p.ct-lead{font-size:16px !important; line-height:1.7 !important;}
}
/*=====BLOCK=====*/
/* v518 — lien vers les mentions légales sous la case de consentement (aligné sur le texte de la case) */
.ct-data{display:inline-block; align-self:flex-start; margin:-4px 0 0 38px; font-size:13px; color:var(--muted); text-decoration:underline; text-decoration-color:var(--BleuYC); text-underline-offset:4px; transition:color .2s ease;}
.ct-data:hover, .ct-data:focus-visible{color:#fff;}
/*=====BLOCK=====*/
/* v533 — ÉTAPE 1 : icônes animées des 4 besoins.
     Apparition : chaque icône se trace (pathLength="1", stroke-dashoffset 1 → 0), en cascade avec sa carte.
     Sélection (.ct-tile.is-on) : une animation propre à chaque icône, jouée une fois à chaque sélection —
       Présentation : la courbe du graphique se redessine et l'écran s'allume ; Creations : la grille se retrace et le cercle pulse ;
       Formation : la toque se soulève, le gland se balance ; Autre projet : la grande étoile tourne, la petite scintille.
     Survol : légère mise en mouvement de la même famille. Réduire les animations : icônes fixes, entièrement tracées. */
.ct-tile-ic svg *{transform-box:fill-box; transform-origin:center;}
.ic-d{stroke-dasharray:1; stroke-dashoffset:0;}
/* l'animation d'apparition (icDraw) reste en tête de liste quand la carte est sélectionnée : elle ne se rejoue pas à la désélection */
.ct-tile{--icd:icDraw .9s cubic-bezier(.65,0,.35,1) calc(.35s + var(--i) * .07s) backwards;}
.ct-pane.is-on .ct-tile .ic-d{animation:var(--icd);}
@keyframes icDraw{from{stroke-dashoffset:1;}}
@keyframes icRedraw{from{stroke-dashoffset:1;}}
/* Présentation */
.ct-pane.is-on .ct-tile.is-on .ic-chart{animation:var(--icd), icRedraw .8s cubic-bezier(.65,0,.35,1) .15s backwards;}
.ct-pane.is-on .ct-tile.is-on .ic-scr{animation:var(--icd), icScr .9s cubic-bezier(.22,1,.36,1);}
@keyframes icScr{0%{transform:scale(1);} 35%{transform:scale(1.08);} 100%{transform:scale(1);}}
/* Creations */
.ct-pane.is-on .ct-tile.is-on .ic-grid{animation:var(--icd), icRedraw .7s cubic-bezier(.65,0,.35,1) backwards;}
.ct-pane.is-on .ct-tile.is-on .ic-dot{animation:var(--icd), icPop .9s cubic-bezier(.34,1.56,.64,1) .35s backwards;}
@keyframes icPop{0%{transform:scale(0);} 60%{transform:scale(1.35);} 100%{transform:scale(1);}}
/* Formation */
.ic-cap{transform-box:fill-box; transform-origin:50% 100%;}
.ic-tassel{transform-origin:50% 0;}
.ct-pane.is-on .ct-tile.is-on .ic-cap{animation:icCap 1s cubic-bezier(.22,1,.36,1);}
.ct-pane.is-on .ct-tile.is-on .ic-tassel{animation:var(--icd), icTassel 1.2s ease-in-out .15s;}
@keyframes icCap{0%{transform:none;} 35%{transform:translateY(-3px) rotate(-8deg);} 70%{transform:translateY(0) rotate(3deg);} 100%{transform:none;}}
@keyframes icTassel{0%,100%{transform:rotate(0);} 25%{transform:rotate(22deg);} 50%{transform:rotate(-14deg);} 75%{transform:rotate(7deg);}}
/* Autre projet */
.ct-pane.is-on .ct-tile.is-on .ic-star{animation:var(--icd), icStar 1s cubic-bezier(.22,1,.36,1);}
.ct-pane.is-on .ct-tile.is-on .ic-spark{animation:var(--icd), icSpark 1.1s ease-in-out .2s;}
@keyframes icStar{0%{transform:rotate(0) scale(1);} 45%{transform:rotate(72deg) scale(1.15);} 100%{transform:rotate(90deg) scale(1);}}
@keyframes icSpark{0%,100%{transform:scale(1); opacity:1;} 30%{transform:scale(0); opacity:0;} 65%{transform:scale(1.4); opacity:1;}}
/* survol (souris) : un léger mouvement de la même famille */
@media (hover:hover){
  .ct-tile:not(.is-on):hover .ic-scr{transform:scale(1.05);}
  .ct-tile:not(.is-on):hover .ic-dot{transform:scale(1.25);}
  .ct-tile:not(.is-on):hover .ic-cap{transform:translateY(-1.5px) rotate(-5deg);}
  .ct-tile:not(.is-on):hover .ic-star{transform:rotate(30deg);}
  .ic-scr, .ic-dot, .ic-cap, .ic-star{transition:transform .5s cubic-bezier(.22,1,.36,1);}
}
@media (prefers-reduced-motion: reduce){
  .ct-tile-ic svg *, .ct-pane.is-on .ct-tile .ic-d, .ct-pane.is-on .ct-tile.is-on .ic-d, .ct-pane.is-on .ct-tile.is-on .ic-cap{animation:none !important; transition:none !important; transform:none !important; stroke-dashoffset:0 !important;}
}

/* Ajout du site : champ piège anti-robots du formulaire, hors de l'écran (jamais vu ni lu par les visiteurs) */
.ct-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}