/*
Theme Name: YTR AGENCY
Theme URI: https://ytr-agency.fr
Author: YTR AGENCY
Author URI: https://ytr-agency.fr
Description: Thème bloc sur mesure de YTR AGENCY. Contenu installé en un clic depuis Apparence > Contenu du site. Textes, images, menus, couleurs et polices modifiables dans l'éditeur.
Version: 1.0.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ytr-agency
Tags: block-theme, full-site-editing, business, one-column
*/

/* ==========================================================================
   Jetons : ALIAS des préréglages de theme.json, jamais des valeurs en dur.
   Changer une couleur ou une police dans Apparence > Éditeur > Styles
   recolore tout le site.
   ========================================================================== */
:root{
  --blanc:var(--wp--preset--color--blanc);
  --bleu:var(--wp--preset--color--bleu);
  --bleu-fonce:var(--wp--preset--color--bleu-fonce);
  --bleu-clair:var(--wp--preset--color--bleu-clair);
  --nuit:var(--wp--preset--color--nuit);
  --emeraude:var(--wp--preset--color--emeraude);
  --brume:var(--wp--preset--color--brume);
  --ardoise:var(--wp--preset--color--ardoise);
  --galet:var(--wp--preset--color--galet);
  --trait:var(--wp--preset--color--trait);
  --nuit-douce:var(--wp--preset--color--nuit-douce);
  --texte:var(--wp--preset--font-family--texte);
  --titres:var(--wp--preset--font-family--titres);
  --ease:cubic-bezier(.22,1,.36,1);
  --rayon:20px;
  --rayon-lg:28px;
  --gouttiere:max(20px, env(safe-area-inset-left, 0px));
}

/* ========== BASE ========== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block} /* height:auto : sinon l'attribut height des blocs image écrase aspect-ratio */
h1,h2,h3,h4{margin:0;text-wrap:balance;hyphens:none}
p{margin:0}
:where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0}
figure.wp-block-image{margin:0}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--bleu);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:96px}
.wrap{max-width:1240px;margin-inline:auto;padding-left:var(--gouttiere);padding-right:max(20px, env(safe-area-inset-right, 0px))}
.section{padding-block:clamp(72px,10vw,140px)}
h2.wp-block-heading{font-size:var(--wp--preset--font-size--titre-2)}
h3.wp-block-heading{font-size:var(--wp--preset--font-size--titre-3);letter-spacing:-0.01em;line-height:1.2}

/* Étiquette de section : pastille avec point vert qui pulse */
.tag{display:inline-flex;align-items:center;gap:10px;width:fit-content;padding:7px 16px;border:1px solid var(--trait);border-radius:999px;font-size:var(--wp--preset--font-size--petit);font-weight:500;color:var(--ardoise);background:var(--blanc)}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emeraude);flex:none;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--emeraude) 55%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.section-head{display:grid;gap:24px;margin-bottom:clamp(40px,6vw,72px);max-width:760px}
.section-lead{color:var(--ardoise);max-width:60ch}
.section-lead a,.sectors-foot a{color:var(--bleu);font-weight:500}

