/* =====================================================================
   xavierpilot.fr — feuille de style unique.
   Les tokens reprennent ceux du site vitrine de l'application de gestion
   locative (vitrine.css) : meme fond chaud, meme vert, memes rayons. Les
   deux sites partagent la charte mais AUCUN lien, ni technique ni edito.
   ===================================================================== */

/* ============================================================ Design tokens */
:root{
  --ink:#16211c;        /* texte principal */
  --ink2:#3d4b44;
  --muted:#6d7a73;
  --line:#e6e2da;
  --line2:#f0ede7;
  --bg:#fbfaf7;         /* fond chaud */
  --card:#ffffff;
  --accent:#1f6f52;     /* vert profond */
  --accent-dark:#17553f;
  --accent-soft:#e9f2ed;
  --accent-line:#d6e6dd;
  --sand:#f4efe6;
  --sand-line:#ddd7cb;
  --grey-soft:#f1f0ed;
  --radius:14px;
  --shadow:0 1px 2px rgba(22,33,28,.05), 0 12px 32px -20px rgba(22,33,28,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent-dark)}
a:hover{color:var(--accent)}
p{margin:0;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ============================================================ En-tête */
header.site{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.88);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:26px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-weight:700;letter-spacing:-.01em}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--accent);color:#fff;
  flex:0 0 30px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;letter-spacing:0}
.nav .links{display:flex;gap:22px;margin-left:auto;font-size:14.5px}
.nav .links a{color:var(--ink2);text-decoration:none}
.nav .links a:hover{color:var(--accent)}
.nav .cta{background:var(--accent);color:#fff;text-decoration:none;padding:9px 16px;
  border-radius:99px;font-size:14.5px;font-weight:600;white-space:nowrap}
.nav .cta:hover{background:var(--accent-dark);color:#fff}
.nav-actions{display:flex;align-items:center;gap:12px}
.icon-btn{width:36px;height:36px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink2);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Le telechargement du CV porte son libelle : une fleche seule, a cote du picto
   LinkedIn, ne dit pas ce qu'elle telecharge. */
.pill-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink2);
  font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.pill-btn:hover{border-color:var(--accent);color:var(--accent)}
/* Le meme picto LinkedIn sert partout : en-tete, carte de contact, pied de page. */
.li-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none}

/* ============================================================ Accroche */
.hero{padding:64px 0 44px}
.hero .cols{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kicker{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.hero h1{font-size:clamp(32px,5.2vw,54px);line-height:1.08;letter-spacing:-.03em;
  margin:14px 0 18px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lede{font-size:clamp(17px,2vw,19.5px);color:var(--ink2);max-width:56ch;margin:0 0 28px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;
  text-decoration:none;padding:13px 24px;border-radius:99px;font-weight:600;font-size:15.5px;border:0}
.btn:hover{background:var(--accent-dark);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);padding:12px 23px}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:#fff}
.btn.ghost svg{stroke:var(--accent)}
.facts{display:flex;gap:26px 30px;margin-top:38px;flex-wrap:wrap}
.facts div span{display:block}
.facts .n{font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--accent)}
.facts .l{font-size:13.5px;color:var(--muted)}
.portrait{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--sand);
  aspect-ratio:1/1;box-shadow:0 1px 2px rgba(22,33,28,.06),0 24px 48px -28px rgba(22,33,28,.5)}
.portrait img{width:100%;height:100%;object-fit:cover}

/* ============================================================ Sections */
section{padding:56px 0;scroll-margin-top:76px}
section.sand{background:var(--sand);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-h{margin-bottom:26px}
.sec-h h2{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.02em;margin:8px 0 8px;line-height:1.15}
.sec-h p{color:var(--ink2);max-width:66ch}

/* ============================================================ Expertise */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px 24px 26px;display:flex;flex-direction:column;gap:12px}
.card h3{margin:0;font-size:17.5px;letter-spacing:-.01em}
.card p{font-size:15px;color:var(--ink2)}
.card svg{stroke:var(--accent)}