/* ========== BOUTONS (la classe se pose sur le conteneur, le style sur le lien) ========== */
.wp-block-button.b-plein,.wp-block-button.b-ligne-clair,.wp-block-button.b-blanc,.wp-block-button.b-texte,.wp-block-button.b-rond{display:inline-block;background:none;border:0;padding:0;border-radius:0}
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.wp-block-button .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:500 16px/1 var(--texte);text-decoration:none;border:1px solid transparent;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .5s var(--ease)}
.b-plein .wp-block-button__link{background:var(--bleu);color:var(--blanc)}
.b-plein .wp-block-button__link:hover{background:var(--bleu-fonce)}
.b-plein .wp-block-button__link::after{content:"→";transition:transform .35s var(--ease)}
.b-plein .wp-block-button__link:hover::after{transform:translateX(3px)}
.b-ligne-clair .wp-block-button__link{background:transparent;color:var(--blanc);border-color:color-mix(in srgb,var(--blanc) 32%,transparent)}
.b-ligne-clair .wp-block-button__link:hover{border-color:var(--blanc);background:color-mix(in srgb,var(--blanc) 6%,transparent)}
.b-blanc .wp-block-button__link{background:var(--blanc);color:var(--nuit)}
.b-texte .wp-block-button__link{min-height:44px;padding:0;background:none;color:var(--bleu);border-radius:0}
.b-texte .wp-block-button__link::after{content:"↗";transition:transform .35s var(--ease)}
.b-texte .wp-block-button__link:hover::after{transform:translate(2px,-2px)}
/* Gros bouton rond de l'appel final */
.b-rond .wp-block-button__link{min-height:0;gap:20px;padding:12px 36px 12px 12px;background:color-mix(in srgb,var(--blanc) 8%,transparent);border-color:color-mix(in srgb,var(--blanc) 18%,transparent);color:var(--blanc);font:600 clamp(22px,2.6vw,34px)/1.1 var(--titres);letter-spacing:-0.02em}
.b-rond .wp-block-button__link::before{content:"→";display:grid;place-items:center;width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);border-radius:50%;background:var(--bleu);font:400 26px/1 var(--texte);flex:none;transition:transform .5s var(--ease)}
.b-rond .wp-block-button__link:hover{background:color-mix(in srgb,var(--blanc) 14%,transparent)}
.b-rond .wp-block-button__link:hover::before{transform:rotate(-45deg)}

/* ========== EN-TÊTE ========== */
.site-header{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:50;padding-left:max(14px, env(safe-area-inset-left,0px));padding-right:max(14px, env(safe-area-inset-right,0px))}
.admin-bar .site-header{top:calc(var(--wp-admin--admin-bar--height,32px) + 14px)}
.nav-bar{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 24px;background:color-mix(in srgb,var(--blanc) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--trait);border-radius:999px;transition:padding .4s var(--ease),box-shadow .4s var(--ease),max-width .4s var(--ease)}
.est-defile .nav-bar{padding:6px 6px 6px 20px;max-width:980px;box-shadow:0 10px 30px -18px color-mix(in srgb,var(--nuit) 40%,transparent)}
.logo a{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;color:var(--nuit);font:600 22px/1 var(--titres);letter-spacing:-0.03em}
.logo strong{display:inline-flex;align-items:baseline;gap:6px;font:500 12px/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--galet)}
.logo strong::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emeraude);transform:translateY(-1px)}
.wp-block-navigation .wp-block-navigation__container{gap:clamp(16px,2.2vw,32px)}
.menu .wp-block-navigation-item__content{text-decoration:none;font-size:15px;font-weight:500;color:var(--ardoise);transition:color .3s}
.menu .wp-block-navigation-item__content:hover{color:var(--nuit)}
.wp-block-buttons.nav-cta .wp-block-button__link{min-height:44px;padding:0 20px;font-size:15px}
.wp-block-buttons.nav-cta .b-plein .wp-block-button__link::after{content:none}
/* Bouton du menu mobile : rond, comme la maquette */
.menu .wp-block-navigation__responsive-container-open{width:44px;height:44px;border-radius:50%;border:1px solid var(--trait);background:var(--blanc);align-items:center;justify-content:center;color:var(--nuit)}
@media (max-width:900px){
  /* Pas de flou sur mobile : backdrop-filter enfermerait le panneau du menu (position fixed) dans la barre */
  .nav-bar{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--blanc)}
  .logo strong{font-size:0;gap:0}
  .wp-block-navigation.menu .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .wp-block-navigation.menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
  .nav-bar{gap:8px;padding-left:20px}
  .menu{order:3}
}
@media (max-width:380px){.wp-block-buttons.nav-cta .wp-block-button__link{padding:0 14px;font-size:14px}}
.nav-bar:has(.is-menu-open),.site-header:has(.is-menu-open){backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transform:none!important;filter:none!important}
.menu .wp-block-navigation__responsive-container.is-menu-open{position:fixed;inset:0;width:100vw;height:100dvh;overflow-y:auto}
/* Panneau mobile : blanc, liens compacts séparés par un filet (seul !important justifié du thème) */
.wp-block-navigation.menu .wp-block-navigation__responsive-container.is-menu-open{background-color:var(--blanc)!important;color:var(--nuit)!important;padding:calc(env(safe-area-inset-top,0px) + 28px) max(24px, env(safe-area-inset-right,0px)) 32px max(24px, env(safe-area-inset-left,0px))}
.menu .is-menu-open .wp-block-navigation__responsive-container-content{padding-top:72px!important;align-items:stretch!important}
.menu .is-menu-open .wp-block-navigation__container{gap:0!important;align-items:stretch!important;width:100%}
.menu .is-menu-open .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--trait)}
.menu .is-menu-open .wp-block-navigation-item__content{display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0!important;font:600 22px/1.2 var(--titres)!important;letter-spacing:-0.015em;color:var(--nuit)!important}
.menu .is-menu-open .wp-block-navigation-item__content::after{content:"";width:8px;height:8px;border-top:1.5px solid var(--galet);border-right:1.5px solid var(--galet);transform:rotate(45deg);margin-right:4px}
.menu .is-menu-open .wp-block-navigation__responsive-container-close{top:24px;right:4px;width:44px;height:44px;border-radius:50%;border:1px solid var(--trait);display:grid;place-items:center}

/* ========== 1. HERO : champ de points sur bleu nuit ========== */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:min(100svh,900px);display:grid;align-items:center;padding-block:clamp(120px,13vw,170px) clamp(72px,9vw,120px);text-align:center;background:var(--nuit);color:var(--blanc)}
.hero-field{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.hero::before{content:"";position:absolute;left:50%;top:50%;width:min(1000px,120%);height:70%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--nuit) 92%,transparent) 40%,transparent);z-index:-1;pointer-events:none}
.hero-copy{display:grid;justify-items:center;gap:28px;max-width:960px}
.hero-title{font-size:var(--wp--preset--font-size--titre-1);letter-spacing:-0.035em;line-height:1.02;color:var(--blanc)}
.hero-title em{font-style:normal;color:var(--bleu-clair)}
.hero-sub{color:var(--nuit-douce);max-width:52ch}
.wp-block-buttons.hero-ctas{justify-content:center}
.hero-hint{position:absolute;left:50%;bottom:clamp(20px,3vw,32px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--nuit-douce);white-space:nowrap}
.hero-hint::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emeraude)}
/* Révélation du titre mot par mot (classes posées par app.js) */
.js .hero-title .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(10px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.js .hero.est-visible .hero-title .w{opacity:1;transform:none;filter:blur(0)}
.js .hero .hero-sub,.js .hero .hero-ctas,.js .hero .hero-hint{opacity:0;transition:opacity .9s var(--ease) .8s}
.js .hero.est-visible .hero-sub,.js .hero.est-visible .hero-ctas,.js .hero.est-visible .hero-hint{opacity:1}

/* ========== 2. BANDEAU DE CONFIANCE ========== */
.trust{padding-block:48px;border-bottom:1px solid var(--trait)}
.trust-inner{display:flex;align-items:center;gap:32px}
.trust-label{flex:none;font-size:var(--wp--preset--font-size--petit);color:var(--galet);max-width:150px;line-height:1.4}
.marquee{overflow:hidden;flex:1;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:56px;width:max-content}
.js .marquee-track{animation:defile 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:10px;font:600 22px/1.2 var(--titres);letter-spacing:-0.02em;color:var(--ardoise);white-space:nowrap}
.marquee-item::before{content:"";width:18px;height:18px;background:var(--bleu);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M10 2v16M2 10h16M4.3 4.3l11.4 11.4M15.7 4.3 4.3 15.7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M10 2v16M2 10h16M4.3 4.3l11.4 11.4M15.7 4.3 4.3 15.7'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes defile{to{transform:translateX(-50%)}}
@media (max-width:640px){.trust-inner{flex-direction:column;align-items:flex-start;gap:16px}.trust-label{max-width:none}.marquee{width:100%}}

/* ========== 3. SERVICES ========== */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3vw,36px);border:1px solid var(--trait);border-radius:var(--rayon);background:var(--blanc);transition:border-color .4s var(--ease),transform .4s var(--ease);min-width:0}
.svc:hover{border-color:var(--bleu);transform:translateY(-4px)}
.svc::before{content:"";width:44px;height:44px;background:var(--bleu);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.svc p{color:var(--ardoise);font-size:16px}
.svc--wide{grid-column:span 2;background:var(--brume);border-color:transparent}
.ico-vitrine{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='5' y='9' width='34' height='24' rx='3'/%3E%3Cpath d='M5 15h34M16 39h12M22 33v6'/%3E%3C/svg%3E")}
.ico-ecommerce{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M7 10h5l4 18h18l4-12H14'/%3E%3Ccircle cx='18' cy='34' r='2'/%3E%3Ccircle cx='31' cy='34' r='2'/%3E%3C/svg%3E")}
.ico-refonte{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M34 16a13 13 0 1 0 2 9'/%3E%3Cpath d='M36 8v8h-8'/%3E%3C/svg%3E")}
.ico-local{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M22 39s12-11 12-20a12 12 0 0 0-24 0c0 9 12 20 12 20Z'/%3E%3Ccircle cx='22' cy='19' r='4'/%3E%3C/svg%3E")}
.ico-maintenance{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M27 9a8 8 0 0 0-9 11L8 30a3 3 0 0 0 4 4l10-10a8 8 0 0 0 11-9l-5 5-4-1-1-4 4-6Z'/%3E%3C/svg%3E")}
.ico-agents{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='9' y='14' width='26' height='20' rx='5'/%3E%3Cpath d='M22 8v6M17 24h.01M27 24h.01'/%3E%3C/svg%3E")}
.chips{margin:auto 0 0;padding:16px 0 0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--trait)}
.chips li{font-size:13px;font-weight:500;padding:5px 12px;border-radius:99px;background:var(--blanc);color:var(--ardoise)}
@media (max-width:900px){.services-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr}.svc--wide{grid-column:auto}}

/* ========== 4. SECTEURS (onglets) ========== */
.sectors{background:var(--brume)}
.tablist{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.tab{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:99px;border:1px solid var(--trait);background:var(--blanc);font-size:15px;font-weight:500;color:var(--ardoise);cursor:pointer;transition:all .3s var(--ease);user-select:none}
.tab:hover{color:var(--nuit);border-color:var(--nuit)}
.tab.est-actif{background:var(--nuit);border-color:var(--nuit);color:var(--blanc)}
.panel{display:none;grid-template-columns:1fr 1fr 1fr;gap:16px;min-height:340px}
.panel.est-actif{display:grid}
.panel-col{background:var(--blanc);border-radius:var(--rayon);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:16px;min-width:0}
.panel-col h3.wp-block-heading{font-size:18px}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--galet)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ardoise)}
.checks li::before{content:"";width:20px;height:20px;flex:none;margin-top:3px;background:var(--emeraude);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center/contain no-repeat}
.panel.est-actif .checks li{animation:monte .5s var(--ease) both}
.panel.est-actif .checks li:nth-child(2){animation-delay:.06s}
.panel.est-actif .checks li:nth-child(3){animation-delay:.12s}
.panel.est-actif .checks li:nth-child(4){animation-delay:.18s}
@keyframes monte{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel-col--work{background:var(--nuit);color:var(--blanc)}
.panel-col--work .eyebrow{color:var(--nuit-douce)}
.panel-col--work p{color:var(--nuit-douce);font-size:16px}
.panel-col--work .wp-block-buttons{margin-top:auto}
.sectors-foot{margin-top:32px;color:var(--ardoise)}
@media (max-width:900px){.panel{grid-template-columns:1fr;min-height:0}}

/* ========== 5. RÉALISATIONS ========== */
.work{overflow:hidden}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.work-head .section-head{margin-bottom:0}
.work-hint{font-size:var(--wp--preset--font-size--petit);color:var(--galet)}
.work-viewport{margin-top:clamp(40px,5vw,64px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-left:max(20px, calc((100vw - 1240px) / 2 + 20px));padding-right:20px}
.work-viewport::-webkit-scrollbar{display:none}
.est-epingle .work-viewport{overflow:visible;scroll-snap-type:none}
.work-track{display:flex;gap:20px;width:max-content;padding-bottom:8px}
.project{width:min(560px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;gap:16px}
.browser{border-radius:var(--rayon);overflow:hidden;border:1px solid var(--trait);background:var(--brume);transition:transform .6s var(--ease)}
.project:hover .browser{transform:translateY(-6px)}
.browser-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--blanc);border-bottom:1px solid var(--trait);font-size:12px;color:var(--galet);white-space:nowrap;overflow:hidden}
.browser-bar::before{content:"";width:39px;height:9px;flex:none;background:radial-gradient(circle 4.5px at 4.5px 50%,var(--trait) 98%,transparent) 0 0/15px 9px repeat-x}
.shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.project-meta{display:grid;gap:4px}
.project-meta h3.wp-block-heading{font-size:22px}
.project-sector{font-size:15px;color:var(--ardoise)}
.project-done{display:inline-flex;align-items:center;gap:8px;width:fit-content;margin-top:6px;font-size:12px;font-weight:500;padding:5px 12px;border-radius:99px;border:1px solid var(--trait);color:var(--ardoise)}
.project-done::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--emeraude)}
.project--cta .cta-inner{aspect-ratio:16/11;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:24px;padding:10%;border-radius:var(--rayon);background:var(--nuit);color:var(--blanc)}
.project--cta h3.wp-block-heading{font-size:clamp(26px,3vw,38px);line-height:1.08;letter-spacing:-0.02em}
.tag-sombre{background:transparent;color:var(--nuit-douce);border-color:color-mix(in srgb,var(--blanc) 20%,transparent)}

/* ========== 6. MÉTHODE (ligne bleue qui se dessine : --trace posée par app.js) ========== */
.method{background:var(--brume)}
.method-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.method-wrap .section-head{position:sticky;top:120px}
.method-steps{position:relative;padding-left:40px;display:grid;gap:16px}
.method-steps::before,.method-steps::after{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--trait)}
.method-steps::after{background:var(--bleu);transform-origin:top;transform:scaleY(var(--trace,1))}
.step{position:relative;background:var(--blanc);border-radius:var(--rayon);padding:clamp(24px,3vw,36px);display:grid;gap:12px}
.step::before{content:"";position:absolute;left:-40px;top:40px;width:11px;height:11px;border-radius:50%;background:var(--bleu);box-shadow:0 0 0 6px var(--brume);z-index:1}
.step-num{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--galet);font-variant-numeric:tabular-nums}
.step p{color:var(--ardoise);font-size:16px}
.step .receive{display:flex;gap:10px;align-items:flex-start;padding-top:12px;border-top:1px solid var(--trait);font-size:15px;color:var(--nuit)}
.step .receive::before{content:"";width:20px;height:20px;flex:none;margin-top:1px;background:var(--emeraude);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:860px){.method-wrap{grid-template-columns:1fr}.method-wrap .section-head{position:static}}