/* ============================================================ Parcours */
.timeline{display:flex;flex-direction:column;border-top:1px solid var(--sand-line)}
.tl{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:22px 0;
  border-bottom:1px solid var(--sand-line)}
.tl .meta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tl .date{font-size:14px;color:var(--accent);font-weight:700;letter-spacing:.01em}
.tl .emblem{height:26px;max-width:150px;object-fit:contain;object-position:left center}
.tl .emblem.lg-groupama{height:32px}
.tl .emblem.lg-bpce{height:18px}
.tl .emblem.lg-ag2r{height:34px}
.tl .emblem.lg-sopra{height:18px}
.tl .emblem.lg-esiee{height:24px}
.tl .emblem.lg-thot{height:30px}
/* Ligne Formation : le logo officiel de Claude, recupere sur Wikimedia Commons
   (domaine public, marque deposee d'Anthropic). Usage nominatif : il designe
   l'outil reellement utilise, il ne suggere aucun partenariat. */
.tl .emblem.lg-claude{height:22px}
.tl h3{margin:0 0 6px;font-size:17.5px;letter-spacing:-.01em}
.tl p{font-size:15px;color:var(--ink2);max-width:66ch}
/* La formation IA est la ligne mise en avant : fond vert clair, deborde des gouttieres */
.tl.hl{background:var(--accent-soft);margin:0 -20px;padding-left:20px;padding-right:20px}
.dl{margin-top:26px}

/* ============================================================ Réalisations */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.work.wide{grid-column:1/-1}
.work .shot{display:block;width:100%;height:auto}
/* Le site locatif s'affiche en direct. Il ne s'ouvre que parce que son application nomme
   explicitement xavierpilot.fr dans son en-tete frame-ancestors : toute autre origine, et
   tout chemin autre que ses pages publiques, reste refuse. */