/* ========== 7. FAQ (bloc Détails natif) ========== */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px)}
.faq-list{border-top:1px solid var(--trait)}
.faq-item{border-bottom:1px solid var(--trait)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:20px 0;cursor:pointer;font:600 clamp(17px,1.3vw,20px)/1.35 var(--titres);letter-spacing:-0.01em;color:var(--nuit)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--trait);font:400 20px/1 var(--texte);transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s}
.faq-item[open] summary::after{transform:rotate(45deg);background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.faq-item p{padding:0 56px 24px 0;color:var(--ardoise);max-width:62ch}
.faq-item[open] p{animation:monte .45s var(--ease)}
@media (max-width:860px){.faq-wrap{grid-template-columns:1fr}.faq-item p{padding-right:0}}

/* ========== 8. APPEL FINAL ========== */
.final{padding-block:clamp(16px,2vw,24px)}
.final-card{position:relative;overflow:hidden;isolation:isolate;border-radius:clamp(24px,3vw,40px);background:linear-gradient(150deg,var(--bleu) -30%,var(--nuit) 55%);color:var(--blanc);padding:clamp(56px,9vw,120px) clamp(24px,6vw,96px);display:grid;justify-items:center;text-align:center;gap:24px}
.final-card::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(color-mix(in srgb,var(--blanc) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--blanc) 5%,transparent) 1px,transparent 1px);background-size:56px 56px;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.final-card h2.wp-block-heading{max-width:18ch}
.final-card p{color:var(--nuit-douce);max-width:48ch}
.wp-block-buttons.final-ctas{justify-content:center;margin-top:24px}

/* ========== 9. CONTACT ========== */
.contact-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact-side .section-head{margin-bottom:0}
.contact-direct{display:grid;gap:12px;margin-top:32px}
.cd-ligne{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--trait)}
.cd-label{font-size:13px;color:var(--galet)}
.cd-val{font-weight:500}
.cd-val:empty{display:none}
.form-card{border:1px solid var(--trait);border-radius:var(--rayon-lg);padding:clamp(24px,4vw,48px);min-width:0}
/* Contact Form 7 */
.wpcf7 form{display:grid;gap:32px}
.wpcf7-form-control-wrap{display:block}
.etape{display:grid;gap:20px;min-width:0}
.form-etapes .etape{display:none}
.form-etapes .etape.est-actif{display:grid;animation:glisse .45s var(--ease)}
@keyframes glisse{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.etape-titre{font:600 clamp(22px,2vw,28px)/1.15 var(--titres);letter-spacing:-0.02em}
.champ{display:grid;gap:8px}
.champ label,.champ-label{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--nuit)}
.champ label br{display:none}
.rangee{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{width:100%;min-height:52px;padding:14px 16px;border:1px solid var(--trait);border-radius:12px;font:400 16px var(--texte);color:var(--nuit);background:var(--blanc);transition:border-color .3s}
.wpcf7 textarea{min-height:120px;resize:vertical}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{outline:none;border-color:var(--bleu)}
.choix .wpcf7-radio{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choix .wpcf7-list-item{margin:0;display:block}
.choix label{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 18px;border:1px solid var(--trait);border-radius:14px;cursor:pointer;font-weight:500;font-size:16px;transition:all .3s var(--ease)}
.choix input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;border-radius:50%;border:1.5px solid var(--galet);flex:none;transition:all .3s var(--ease)}
.choix input:checked{border:5px solid var(--bleu)}
.choix label:has(input:checked){border-color:var(--bleu);background:color-mix(in srgb,var(--bleu) 5%,transparent)}
.champ-rgpd{font-size:14px;color:var(--ardoise)}
.champ-rgpd .wpcf7-list-item{margin:0}
.champ-rgpd label{display:flex;gap:12px;align-items:flex-start}
.champ-rgpd input{width:22px;height:22px;margin-top:1px;accent-color:var(--bleu);flex:none}
.wpcf7 input[type=submit]{justify-self:start;min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--bleu);color:var(--blanc);font:500 16px var(--texte);cursor:pointer;transition:background .3s}
.wpcf7 input[type=submit]:hover{background:var(--bleu-fonce)}
.wpcf7-spinner{display:none}
.wpcf7-not-valid-tip{color:#B42318;font-size:14px;margin-top:4px}
.wpcf7 form .wpcf7-response-output{margin:0;padding:14px 16px;border-radius:12px;border:1px solid var(--trait);font-size:15px}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--emeraude);color:var(--nuit)}
/* Barre de progression et boutons d'étape (ajoutés par app.js) */
.form-progress{display:grid;gap:10px}
.form-progress-top{display:flex;justify-content:space-between;font-size:14px;color:var(--ardoise);font-variant-numeric:tabular-nums}
.form-progress-bar{height:4px;border-radius:4px;background:var(--brume);overflow:hidden}
.form-progress-bar span{display:block;height:100%;width:33.33%;background:var(--bleu);border-radius:4px;transition:width .6s var(--ease)}
.form-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.form-nav button{min-height:52px;padding:0 26px;border-radius:999px;font:500 16px var(--texte);cursor:pointer;border:1px solid var(--trait);background:var(--blanc);color:var(--nuit)}
.form-nav .suivant{margin-left:auto;background:var(--bleu);border-color:var(--bleu);color:var(--blanc)}
.form-erreur{color:#B42318;font-size:14px;min-height:1.2em}
@media (max-width:860px){.contact-wrap{grid-template-columns:1fr}}
@media (max-width:520px){.choix .wpcf7-radio,.rangee{grid-template-columns:1fr}}

/* ========== PIED DE PAGE ========== */
.footer{padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--trait);margin-top:clamp(72px,10vw,140px)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-col{display:grid;align-content:start;gap:10px;min-width:0}
.footer-intro{margin-top:6px;max-width:34ch;font-size:15px;color:var(--ardoise)}
.footer-titre.wp-block-heading{margin-bottom:4px;font:600 14px/1.4 var(--texte);letter-spacing:0}
.footer-menu .wp-block-navigation__container{gap:10px}
.footer-menu .wp-block-navigation-item__content,.footer-lien a{font-size:15px;color:var(--ardoise);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.footer-menu .wp-block-navigation-item__content:hover,.footer-lien a:hover{background-size:100% 1px}
.footer-lien:has(a[href="https://wa.me/"]){display:none}
.wordmark{display:flex;align-items:flex-end;margin-top:clamp(48px,6vw,80px);overflow:hidden;padding-bottom:.02em;font:600 clamp(110px,30vw,440px)/.78 var(--titres);letter-spacing:-0.06em;color:var(--nuit);user-select:none}
.wordmark em{font-style:normal;color:var(--bleu)}
.wordmark::after{content:"";width:.13em;height:.13em;margin:0 0 .04em .04em;border-radius:50%;background:var(--emeraude);flex:none}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px;border-top:1px solid var(--trait);font-size:13px;color:var(--galet);font-variant-numeric:tabular-nums}
.legal a{color:inherit;text-decoration:none}
.legal a:hover{color:var(--nuit)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* Bouton WhatsApp flottant : masqué tant que le numéro n'est pas renseigné (https://wa.me/33612345678) */
.wa{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40}
.wa a{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blanc);border:1px solid var(--trait);box-shadow:0 12px 30px -14px color-mix(in srgb,var(--nuit) 45%,transparent);font-size:0;color:transparent;transition:transform .4s var(--ease)}
.wa a::before{content:"";width:24px;height:24px;background:var(--emeraude);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm4.5 12.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4a.5.5 0 0 0 0-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.4 3.9c1.7.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .2-1.2c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm4.5 12.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4a.5.5 0 0 0 0-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.4 3.9c1.7.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .2-1.2c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
.wa a:hover{transform:scale(1.08)}
.wa:has(a[href="https://wa.me/"]){display:none}

/* ========== PAGES LÉGALES ========== */
.d2{font-size:var(--wp--preset--font-size--titre-2)}
.texte-legal{max-width:760px}
.texte-legal h2.wp-block-heading{font-size:var(--wp--preset--font-size--titre-3);margin-top:36px;margin-bottom:8px}
.texte-legal p{margin-bottom:12px;color:var(--ardoise)}

/* ========== INTRO, CURSEUR, APPARITIONS (éléments créés par app.js) ========== */
.ytr-intro{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--blanc)}
.ytr-intro .mot{display:flex;overflow:hidden;font:600 clamp(40px,8vw,104px)/1.1 var(--titres);letter-spacing:-0.03em;color:var(--nuit)}
.ytr-intro .mot span{display:inline-block}
.ytr-intro .mot .esp{width:.28em}
.ytr-intro .mot .b{color:var(--bleu)}
.curseur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--bleu);display:grid;place-items:center;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.curseur span{font-size:13px;font-weight:600;color:var(--blanc);opacity:0;transition:opacity .2s}
.curseur.on{opacity:1}
.curseur.survol{width:40px;height:40px;margin:-20px 0 0 -20px;background:color-mix(in srgb,var(--bleu) 18%,transparent)}
.curseur.voir{width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--bleu)}
.curseur.voir span{opacity:1}
@media (hover:none),(pointer:coarse){.curseur{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .hero-title .w,.js .hero .hero-sub,.js .hero .hero-ctas,.js .hero .hero-hint{opacity:1;transform:none;filter:none}
}