.work .live{height:560px;background:var(--sand);border-bottom:1px solid var(--line)}
.work .live iframe{width:100%;height:100%;border:0;display:block}
.sub-h{margin:34px 0 18px}
/* --- diagramme d'etats : large, il defile horizontalement sur petit ecran --- */
.diagram{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 28px;overflow-x:auto}
.diagram svg{display:block;min-width:1140px;max-width:1140px;height:auto}
.d-lane{font-size:11.5px;font-weight:700;letter-spacing:.12em;fill:var(--accent)}
.d-box rect{fill:var(--card);stroke:var(--line)}
.d-st{font-size:15px;font-weight:700;text-anchor:middle}
.d-st2{font-size:13px;font-weight:600;text-anchor:middle;fill:var(--ink)}
.d-note{font-size:12px;fill:var(--muted)}
.d-arrow{fill:none;stroke:#8d9a93;stroke-width:1.4}
.d-dash{stroke-dasharray:5 4}

/* --- l'assistant IA : pas d'ecran a montrer, on decrit les automatismes --- */
.autos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.auto{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px 22px;display:flex;gap:14px;align-items:flex-start}
.auto svg{stroke:var(--accent);flex:0 0 22px;margin-top:2px}
.auto h4{margin:0 0 5px;font-size:16px;letter-spacing:-.01em}
.auto p{font-size:14.5px;color:var(--ink2)}
.sub-h h3{font-size:20px;letter-spacing:-.02em;margin:0 0 6px}
.sub-h p{color:var(--ink2);max-width:66ch;font-size:15px}
.screens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.screen{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.screen .cap{padding:12px 16px 14px;border-top:1px solid var(--line)}
.screen .cap b{display:block;font-size:14.5px;letter-spacing:-.01em}
.screen .cap span{font-size:13px;color:var(--muted)}
.work{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.work .chrome{background:#eceae2;border-bottom:1px solid var(--line);padding:9px 14px;
  display:flex;align-items:center;gap:6px}
.work .chrome i{width:8px;height:8px;border-radius:50%;background:#d3cfc3;display:block}
.work .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line)}
.work .body h3{margin:0;font-size:17.5px;letter-spacing:-.01em}
.work .body p{font-size:15px;color:var(--ink2)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tag{background:var(--grey-soft);border-radius:7px;padding:3px 9px;font-size:12.5px;color:var(--ink2)}
.note{font-size:13px;color:var(--muted);margin-top:14px}

/* --- maquette 1 : le site d'annonces (charte verte de vitrine.css) --- */
/* Dessinee en miniature comme celles du back-office : polices de 6 a 10 px, puis
   agrandie au zoom par .stage .mock. Les valeurs de couleur viennent de la charte
   reelle du site locatif, elles ne sont pas inventees. */
.mock{height:244px;overflow:hidden}
.mock-vit{background:var(--bg);display:flex;flex-direction:column}
/* Hauteur commune aux quatre vues, et surtout PLUS PETITE que celle du cadre : .stage fait
   480 px pour un zoom de 1,72, soit 279 px de place reelle. Une maquette plus haute est
   rognee en haut ET en bas par le centrage, ce qui coupe la barre de navigation.
   Selecteur double a dessein : .stage .mock pose height:auto plus bas dans ce fichier, a
   specificite egale, et l'emporterait. */
.stage .mock.mock-vit{height:268px}

/* l'en-tete du site, commun aux quatre vues */
.mock-vit .vnav{background:#fff;border-bottom:1px solid var(--line);flex:0 0 26px;
  display:flex;align-items:center;gap:9px;padding:0 12px}
.mock-vit .vnav .vmark{width:11px;height:11px;border-radius:4px;background:var(--accent);flex:0 0 11px}
.mock-vit .vnav b{font-size:8.5px;letter-spacing:-.01em;color:var(--ink)}
.mock-vit .vnav nav{display:flex;gap:8px;margin-left:6px}
.mock-vit .vnav nav span{font-size:6.5px;color:var(--muted)}
.mock-vit .vnav .vcta{margin-left:auto;background:var(--accent);color:#fff;border-radius:99px;
  padding:2px 7px;font-size:6px;font-weight:700}
.mock-vit .vnav .vver{font-size:5.5px;color:#b3b0a6}

.mock-vit .vin{padding:10px 12px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.mock-vit .vkick{font-size:5.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.mock-vit h4{margin:0;font-size:11px;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.mock-vit h4 em{font-style:normal;color:var(--accent)}
.mock-vit h5{margin:0;font-size:8px;letter-spacing:-.01em;color:var(--ink)}
.mock-vit i{display:block;height:3.5px;border-radius:2px;background:#d8d4c8}
.mock-vit .vtxt{display:flex;flex-direction:column;gap:3px}

/* le hero de l'accueil : accroche a gauche, collage de photos a droite */
.mock-vit .vhero{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:center;flex:1}
.mock-vit .vacts{display:flex;gap:5px;margin-top:1px}
.mock-vit .vbtn{border-radius:99px;font-size:6px;font-weight:700;padding:3px 8px;
  background:var(--accent);color:#fff}
.mock-vit .vbtn.vghost{background:#fff;color:var(--accent-dark);border:1px solid var(--line)}
.mock-vit .vcollage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:5px;height:100%;min-height:86px}
.mock-vit .vcollage .vc{border-radius:6px;overflow:hidden;background:var(--sand);
  border:1px solid var(--line);position:relative}
.mock-vit .vcollage .vc1{grid-row:1 / span 2}
.mock-vit .vcollage .vc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;
  background:linear-gradient(to top,rgba(22,33,28,.62),rgba(22,33,28,0))}
.mock-vit .vcollage .vc b{position:absolute;left:4px;bottom:3px;font-size:5px;color:#fff;z-index:1}

/* le bandeau de chiffres du hero */
.mock-vit .vfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
  border-top:1px solid var(--line);padding-top:7px}
.mock-vit .vfacts .vn{display:block;font-size:11px;font-weight:700;color:var(--accent-dark);
  letter-spacing:-.02em;line-height:1.1}
.mock-vit .vfacts .vl{display:block;font-size:5.5px;color:var(--muted);margin-top:1px}

/* la grille de cartes de logement */
.mock-vit .vcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;flex:1}
.mock-vit .vcards.vduo{grid-template-columns:repeat(2,minmax(0,1fr))}
.mock-vit .vcard{background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden;
  display:flex;flex-direction:column}
.mock-vit .vcard .vph{flex:1;min-height:46px;background:var(--sand);position:relative;
  border-bottom:1px solid var(--line2)}
.mock-vit .vcard .vph svg{position:absolute;inset:0;width:100%;height:100%}
.mock-vit .vbadge{position:absolute;left:4px;top:4px;border-radius:99px;padding:1.5px 5px;
  font-size:5px;font-weight:700;background:#e9f7ef;color:#1e8449}
.mock-vit .vbadge.voff{background:var(--grey-soft);color:var(--muted)}
.mock-vit .vbadge.vsoon{background:#fbf1e2;color:#a76b1f}
.mock-vit .vcard .vtype{position:absolute;left:4px;bottom:4px;font-size:5px;color:#fff;
  background:rgba(22,33,28,.62);border-radius:4px;padding:1.5px 4px}
.mock-vit .vcard .vnb{position:absolute;right:4px;bottom:4px;font-size:5px;color:#fff;
  background:rgba(22,33,28,.62);border-radius:4px;padding:1.5px 4px}
.mock-vit .vcard .vbd{padding:5px 6px 6px;display:flex;flex-direction:column;gap:3px;flex:1}
.mock-vit .vcard .vbd b{font-size:7px;letter-spacing:-.01em;color:var(--ink)}
.mock-vit .vmetas{display:flex;flex-wrap:wrap;gap:3px}
.mock-vit .vm{background:var(--grey-soft);border-radius:4px;padding:1px 4px;font-size:5px;color:var(--ink2)}
.mock-vit .vm.vhl{background:var(--accent-soft);color:var(--accent-dark);font-weight:700}
.mock-vit .vprice{display:flex;align-items:baseline;gap:3px;margin-top:auto;padding-top:2px}
.mock-vit .vprice .vamt{font-size:9px;font-weight:700;color:var(--accent-dark);letter-spacing:-.02em}
.mock-vit .vprice .vper{font-size:5px;color:var(--muted)}
.mock-vit .vvideo{display:inline-flex;align-items:center;gap:3px;font-size:5.5px;font-weight:700;
  color:var(--accent-dark)}
.mock-vit .vvideo .vic{width:8px;height:8px;border-radius:99px;background:var(--accent);color:#fff;
  font-size:4.5px;display:inline-flex;align-items:center;justify-content:center}

/* la page d'une adresse : presentation du lieu, puis galerie defilante */
.mock-vit .vbien{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:center}
.mock-vit .vback{font-size:5.5px;color:var(--muted)}
.mock-vit .vargs{display:flex;flex-direction:column;gap:2.5px;margin:1px 0}
.mock-vit .vargs span{font-size:5.5px;color:var(--ink2);padding-left:7px;position:relative}
.mock-vit .vargs span::before{content:"";position:absolute;left:0;top:3px;width:3px;height:3px;
  border-radius:99px;background:var(--accent)}
.mock-vit .vvisuel{height:62px;border-radius:7px;background:var(--sand);border:1px solid var(--line);
  position:relative;overflow:hidden}
.mock-vit .vvisuel .vetat{position:absolute;right:4px;top:4px;border-radius:99px;padding:1.5px 5px;
  font-size:5px;font-weight:700;background:#e9f7ef;color:#1e8449}
.mock-vit .vgal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;flex:1}
.mock-vit .vgal .vg{min-height:34px;border-radius:6px;background:var(--sand);border:1px solid var(--line);
  position:relative;overflow:hidden}

/* la barre de filtres, calculee cote serveur */
.mock-vit .vfiltres{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:6px 8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mock-vit .vchip{border-radius:99px;padding:2px 7px;font-size:5.5px;color:var(--ink2);
  background:var(--grey-soft)}
.mock-vit .vchip.von{background:var(--accent);color:#fff;font-weight:700}
.mock-vit .vrange{flex:1;min-width:60px;height:3px;border-radius:99px;background:var(--line);
  position:relative}
.mock-vit .vrange::after{content:"";position:absolute;left:0;top:0;height:3px;width:62%;
  border-radius:99px;background:var(--accent)}
.mock-vit .vcnt{margin-left:auto;font-size:5.5px;color:var(--muted)}

/* le pictogramme de maison, repris du site : il ne sert plus que de repli si un
   emplacement se retrouve sans photo */
.mock-vit .vhouse{fill:none;stroke:rgba(22,33,28,.18);stroke-width:1.6}

/* Les photos reelles des logements. Chaque emplacement est deja en position:relative et
   porte ses etiquettes en absolu APRES l'image : badge, type, nombre de photos et degrade
   restent donc au-dessus sans qu'aucun z-index soit necessaire. L'image est en
   object-fit:cover parce que les cadres n'ont pas le rapport des photos d'origine. */
.mock-vit .vcollage .vc img,
.mock-vit .vcard .vph img,
.mock-vit .vvisuel img,
.mock-vit .vgal .vg img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover}
/* .vph est le seul cadre a ne pas rogner son contenu : sans ca l'image deborde sur le
   liseré du bas de la carte. */
.mock-vit .vcard .vph{overflow:hidden}

/* --- maquette 2 : le back-office (charte bleu marine de app.css) --- */
.mock-crm{background:#eef2f6;display:flex;flex-direction:column}
.mock-crm .bar{background:#1B4F72;height:30px;display:flex;align-items:center;gap:5px;padding:0 12px}
.mock-crm .bar b{font-size:9px;color:#fff}
.mock-crm .bar .on{background:#fff;color:#1B4F72;font-size:8.5px;font-weight:700;border-radius:5px;padding:3px 7px}
.mock-crm .bar span{color:#cfe0ef;font-size:8.5px}
.mock-crm .in{padding:10px 12px;display:flex;flex-direction:column;gap:9px}
.mock-crm .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mock-crm .kpi{background:#fff;border:1px solid #e1e8ed;border-radius:8px;padding:7px 8px}
.mock-crm .kpi .l{font-size:7px;color:#5d6d7e;font-weight:700;letter-spacing:.4px}
.mock-crm .kpi .v{font-size:15px;font-weight:700;color:#1B4F72}
.mock-crm .kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mock-crm .col{background:#f0f4f8;border:1px solid #e1e8ed;border-radius:8px;overflow:hidden}
.mock-crm .col h4{margin:0;font-size:7.5px;color:#1B4F72;font-weight:700;padding:6px 7px;
  border-bottom:1px solid #e1e8ed}
.mock-crm .col .cards{padding:6px;display:flex;flex-direction:column;gap:5px}
.mock-crm .cand{background:#fff;border:1px solid #e1e8ed;border-radius:6px;padding:6px}
.mock-crm .cand i{display:block;height:4px;border-radius:2px;background:#c3ced8}

/* --- vocabulaire commun aux maquettes du back-office (repris de app.css) --- */
.mock-crm .in.tight{gap:7px}
.mock-crm h5{margin:0 0 1px;font-size:9px;color:#1B4F72;font-weight:700}
.mock-crm .tbl{background:#fff;border:1px solid #e1e8ed;border-radius:8px;overflow:hidden}
.mock-crm .tbl .th{background:#1B4F72;color:#fff;display:grid;gap:6px;padding:5px 8px;
  font-size:7px;font-weight:700;letter-spacing:.2px}
.mock-crm .tbl .tr{display:grid;gap:6px;padding:6px 8px;border-bottom:1px solid #eef2f5;
  align-items:center}
.mock-crm .tbl .tr:last-child{border-bottom:0}
.mock-crm .tbl i{display:block;height:4px;border-radius:2px;background:#c3ced8}
.mock-crm .pill{border-radius:20px;padding:1px 7px;font-size:6.5px;font-weight:700;
  justify-self:start;white-space:nowrap}
.mock-crm .p-loue{background:#e9f7ef;color:#1e8449}
.mock-crm .p-preavis{background:#fef5e7;color:#b9770e}
.mock-crm .p-reloc{background:#eaf2f8;color:#1f618d}
.mock-crm .p-vacant{background:#fdedec;color:#c0392b}
.mock-crm .p-haute{background:#fdecea;color:#c0392b}
.mock-crm .p-basse{background:#eaf2f8;color:#1f618d}
.mock-crm .box{background:#fff;border:1px solid #e1e8ed;border-radius:8px;padding:8px 9px;
  display:flex;flex-direction:column;gap:6px}
.mock-crm .chk{display:flex;align-items:center;gap:6px}
.mock-crm .chk .sq{width:8px;height:8px;border:1px solid #b9c6d1;border-radius:2px;flex:0 0 8px}
.mock-crm .chk .sq.on{background:#1B4F72;border-color:#1B4F72}
.mock-crm .chk i{flex:1}
.mock-crm .bars{display:flex;align-items:flex-end;gap:5px;height:52px;padding-top:4px}
.mock-crm .bars span{flex:1;background:#1B4F72;border-radius:2px 2px 0 0;opacity:.85}

/* ============================================================ Boites defilables */
/* Chaque realisation vit dans une boite dont le contenu defile horizontalement.
   Le defilement est natif (scroll-snap) : fleches et pastilles ne font que le
   piloter. Sans JavaScript, le glissement au doigt et a la molette marche quand meme. */
.showcase{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px}
.showcase-head{padding:24px 26px 20px}
.showcase-head h3{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}
.showcase-head p{font-size:15px;color:var(--ink2);max-width:80ch}

.reel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;border-top:1px solid var(--line)}
.reel::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}

.stage{height:480px;background:var(--sand);display:flex;align-items:center;
  justify-content:center;padding:22px 26px;overflow:hidden}
/* Les maquettes du back-office ont ete dessinees en miniature, avec des polices de
   7 a 9 px : c'est ce qui les rend credibles en vignette. Dans une grande boite, on
   ne les etire pas, on les AGRANDIT au zoom, sinon le texte reste illisible et le
   contenu flotte en haut d'un cadre vide. */
.stage .mock{width:512px;height:auto;zoom:1.72;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
  box-shadow:0 1px 2px rgba(22,33,28,.06),0 12px 26px -18px rgba(22,33,28,.45)}
.stage-diagram{background:var(--card);padding:20px 26px}
.stage-diagram svg{width:100%;max-width:none;min-width:0;height:auto}
/* L'assistant n'a pas d'ecran a montrer : le texte devient une vraie fiche posee
   sur le fond, plutot que des lignes perdues au milieu du cadre. */
.stage-auto{background:var(--accent-soft)}
.auto-big{max-width:60ch;display:flex;flex-direction:column;gap:14px;
  background:var(--card);border:1px solid var(--accent-line);border-radius:var(--radius);
  padding:32px 34px;box-shadow:0 1px 2px rgba(22,33,28,.05),0 14px 32px -22px rgba(22,33,28,.35)}
.auto-big svg{stroke:var(--accent)}
.auto-big h4{margin:0;font-size:22px;letter-spacing:-.02em}
.auto-big p{font-size:16.5px;color:var(--ink2);line-height:1.6}

.cap{padding:14px 26px;border-top:1px solid var(--line2);
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.cap b{font-size:15px;letter-spacing:-.01em}
.cap span{font-size:13.5px;color:var(--muted)}

.reel-bar{display:flex;align-items:center;gap:10px;padding:14px 26px;border-top:1px solid var(--line)}
.reel-bar.single .rnav,.reel-bar.single .dots{display:none}
.rnav{width:32px;height:32px;border-radius:99px;border:1px solid var(--line);background:var(--card);
  color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rnav:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.rnav:disabled{opacity:.32;cursor:default}
.dots{display:flex;gap:6px;align-items:center}
.dot{width:7px;height:7px;border-radius:99px;border:0;padding:0;background:#cfcabb;
  cursor:pointer;transition:width .18s ease,background .18s ease}
.dot.on{background:var(--accent);width:22px}
.reel-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto}
.reel-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--accent-dark);text-decoration:none;margin-left:6px}
.reel-link:hover{color:var(--accent)}

/* ============================================================ Références */
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:34px}
.logo{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);height:84px;
  display:flex;align-items:center;justify-content:center;padding:0 22px}
/* Logos en couleur, dans leur charte d'origine. Chaque marque a son propre rapport
   hauteur/largeur : les plafonds ci-dessous les ramenent a un poids visuel comparable. */
.logo img{max-width:100%;max-height:32px}
/* Chaque marque a un rapport hauteur/largeur different : sans plafond individuel,
   un logo tres allonge ecrase les autres. Ces valeurs egalisent les largeurs rendues. */
.logo img.lg-groupama{max-height:40px}
.logo img.lg-bpce{max-height:22px}
.logo img.lg-ag2r{max-height:42px}
.logo img.lg-sopra{max-height:22px}

.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.quotes .stack{display:flex;flex-direction:column;gap:18px}
blockquote{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;display:flex;flex-direction:column;gap:12px}
blockquote.lead{background:var(--accent-soft);border-color:var(--accent-line);gap:14px;justify-content:center}
blockquote p{font-size:16px;line-height:1.6;color:var(--ink)}
blockquote .who{font-size:14px;color:var(--ink2);font-weight:600}
blockquote .who span{font-weight:400;color:var(--muted)}
blockquote .mark{fill:var(--accent);opacity:.4}

/* ============================================================ Contact */
.contact-cols{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.contact-cols h2{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.02em;margin:0 0 14px;line-height:1.15}
.contact-cols p{font-size:17px;color:var(--ink2);max-width:52ch}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:26px 26px 28px;display:flex;flex-direction:column;gap:20px}
.contact-card .f{display:flex;flex-direction:column;gap:4px}
.contact-card .f.sep{border-top:1px solid var(--line2);padding-top:18px}
.contact-card .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.contact-card .val{font-size:17px;font-weight:600}
.contact-card .val.plain{font-size:15px;color:var(--ink2);font-weight:400}

/* ============================================================ Pied de page */
footer.site{border-top:1px solid var(--line);margin-top:24px;padding:28px 0 44px;
  font-size:13.5px;color:var(--muted)}
footer.site .cols{display:flex;gap:30px;flex-wrap:wrap;align-items:center}
footer.site a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
footer.site a:hover{color:var(--accent)}
footer.site .right{margin-left:auto}

/* ============================================================ Mentions légales */
.legal{max-width:74ch}
.legal h2{font-size:clamp(25px,3.4vw,34px);letter-spacing:-.02em;margin:0 0 18px;line-height:1.15}
.legal h3{font-size:17.5px;margin:28px 0 8px;color:var(--accent-dark)}
.legal p{color:var(--ink2);margin-bottom:10px}

/* ============================================================ Responsive */
@media (max-width:900px){
  .hero .cols{grid-template-columns:1fr;gap:32px}
  .portrait{max-width:320px}
  .cards,.works,.quotes,.logos,.screens,.autos{grid-template-columns:1fr}
  .stage{height:380px;padding:16px}
  .showcase-head,.cap,.reel-bar{padding-left:18px;padding-right:18px}
  .reel-tags{margin-left:0;width:100%}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-cols{grid-template-columns:1fr;gap:28px}
  .tl{grid-template-columns:1fr;gap:10px}
  .tl .meta{flex-direction:row;align-items:center;gap:14px}
  .tl.hl{margin:0 -14px;padding-left:14px;padding-right:14px}
}
@media (max-width:640px){
  .nav .links{display:none}
  .hero{padding:40px 0 32px}
  section{padding:40px 0}
  .facts{gap:18px 24px}
  .facts .n{font-size:23px}
  .mock{height:200px}
}